使用 Redux 让 React 组件执行一次性操作？

Posted 2023-02-22

【中文标题】使用 Redux 让 React 组件执行一次性操作？

【英文标题】：Using Redux to make a React component perform a one-time action?

【发布时间】：2018-08-24 20:24:21

【问题描述】：

在 React 组件中，我想向 Redux reducer 触发一个操作，该操作在按下按钮时执行 API 调用。

成功执行此 API 调用后，我希望我的 reducer 将调用已成功执行的组件分派给我的组件。

我的组件将接收这个分派作为一个道具（例如this.props.successfullyUpdated）并将呈现一个窗口警报。

例如在我的渲染函数中，

render() 
   if (this.props.successfullyUpdated) 
   return renderSuccessAlert();
   

我面临的问题是，我希望在每次 API 执行后只显示一次此警报。所以在调用警报之后，我不希望它再次被调用，直到 Redux 调度另一个 successfullyUpdated 道具。

现在，一旦 successfullyUpdated 是 props 的一部分，即使它只通过 Redux 发送一次，警报也会持续呈现。如何阻止这种情况发生，并且仅按需呈现警报？

【问题讨论】：

你有没有将succesfullyUpdated设置回false？

【参考方案1】：

您似乎缺少将successfullyUpdated 设置回false 的函数。

一旦我们进入if 语句并且successfullyUpdated 评估为true，您需要将其设置为false。

render() 
   if (this.props.successfullyUpdated) 
       this.props.setUpdatedFalse();
       return renderSuccessAlert();
   

【讨论】：

setUpdatedFalse 会做什么？道具应该被视为不可变的。

@BeardMagician setUpdatedFalse 是父组件中的一个函数，它将在父组件中将成功更新的状态设置为 false，除非按下按钮，否则将停止重复警报。