在开发 React + Redux 应用时，我们通常需要处理一些长时间运行的进程，比如异步请求、轮询操作等。这些进程需要存储在何处成为一个重要问题，因为它们需要在组件卸载和挂载之间继续执行。
存储位置
有两个主要的选项可以存储长时间运行的进程：组件内部状态和 Redux store 状态。下面我们将分别讨论它们的优缺点。
组件内部状态
在组件内部状态中存储长时间运行的进程是一种简单而直接的方法。您可以使用 useState 钩子或在类组件中使用 this.state 来存储状态，并在 componentDidMount 和 componentWillUnmount 生命周期方法中开始和停止进程。
让我们来看一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------------------ -
----- ------ -------- - ---------------
------------ -- -
----- -------- - -------------- -- -
------------------------- -- -----------------
-- ------
------ -- -- ------------------------
-- ----
------ ------------------
-
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
----------- ----------------------
-- -----
---
-在上面的示例中，我们在 PollingComponent 中定义了 data 和一个定时器，该定时器每秒钟调用一次 fetchData 函数并将结果存储在 data 中。我们使用 useEffect 钩子来启动和停止定时器。
这种方法的优点是非常简单直接，易于理解和实现。然而，它可能会导致状态管理变得混乱，尤其是当多个组件需要访问相同的进程时。
Redux store 状态
另一种存储长时间运行的进程的方法是将它们存储在 Redux store 中。这种方法可以使状态管理更加规范化和集中化，因为您可以在多个组件之间共享数据并将其存储在一个地方。
下面是一个示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------------- - ---- ------------
-------- ------------------ ----- --------- -- -
------------ -- -
----- -------- - ---------------------- ------
------ -- -- ------------------------
-- -------------
------ ------------------
-
----- --------------- - ------- -- -- ----- ---------- ---
----- ------------------ - - ---------- --------------- --
------ ------- ------------------------ --------------------------------------在上面的示例中，我们使用了 Redux，将数据存储在 Redux store 中，并使用 connect 函数将 PollingComponent 组件连接到 store。我们还定义了 fetchDataAction，该函数负责发出异步请求并将结果存储在 Redux store 中。
这种方法的优点是更好的状态管理和共享，以及对组件之间依赖关系的更好控制。但是，它需要一些额外的代码来配置 Redux，并且可能会增加代码复杂度。
结论
在 React + Redux 应用中存储长时间运行的进程的位置取决于您的具体需求和偏好。如果您需要更好的状态管理和共享，则可以将其存储在 Redux store 中。否则，将其存储在组件内部状态中也是一个不错的选择。
无论您选择哪种方法，请确保在组件卸载时停止进程以避免潜在的内存泄漏问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31397