如何根据状态处理React-Redux中的通知？

Question

我有一个支持表单，在提交后从API提供成功消息。在表单组件类中，我得到了mapStateToProps（），它从reducer中获取值。

function mapStateToProps(state) {
  return { contact_form: state.contact_form.all}
} 

并向用户显示通知，我

   if(this.props.contact_form.data) {
        notify_banner(" Your request is submitted successfully.","success",5000);
      }

这种方法的问题在于根本没有清除状态。因此，每当用户转到支持表单页面时，此警报将显示为状态仍然存在。

我在执行某个操作后查看了此thread清除状态，但这会清空状态，警报根本不会显示。

那么如何通知用户一次？

Answer 1

一种方法是在用户提交表单后调度成功操作。在这里，我采用flag = true表示提交表单。因此，您可以使用此检查来显示横幅通知。

if(this.props.contact_form.flag) {
  notify_banner("Success");
  //disptach reset action here
}

通知后，通过dipatching resetState动作立即将contact_form.flag重置为false。

export function resetState() {
   const request = {
     flag: false
     };

    return {
      type: CONTACT_FORM,
      payload: request
    };
}