9

I have an asynchronous function in my redux actions and it returns an object like this in my reducer:

{
user: {},
fetching: false,
fetched, false,
error: null
}

So basically when I start calling the asynchronous function I update the redux state to fetching: true and if the result is successfully fulfilled then fetched:true and fetching:false
So I map the redux state to props using connect in react-redux and I added this in my component's render function:

if(this.props.fetched) {
  // Go to next page
}

And it automatically goes to the next page once the data is fetched.
However, I have a problem with my error handling. When error changes from null to error then how do I handle the error handling on my react component. What I have right now is:

if(this.props.error != null) {
   // popup error
}

But now I end up in a situation that next time I call my action it already has this.props.error assigned to an error and its not null which results it displaying the popup even if there is no error.
Do I have to reset my error everytime it is displayed or is there any better practice of doing this whole thing?

abeikverdi
  • 1,216
  • 3
  • 13
  • 25

2 Answers2

10

You can use the redux-catch middleware to capture the errors for Redux reducers and middlewares.

You can use something like,

import reduxCatch from 'redux-catch';

function errorHandler(error, getState, lastAction, dispatch) {
    //dispatch ERROR action as you need.
}

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

And, display your Error Popup when you receive the ERROR action which is triggered from the redux-catch middleware. When you close the popup, dispatch an action which resets the error to null so that popup would not be displayed if there are no errors to display.

Thaadikkaaran
  • 5,088
  • 7
  • 37
  • 59
  • This seems to be useful for a case where I wanna do crash reporting. My intention is to display a modal based on the error. Like lets say login failed. – abeikverdi Nov 28 '16 at 06:37
  • @abeikverdi Yes, you can dispatch the action with payload as the error! Like, it's right there! – ArchNoob Nov 28 '16 at 06:42
  • I see. So I can create a view according to my payload and display that to the user? – abeikverdi Nov 28 '16 at 06:43
  • I messed that comment sorry, but yes you could create a view normal error view you need and containers according to your payload yes.. @abeikverdi – ArchNoob Nov 28 '16 at 06:50
  • Thanks. It seems like a pretty useful library. – abeikverdi Nov 28 '16 at 07:01
  • How does catching an error help? I see nothing in the question that indicates there was a problem catching an error. It seems to me the problem is how to display it and move on beyond it. Also, since the action is async, it's not possible at all to even catch the API error with this. – DDS Nov 28 '16 at 13:04
1

I had a similar problem when I had a modal continue to display old errors after I closed the modal. I solved it by dispatching a "resetErrors" action after I received a success through my callback.

I have not come across a better solution other than "reseting" it every time.

Marc Moy
  • 166
  • 4
  • Yea thats what I also thought. But now I have to make so many reset actions for different reducers and add them to my view only for this purpose. So I thought maybe there is a better way of doing the whole thing. – abeikverdi Nov 28 '16 at 06:05
  • 1
    A single action can change as many fields as you want it to. The action that sets `fetching` or `fetched` can also reset the error. That said, maybe it's best to reset it when the modal is closed. Note that in React-Redux, a modal is normally visible if and only if the state says it should be. The trigger could be the error in the state. This means that resetting the error is the same thing as closing the modal. Also the next page switch should be part of the action with the page in Redux. – DDS Nov 28 '16 at 13:01