Promise based Action succeeds, data gets resolved but i get an error message

Question

So i'm trying to build this action on a react and i need it as a promise. The action succeeds, i receive the response from the server but i also get an error saying:

VM89852:98 Uncaught TypeError: Cannot read property 'then' of undefined.

action:

export const fetchAllAccounts = (token, dispatch) => {
 return new Promise((resolve, reject) => {
  fetchAccountsStart((dispatch));

  return axios.get(`${API_URL}/accounts`, {
   headers: {
     'Authorization': `Bearer ${token}`,
     'Content-Type': 'application/json'
    }
   }).then(
      (response) => {
        fetchAccountsSuccess(dispatch, response.data);
        resolve(response.data);
      },(error) => {
        fetchAccountsFailed(dispatch, error.data);
        reject(error.data);
      },
   );
 });
};

Also heres the method on how i call this action.

 this.props.fetchAllAccounts(token)
  .then((data) => {
    console.log("#".repeat(120));
    console.log(data);
    console.log("#".repeat(120));
  }).catch((error) => {
    console.log("#".repeat(120));
    console.log(error);
    console.log("#".repeat(120));
  });

for which `.then` is the error? note, please avoid the [promise constructor anti pattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) — Jaromanda X, Aug 18 '17 at 10:30
I'm not seeing a `.then` above that would have that problem. The best way to solve problems like this is *debugging*, not posting SO questions. In your browser's debugger options, tell it to "break on all exceptions" (or "break on caught exceptions" or similar). That will make it stop and highlight the line on which the error occurred. Then you can figure out how you're getting `undefined` and trying to call `.then` on it. — T.J. Crowder, Aug 18 '17 at 10:31
are you sure `this.props.fetchAllAccounts` is calling `export const fetchAllAccounts` - because that definitely returns a Promise — Jaromanda X, Aug 18 '17 at 10:33
@Buda: It's clearly not happening there, or the `fetchAllAccounts` you're using isn't the one quoted. — T.J. Crowder, Aug 18 '17 at 10:34
@JaromandaX yeah i'm sure, heres the call from mapDispatchToProps ... fetchAllAccounts: (token) => { fetchAllAccounts(token, dispatch) }, — iizmad, Aug 18 '17 at 10:36
`i'm sure` - be positive - put a `console.log('some random value');` in there somewhere to be sure - because what you say is impossible — Jaromanda X, Aug 18 '17 at 10:37
@JaromandaX Tried that the data gets received passed on the state tree and all that. — iizmad, Aug 18 '17 at 10:39
Re @JaromandaX's point about the "new Promise anti-pattern": https://pastebin.com/TgSbkDYP Remember that `then` and `catch` create new promises; you build a chain (or pipeline) in which you transform things as you go... — T.J. Crowder, Aug 18 '17 at 10:39
`fetchAllAccounts: (token) => { fetchAllAccounts(token, dispatch) },` ... try `fetchAllAccounts: (token) => fetchAllAccounts(token, dispatch)` or `fetchAllAccounts: (token) => { return fetchAllAccounts(token, dispatch) }` - because what you've done ensures an undefined return as you are seeing — Jaromanda X, Aug 18 '17 at 10:40
@T.J.Crowder I've borrowed your comments from your pastebin :p but the code was all me :p — Jaromanda X, Aug 18 '17 at 10:53

Jaromanda X · Answer 1 · 2017-08-18T10:53:39.053

your comment

heres the call from mapDispatchToProps ...
fetchAllAccounts: (token) => { fetchAllAccounts(token, dispatch) },

There is your problem, in the comment. This either needs to be

fetchAllAccounts: (token) => { return fetchAllAccounts(token, dispatch) },

or

fetchAllAccounts: (token) => fetchAllAccounts(token, dispatch),

Understand that with arrow functions, if you use {} you need to return, there is no implied return

As a bonus - remove the promise constructor anti-pattern

export const fetchAllAccounts = (token, dispatch) => {
    fetchAccountsStart((dispatch));
    return axios.get(`${API_URL}/accounts`, {
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        }
    }).then(
        (response) => {
            fetchAccountsSuccess(dispatch, response.data);
            return response.data;
        }, (error) => {
            fetchAccountsFailed(dispatch, error.data);
            throw error.data;
            // Borrowed from @T.J.Crowder's pastebin :p
            // Note that it's best to reject or throw an Error instance,
            // not other types; e.g., `throw new Error(error.data)` or
            // `return Promise.reject(new Error(error.data))`

        },
    );
};

Promise based Action succeeds, data gets resolved but i get an error message

1 Answers1