How to handle notifications in React-Redux depending on state?

Question

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?

You could dispatch a RESET action on `componentWillMount` or `componentWillUnmount`. — Or B, Jan 02 '17 at 15:31
You can add a flag to your state, which will tell you if its been already "told" (the message) and depends on that, show it or not ;) — MariuszJasinski, Jan 02 '17 at 15:33
adding flags would work if the user is allowed to submit form just once. What if the user wants to submit more than once? then this flag would create complications. — Kailaash Balachandran, Jan 02 '17 at 15:36
if you using redux, use the state to trigger the notification component. it will scale no matter how many notification you want. ot you can user toaster redux npm for notification, — Khalid Azam, Jan 03 '17 at 07:01

Kailaash Balachandran · Accepted Answer · 2017-01-26T17:56:37.890

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
    };
}

How to handle notifications in React-Redux depending on state?

1 Answers1