在前端开发中，我们经常需要管理应用的全局状态。全局状态可以是用户信息、主题、语言等等，这些状态需要在应用的不同组件之间共享。而随着应用的复杂度增加，全局状态的管理也变得越来越困难。这时候，Redux 就成为了一个很好的全局状态管理工具。
Redux 是什么？
Redux 是一个 JavaScript 应用的状态容器，它可以管理全局状态并提供可预测的状态变化。Redux 的核心概念是 store、action 和 reducer。
- store：存储应用的状态，提供了 getState()、dispatch(action) 和 subscribe(listener) 这三个方法。
- action：用来描述发生的事件，是一个普通对象，必须包含一个 type 属性。
- reducer：用来处理 action，返回一个新的 state。
Redux 的工作流程如下图所示：
当用户与应用交互时，会触发 action，然后 reducer 根据 action 的 type 属性来更新 store 中的状态。组件可以从 store 中获取状态来渲染界面，并通过 dispatch() 方法来触发新的 action。
为什么使用 Redux？
使用 Redux 可以带来以下好处：
1. 可预测的状态变化
Redux 的状态变化是通过 reducer 来控制的，因此状态变化是可预测的。这使得我们可以更好地理解应用的状态变化以及调试状态相关的问题。
2. 统一的状态管理
Redux 提供了一个全局的状态容器，可以让我们更好地管理全局状态。这使得应用的不同组件之间可以共享状态，而不需要通过 props 层层传递。
3. 方便的状态扩展
当应用需要添加新的状态时，只需要在 reducer 中添加相应的处理逻辑即可。这使得我们可以很方便地扩展应用的状态，而不需要修改已有的代码。
4. 方便的状态回溯
Redux 提供了一个 DevTools 工具，可以记录应用的状态变化，以及每个 action 对应的状态变化。这使得我们可以很方便地回溯应用的状态，找到问题的根源。
如何使用 Redux？
使用 Redux 需要遵循以下步骤：
1. 安装 Redux
可以通过 npm 或者 yarn 来安装 Redux：
--- ------- -----
或者
---- --- -----
2. 创建 store
使用 createStore() 方法来创建 store：
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------上述代码中，我们创建了一个名为 count 的状态，并定义了两个 action：INCREMENT 和 DECREMENT。当接收到 INCREMENT action 时，状态中的 count 会加 1；当接收到 DECREMENT action 时，状态中的 count 会减 1。
3. 定义 action
定义 action 的格式如下：
----- ------ - - ----- ------------ --
4. 触发 action
使用 dispatch() 方法来触发 action：
-----------------------
5. 获取状态
可以使用 getState() 方法来获取状态：
----- ----- - ----------------- ------------------------- -- -
6. 订阅状态变化
可以使用 subscribe() 方法来订阅状态变化：
------------------ -- - ----- ----- - ----------------- ------------------------- ---
当状态发生变化时，subscribe() 方法就会被触发。
示例代码
下面是一个使用 Redux 来管理全局状态的示例代码：
------ - ----------- - ---- --------
----- ------------ - -
------ --------
--------- -----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ -
---------
------ ----------- --- ------- - ------ - --------
--
---- ---------------
------ -
---------
--------- ----------------
--
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----- -
----- - ------ -------- - - -----------------
-------- ------------- -
---------------- ----- -------------- ---
-
-------- --------------------- -
---------------- ----- --------------- -------- ---
-
------ -
---- --------------- -----------
------------- --- ---- - ------- - ----------
------- ---------------------------- --------------
------- ----------- -- -----------------------------------
------- ----------- -- ------------------------------
------
--
-
------ ------- ----上述代码中，我们使用 Redux 来管理应用的主题和语言。当用户点击 Toggle Theme 按钮时，会触发 TOGGLE_THEME action，从而切换应用的主题。当用户点击 English 或者 中文按钮时，会触发 SET_LANGUAGE action，从而设置应用的语言。
总结
Redux 是一个很好的全局状态管理工具，它可以带来可预测的状态变化、统一的状态管理、方便的状态扩展和方便的状态回溯等好处。使用 Redux 需要遵循创建 store、定义 action、触发 action、获取状态和订阅状态变化等步骤。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f175412b3ccec22fa26ec8