Handle errors in react native and redux - react-native

Question

I have a react native application using redux for state management.
On every API request, I have actions dispatched which is handled by reducer. This is then forwarded to saga and back to reducer.
I am using snackbar to show any errors which might have happened.
e.g. In the login flow, one of the operations is to fetch the OTP for username.
The action types are:
GET_OTP_FOR_USER_REQUEST
GET_OTP_FOR_USER_SUCCESS
GET_OTP_FOR_USER_FAILURE
The initial state for the reducer (LoginReducer) is
{
hasError: false,
error : {
display_message : "",
details : null
}
otherData : []
}
Now in case of GET_OTP_FOR_USER_FAILURE, the reducer will be updated to
{
hasError: true,
error : {
display_message : "Invalid Username",
details : null
}
otherData : []
}
In my view component, I conditionally render the snackbar based on the hasError flag
{this.props.hasError ? Snackbar.show({
title: this.props.error.display_message,
duration: Snackbar.LENGTH_LONG
}) : null}
If I don't reset the hasError, then the snackbar keeps coming for every setState call (which happens on textinputchange).
The current approach I am using is, I have an action to RESET_ERROR.
I call this action once the setState is called on the textbox on the component (in this case the username)
onUserNameTextChanged = (text) => {
this.props.resetError(); //Reset the error
this.setState({ //something });
}
The issue with this is that this.props.resetError(); will get called on every character update.
Just to ensure that I don't call render multiple time, I am using shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState){
if(this.props.hasError && (this.props.hasError === nextProps.hasError))
return false;
else
return true;
}
I am not sure if there is simpler or cleaner approach to handle these scenarios. Any directions will be helpful.

Answer 1

You can just conditionally call it if there's an error, that way you're not always invoking it:
onUserNameTextChanged = (text) => {
if (this.props.hasError) {
this.props.resetError(); //Reset the error
}
this.setState({ //something });
}
You can also tie it into the success action if you want that error to show until the API returns successfully.