从 Redux 商店收到错误消息道具后如何仅显示一次 Toast答案

【问题标题】：How to show Toast only once after received error message prop from Redux store从 Redux 商店收到错误消息道具后如何仅显示一次 Toast
【发布时间】：2019-09-12 19:15:33
【问题描述】：

我有工作React-Native + Redux注册流程：

填充输入
在组件中验证它们 (Formik)
调用操作存储registerUser(formData)
等待saga 对API 进行异步调用
在API 错误调用reducer REGISTER_ERROR 上，将存储变量formError 设置为某些消息。

我的组件具有映射到 props 的状态（此错误消息与 props 挂钩）。

我正在做componentDidUpdate()，当来自商店的错误道具被更改时，我触发ToastAndroid.show(errorMessage)。

但是我的Toast被调用了多次，因为componentDidUpdate也被调用了多次（Redux更新组件多次）。

我知道快速解决方法，例如创建本地状态 visible，当此状态变量为 true 时，不会显示其他 Toast。

有没有更好更常见的方法来做到这一点？在我看来，依靠 Toast 的 onClose 事件将状态变量设置为 false 是很奇怪的。

【问题讨论】：

相反，为什么不能在 API 调用本身之后触发 toast 而不是在该组件中执行它？
@Shivaraj 那不是反模式吗？（如果你的意思是在 saga 中调用它）
如果我们能看到你的代码就太好了

标签： javascript reactjs redux

【解决方案1】：

如第一个答案中所述，最好查看实际代码，但您应该做的只是在道具发生这样的变化时显示 toast 消息（假设它是布尔值）

componentDidUpdate(prevProps) {
  if(prevProps.showToast === false && this.props.showToast === true){
    showToast();
  }
}

【讨论】：

我认为这是个好方法。我将更改它以检查实际的错误消息是否已更改，并根据此情况再次显示 toast。谢谢

【解决方案2】：

没有代码，尝试提出解决方案有点困难，但我想我大致了解您想要做什么。

如果我是你，我会让展示组件（在此上下文中为 toast UI）只对商店道具/可观察对象做出反应，而不是直接在生命周期方法中调用 ToastAndroid.show() 方法。

在架构模式方面，我发现这种模式适用于 React 应用程序。希望这可以帮助。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

【讨论】：