在 React 开发中，Redux 可以帮助我们处理全局状态，方便多个组件之间的状态共享和管理。当项目比较大或者多个组件之间的状态需要共享时，推崇控制 Redux 状态可以让代码更加清晰和易于维护。
Redux 状态的控制方式
控制 Redux 状态有两种方式，一种是通过 UI 组件，另一种是通过 Redux 中间件。
通过 UI 组件控制状态
通过 UI 组件控制 Redux 状态，需要在组件内部实现 dispatch。例如，我们有一个登录界面组件 Login，点击登录按钮需要修改登录状态为已登录。那么我们可以在组件内部使用 mapDispatchToProps 映射需要的 action，然后在按钮点击事件中 dispatch 这个 action。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ------------ - ---- ---------------
----- ----- - -- ------------ -- -- -
----- ----------- - -- -- -
-- ------------ ------------ ------ ----------
--------------
-
------ -
-----
------- ---------------------------------
------
-
-
----- ------------------ - -
------------
-
------ ------- ------------- --------------------------通过 Redux 中间件控制状态
对于一些场景，如需要进行异步操作时，我们需要通过 Redux 中间件控制状态。例如，在发送请求时，修改全局 loading 状态为 true，请求完成后再将其设置为 false。我们可以通过 Redux 中间件来实现这个功能。
-- -------------------- ---- -------
-- ---------- ------- --- ----
----- ----------------- - ----- -- ---- -- ------ -- -
-- ------------------------------ -
---------------- ----- -------------- -------- ---- --
-
------------
-
-- ---------- ------- --- -----
----- ---------------- - ----- -- ---- -- ------ -- -
-- ----------------------------- -- ---------------------------- -
---------------- ----- -------------- -------- ----- --
-
------------
-
----- ----- - -------------------- ---------------------------------- ------------------常用状态控制方式总结
- 对于简单的状态，可以在 UI 组件中直接通过 dispatch 修改。
- 对于需要进行异步操作的状态，可以通过 Redux 中间件来控制状态。
- 控制状态时，需遵循“统一管理”的原则，将所有需要控制的状态都存储在 Redux 的 state 中。
总结
在 React 项目中，推崇控制 Redux 状态可以让代码更加清晰和易于维护。常见的控制方式有通过 UI 组件和 Redux 中间件来控制状态。控制状态时，我们需要将所有需要控制的状态都存储在 Redux 的 state 中，实现“统一管理”。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a95d1968c7c53b0648651