I have a support form that delivers success message from an API after submit. In the form component class, I got mapStateToProps() that gets value from the reducer.
function mapStateToProps(state) {
return { contact_form: state.contact_form.all}
}
and to show the notification to user, I do
if(this.props.contact_form.data) {
notify_banner(" Your request is submitted successfully.","success",5000);
}
The problem with this approach is that the state is not cleared at all. So whenever the user goes to the support form page, this alert appears as the state still holds.
I had a look at this thread on clearing state after an action is performed, but this would empty the state and the alert woon't be displayed at all.
So how do I notify user just once?
One way is to dispatch success action after user submits the form. Here, I take flag = true which means form is submitted. So you can have this check to show banner notification.
if(this.props.contact_form.flag) {
notify_banner("Success");
//disptach reset action here
}
after notification, instantly reset the contact_form.flag to false by dipatching resetState action.
export function resetState() {
const request = {
flag: false
};
return {
type: CONTACT_FORM,
payload: request
};
}