Common Error Handling in React Redux Application

Question

My application makes multiple api calls at a time from different actions. Suppose 4/12 actions give error response, Store needs to get update with all error messages(An array of 4 error messages). Finally I need to display all 4 errors popups at header. I heard of redux catch. Can anyone explain with sample code.

Does this answer your question? [Best practice to handle errors in Redux and React](https://stackoverflow.com/questions/40837846/best-practice-to-handle-errors-in-redux-and-react) — Michael Freidgeim, May 14 '21 at 21:54

score 2 · Answer 1 · answered Nov 05 '17 at 09:44

If you are using middleware,

import { createStore, applyMiddleware } from 'redux';

import reduxCatch from 'redux-catch';

import reducer from './reducer';

function errorHandler(error, getState, lastAction, dispatch) {
  console.error(error);
  console.debug('current state', getState());
  console.debug('last action was', lastAction);
  // optionally dispatch an action due to the error using the dispatch parameter
}

const store = createStore(reducer, applyMiddleware(
  reduxCatch(errorHandler)
));

See detailed doc on Redux-catch.

Also, check these questions:

redux-promise with Axios, and how do deal with errors?

Best practice to handle errors in Redux and React

Common Error Handling in React Redux Application

1 Answers1