CODEWITHSUNDEEP
reactjsreduxreact-reduxes6-promise
Kailaash Balachandran
Kailaash Balachandran

Reputation: 419

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

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?

Upvotes: 3

Views: 3635

Answers (1)

Kailaash Balachandran
Kailaash Balachandran

Reputation: 419

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

Upvotes: 2

Related Questions