Handling async errors in react redux application

Question

Sometime back Dan tweeted

"I cringe when I see

`.then(() => dispatch(...)).catch(...)` 

in React projects. If a component throws during dispatch, you’ll get into catch."

And says the solution is so simple. Just don’t chain catch() after then() that renders UI. Instead pass error handler as second arg to then().

Can someone explain why this is the case.

In my case I am making an ajax call, so I assume I will get inside then for anything that is 200 as a server response and inside catch for anything that is not 200, i.e. error from server. Am I missing something here?

Answer 1

So what Dan means is that in a Async request, you would expect the success call to result in .then() being called, and since you are dispatching an action in .then() which in turn will update the redux store and thus the UI, so if there is any error in the UI update process, .catch() will also be called and whereas you would expect it to only be called when the server returns an error

the solution is to handle it like

.then(
function (){
    //handle success
    dispatch({...})
},
function () {
    //handle reject() and Error for Async request

})