Introduction

Last updated 5 years ago

Introduction

Redux Promise Middleware enables simple, yet robust handling of async action creators in Redux.

const asyncAction = () => ({
  type: 'PROMISE',
  payload: new Promise(...),
})

Given a single action with an async payload, the middleware transforms the action to a separate pending action and a separate fulfilled/rejected action, representing the states of the async action.

The middleware can be combined with Redux Thunk to chain action creators.

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

const firstAction = () => {
  return (dispatch) => {
    const response = dispatch({
      type: 'FIRST',
      payload: new Promise(...),
    })

    response.then((data) => {
      dispatch(secondAction(data))
    })
  }
}