Chain abbreviations-actions and abbreviation-promise-middleware

Question

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

This action, using both redux-actions, andredux-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 a chain of actions using only redux-promise-middleware

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

How can chaining redux-promise-middlewarebe used with redux-actions?

Answer 1

You must remember that even if async awaitit looks synchronous, it uses Promises under the hood, and the function asyncalways returns Promise, regardless of whether you use it awaitor not.

createAction , .

, :

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

Aperçu , "" - , Promises.

"redux-prom-middleware", redux-auto API redux-prom, .

:

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

, . , redux-auto redux

. redux-auto . . - , .