Using redux-actions with redux-promises

Learn how to use redux-actions with redux-promises.

Redux-actions can be used in conjunction with redux-promise to further simplify the code.

The redux-promise library can automatically dispatch FSA-compliant actions and set the error and payload fields for us. It adds the ability to dispatch a promise (not just an object or function) and knows how to automatically handle the resolve and reject functionality of promises:

const addRecipe = createAction(ADD_RECIPE);

export function addRecipe Async(details) {
  return () => addRecipe(
    axios.post('/recipes', {
      data: JSON.stringify(details)
    })
  );
}

Here, we pass a promise to addRecipe() that will create the appropriate FSA-compliant action depending on whether the promise is resolved or rejected.

Note: This line doesn’t return data and instead modifies the promise that we return from the action creator and that the caller will send to dispatch().

Get hands-on with 1200+ tech skills courses.