chaining redux-actions and redux-promise-middleware

Question

I use redux-actions and redux-promise-middleware to dispatch actions, along with TypeScript 2.1 for async await support.

This is an action using both redux-actions and redux-promise-middleware

// create an async action
const fooAction = createAction('FOO', async () => {
  const { response } = await asyncFoo();
  return response;
});

// use async action
fooAction('123')

And this is an example of action chaining, using only redux-promise-middleware

const foo = () => dispatch => {
  return dispatch({
    type: 'TYPE',
    payload: new Promise()
  })
  .then(() => dispatch(bar()));
}

How chaining in redux-promise-middleware can be used together with redux-actions?

Answer 1

You have to keep in mind that even if async await looks synchronous, it uses Promises under the hood, and an async function will always return a Promise, no matter if you use await or not.

Since the second parameter of createAction is your payload creator, nothing can stop you from using the resulting object.

Here is an example based on your initial code:

const fakeCall = () => new Promise(resolve => {
  setTimeout(() => resolve({ response: 'ok' }), 1E3)
})

const fooAction = createAction('FOO', async () => {
  const { response } = await fakeCall()
  return response
})

const foo = () => dispatch =>
  dispatch(fooAction())
    .then(() => dispatch(bar()))

// or

const foo = () => async dispatch => {
  await dispatch(fooAction())
  dispatch(bar())
}

Answer 2

The problem with Aperçu answer is that "await" is you are Blocking the event loop and you have to handle the Promises directly.

There is an alternative to "redux-promise-middleware", redux-auto have the same API as redux-promise-middleware but also come with a mechanism to chaining reducers calls.

Your example would look something like:

// UI code
actions.data.foo()

// store/data/foo.js
export function fulfillment(data,payload){
   return data
} fulfillment.chain = actions.x.bar

export function action(payload){
    return Promise.resolve()
}

Really, thats it. You only need to assign the action to a chain property and redux-auto will call it at the right point in the redux life-cycle

To understand the above source. redux-auto automatically create actions and wires them to reduces based on the file structure. Where the folder name becomes the name of the property on the state. The files within a folder are actions to be performed on that part of the state.

Here is the documentation chaining action together