How do I chain actions with Redux Promise Middleware?

Question

I am quite new to React and Redux. I want to chain multiple API calls using redux-promise-middleware and implemented my actions as follows:

locationActions.js:

import { visitLocation } from '../services/actionService';

export const VISIT_LOCATION = 'VISIT_LOCATION';
export const VISIT_LOCATION_PENDING = 'VISIT_LOCATION_PENDING';
export const VISIT_LOCATION_FULFILLED = 'VISIT_LOCATION_FULFILLED';
export const VISIT_LOCATION_REJECTED = 'VISIT_LOCATION_REJECTED';

const visitLocationAction = (characterId, location) => ({
    type: VISIT_LOCATION,
    // visitLocation returns a new promise
    payload: visitLocation(characterId, location)
});

export { visitLocationAction as visitLocation };

I dispatch this action from my React component using mapDispatchToProps:

const mapDispatchToProps = dispatch => (
    bindActionCreators({ visitLocation }, dispatch)
);

This works! However, I want to dispatch another action after visitLocation is settled and fulfilled. I can not call Promise.then() because it doesn't provide the dispatch method, therefore not "binding" my action to the reducer.

Tutorials mention I should call dispatch(secondAction()) but I do not have dispatch available in my action creators.

Can someone point out to me what am I missing?

Edit:

As suggested in the first answer, I tried the following approach:

import { visitLocation } from '../services/locationService';
import { fetchSomething } from '../services/otherService';

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))
            .then(() => dispatch(fetchSomething()));
    };
};

export { visitLocationAction as visitLocation };

But I got action:undefined and the following error:

Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (redux.js:200)
    at redux-logger.js:1

score 3 · Accepted Answer · edited Mar 15 '19 at 06:26

Tutorials mention I should call dispatch(secondAction()) but I do not have dispatch available in my action creators.

Let me answer this part of your question first. As mentioned in the first answer, you need Redux Thunk, a middleware, to use dispatch in your action creators.

By default, Redux action creators return plain objects like this:

const returnsAnObject = () => ({
  type: 'MY_ACTION'
  payload: ...,
  meta: ....
})

With Redux Thunk, action creators can essentially return functions. A function that returns a function is called a "thunk", hence the name of Redux Thunk.

const returnsAFunction = (dispatch) => dispatch({
  type: 'MY_ACTION'
  payload: ...,
  meta: ....
})

In the specific case of Redux Thunk, you return the dispatch function. Redux Thunk enables you to return dispatch by providing it as a parameter to your action creators.

But I got action:undefined

Let's unpack this. We know--thanks to Redux Thunk--you can chain multiple actions together using dispatch. However, as you mentioned in your edited question, you still get the "plain object" error.

Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (redux.js:200)
    at redux-logger.js:1

This is because you called dispatch with a Promise object, not a plain object.

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))

            // Yes, it is correct to call dispatch here
            // However, `dispatch` accepts plain objects, not Promise objects
            .then(() => dispatch(fetchSomething()));
    };
};

To fix this problem, simply modify your second dispatch to use a plain object:

const visitLocationAction = (characterId, location) => {
    return (dispatch) => {
        return dispatch(visitLocation(characterId, location))
            .then(() => dispatch({
                type: 'VISIT_LOCATION_SECOND_TIME'
                payload: fetchSomething()
            }));
    };
};

Pavlo Kozlov · Answer 2 · 2018-08-24T05:06:42.123

1

As mentioned in the documentation for redux-promise-middleware, The middleware can be combined with Redux Thunk to chain action creators.

So you can write your action like:

const secondAction = (data) => ({
  type: 'SECOND',
  payload: {...},
})

const thirdAction = (data) => ({
  type: 'THIRD',
  payload: {...},
})

const firstAction = () => {
  return (dispatch) => {
    return visitLocation(characterId, location)
      .then((data) => dispatch(secondAction(data)))
      .then((data) => dispatch(thirdAction(data)))
  }
}

or use async/await

const secondAction = (data) => ({
      type: 'SECOND',
      payload: {...},
    })

    const thirdAction = (data) => ({
      type: 'THIRD',
      payload: {...},
    })

    const firstAction = async () => {
      return (dispatch) => {
        const data = await visitLocation(characterId, location));
        dispatch(secondAction(data))
        dispatch(thirdAction(data))
      }
    }

and then use it as you mentioned:

const mapDispatchToProps = dispatch => (
  bindActionCreators({ firstAction }, dispatch)
);

edited Aug 24 '18 at 05:06

answered Aug 23 '18 at 15:05

Pavlo Kozlov

966
1
9
22

HI, thanks for the answer. I am not sure how to pass the action type though. See my edited question. – Smajl Aug 23 '18 at 15:16
Have you added redux-thunk? – Pavlo Kozlov Aug 23 '18 at 15:22
Yes, it is included in my store.js configuration: `applyMiddleware(thunk, promiseMiddleware(), logger)` – Smajl Aug 23 '18 at 15:24
Try to remove `promiseMiddleware` from `applyMiddleware`. – Pavlo Kozlov Aug 23 '18 at 15:26
But I am using this middleware for all my other fetch actions! Wihtout it, all my reducers will stop working... – Smajl Aug 23 '18 at 15:44
Redux-thunk should cover your needs. You can use for non-async actions as well. – Pavlo Kozlov Aug 23 '18 at 15:57
I do believe that. Could you give me an example how to modify my action to do that? Your example is not working. – Smajl Aug 23 '18 at 20:25
I've edited my answer. `visitLocation` method doesn't require to be dispatched, so you need to replace dispatch(visitLocation(characterId, location)) with visitLocation(characterId, location). – Pavlo Kozlov Aug 24 '18 at 05:08
Thank you, this works and both requests are executed. My reducers register the second dispatched request but `VISIT_LOCATIONS_FULFILLED` is never registered by my reducers in this scenario... – Smajl Aug 24 '18 at 12:36

How do I chain actions with Redux Promise Middleware?

2 Answers2