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?

Shubham Khatri · Accepted Answer · 2017-09-23 05:22:45Z

3

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

})

answered Sep 23, 2017 at 5:22

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ThinkGeek Over a year ago

So is it like there should not be any then catch and instead always try to use the approach above, because in most of the cases after successful response from an API call, we will endup setting something in state via dispatch which will in turn render UI. Also for the cases which dont disptach inside then, is this solution feasible?

Shubham Khatri Over a year ago

It sure is, but should definitely be preferred when you update the UI form the .then() callback

ThinkGeek Over a year ago

and how can I code a case where I have an API call and on its success only I want to call another API call and on its success another API call, based on the solution mentioned above? I would like to handle errrors on each calls.

Shubham Khatri Over a year ago

I am not sure about this case

Collectives™ on Stack Overflow

Handling async errors in react redux application

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related