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())
}