How do I hide error(s) after a few seconds? MERN stack - node.js

Question

I wonder how to hide errors after a few seconds. For example, I have an API that must be passed a username, description, image, etc. All fields are required and if one field is missing I print the error 'All fields are required'. NodeJS takes care of that for me. It all works great, but I would like to hide that error in React after a few moments, and if I go to another page and go back to that page where the error was printed, it still stands. In React I use Redux, and for example my one action looks like this:
export const login = (email, password) => async dispatch => {
try {
dispatch({ type: USER_LOGIN_REQUEST });
const config = {
headers: {
'Content-Type': 'application/json',
},
};
const { data } = await axios.post(
'/api/v1/user/login',
{ email, password },
config
);
dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
localStorage.setItem('userInfo', JSON.stringify(data));
} catch (error) {
console.log(error.response.data.msg);
dispatch({
type: USER_LOGIN_FAIL,
payload: { msg: error.response.data.msg },
});
}
};
This is some of the most common logs of users and in
dispatch({
type: USER_LOGIN_FAIL,
payload: { msg: error.response.data.msg },
});
Prikazujem gresku koja mi se nalazi u error.response.data.msg .
This is my Reducer for that Action:
export const userReducer = (state = {}, action) => {
switch (action.type) {
case USER_LOGIN_REQUEST:
return { ...state, loading: true };
case USER_LOGIN_SUCCESS:
return { ...state, loading: false, userInfo: action.payload };
case USER_LOGIN_FAIL:
return { ...state, loading: false, error: action.payload.msg };
case USER_LOGOUT:
return {};
default:
return state;
}
};
Reducer returns the error I print on the page.
It may be a bit of an extensive question, but I hope someone will help me. :)

Answer 1

If you want error to be disappeared after you left the screen, you can try to reset error variable in your state,
// When user leaves screen dispatch action with type of 'RESET_ERROR'
dispatch({
type: RESET_ERROR,
});
// Your reducer
export const userReducer = (state = {}, action) => {
switch (action.type) {
...
case RESET_ERROR:
return {...state, error: undefined}; // or null, whatever is your initialState is
default:
return state;
}
};
However, at first I would suggest (assuming you are not applying) to validate in client first. If it the UI contains any kind of form, go for formik or react-hook-form, otherwise do the client-side validation manually, then rely on your nodeJS server validation in the end.
If you really want to display error from the solely redux state, then you could reset error in redux state whenever user starts the action from scratch or leaves the screen or any other conditions you desire.