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

Question

我有一个支持表单，可以在提交后从 API 发送成功消息。在表单组件 class 中，我得到了从 reducer 获取值的 mapStateToProps()。

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

这种方法的问题是状态根本没有被清除。因此，每当用户转到支持表单页面时，此警报都会出现，因为状态仍然存在。

我看过这个关于执行操作后清除状态的内容，但这会清空状态并且根本不会显示警报。

那么如何只通知用户一次？

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

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