Use with Redux Promise Actions

To use this middleware with redux-promise-middleware-actions, invoke createAsyncAction and return a promise from the payload creator.
import { createAsyncAction } from 'redux-promise-middleware-actions';
​
// Create an async action
const fooAction = createAsyncAction('FOO', async (url) => {
  const response = await fetch(url);
  return response.json();
});
​
// Use async action
dispatch(fooAction('https://some.url'));
This would dispatch FOO_PENDING and FOO_FULFILLED with the data as the payload. fooAction has a reference to these action creators on the object itself, e.g. fooAction.pending(). You can listen for these in the reducer like this:
const reducer = (state, action) => {
  switch (action.type) {
    case String(fooAction.pending):
      return {
        ...state,
        pending: true,
      };
    case String(fooAction.fulfilled):
      return {
        ...state,
        data: action.payload,
        error: undefined,
        pending: false,
      };
    case String(fooAction.rejected):
      return {
        ...state,
        error: action.payload,
        pending: false,
      };
    default:
      return state;
  }
};

Guides - Previous

Use with Redux Actions

Next - Guides

Use with Promises Resolved with Null Values

Last updated 3 years ago