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?