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

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

})