Promise chain cannot accept my parameters

Question

I have an issue with chaining the promises which have parameters assigned to them:

here is my initial chain :

dispatchTermsCondition(history, dispatch)
        .then((history, dispatch)=>
             dispatchSetPrivacy(history, dispatch)
         )
         .then(()=>
                dispatcherUserTermsPrivacy(history,dispatch, getState,response.data.tj_id)
          );

The first chain works fine and when it comes to second it cannot find the parameters I sent to it. Here is my second function(dispatchSetPrivacy):

export function dispatchSetPrivacy(history, dispatch) {
return axios.get("some url")
    .then((response) => {
        dispatch({
            type: SET_PRIVACY,
            payload: {
                privacy: {id: response.data.id, content: response.data.content, version: response.data.version }
            }
        });

    }).catch(function(response){


        console.log(response);
        history.push("/error");
    });
 }

Here is the error I get:

TypeError: dispatch is not a function at bundle.js:76071

and it happens in dispatchSetPrivacy.

Any idea?

First of all, i would say you're missing "returns" statements before dispatchSetPrivacy and dispatcherUserTermsPrivacy. — Gnujeremie, Jun 07 '18 at 15:33
A `then` callback takes only a single argument. Use just `history =>` instead of `(history, dispatch)=>` and take the `dispatch` from the surrounding environment. — Bergi, Jun 07 '18 at 15:33
@Gnujeremie No, the returns are implicit in arrow functions without block bodies — Bergi, Jun 07 '18 at 15:33
@Bergi oh right I didn't notice. I'm used to writing block bodies even for a simple return. — Gnujeremie, Jun 07 '18 at 15:34
Accessing `history` in the `dispatcherUserTermsPrivacy` call will not work. See [How do I access previous promise results in a `.then()` chain?](https://stackoverflow.com/q/28250680/1048572) — Bergi, Jun 07 '18 at 15:35
@HamedMinaee You have `dispatch`. But not as a result from calling `dispatchTermsCondition`. — Bergi, Jun 07 '18 at 15:36
You're not returning anything in the axios .then so of course the next one doesn't have params. But I'm not sure why you're passing dispatch in the dispatchTermsCondition chain, isn't it available in the outer function? Looks like a redux-thunk and dispatch and getState are available anyway, you've assigned them to the parameters of the then when they were already defined by the outer function which is an anti-pattern and not necessary here either. Would be easier if you posted the whole thunk action to see that. — Dominic, Jun 07 '18 at 15:44
Can you show the surrounding code? Any imports, parameter declarations, initializations etc ? — J. Pichardo, Jun 07 '18 at 15:51
@DominicTobias my bad you are right please add it as an answer I will accept it — Hamed Minaee, Jun 07 '18 at 16:15

Dominic · Accepted Answer · 2018-06-07T19:36:32.410

So this line:

.then((history, dispatch) =>
  dispatchSetPrivacy(history, dispatch)
)

Will return the result of dispatchSetPrivacy, but in the .then nothing is being returned so there won't be any parameters. If you want to pass params then pass something in the return, for example:

export const dispatchSetPrivacy = (history, dispatch) =>
    axios.get("some url")
      .then((response) => {
        dispatch({
          type: SET_PRIVACY,
          payload: {
            privacy: { id: response.data.id, content: response.data.content, version: response.data.version }
          }
        });
        return response;
      })
      ...

It shouldn't be necessary to pass dispatch and history through as they are available from the upper scope (the redux thunk) and you should just be able to use them from there:

const yourThunk = (history, otherArg) => (dispatch, getState) => {
  dispatchTermsCondition(history, dispatch)
    .then(() =>
      dispatchSetPrivacy(history, dispatch)
    )
    .then((response) =>
      dispatcherUserTermsPrivacy(history, dispatch, getState, response.data.tj_id)
    );
};

Note not exactly sure if history is coming from a module or from params but you get the idea!

Promise chain cannot accept my parameters

1 Answers1