什么是 Redux？
Redux 是一个 JavaScript 状态容器，它可以管理整个应用的状态并保证这些状态随时可检索和修改。Redux 是基于 Flux 架构设计的，但是比 Flux 更简单、更具可预测性，同时便于开发者调试。
在 Redux 的设计中，状态存储在一个单一的对象中，称之为 state 或者 state tree。Redux 的整个生命周期中，操作 state tree 的唯一方式是触发一个 action。action 是一个纯 JavaScript 对象，它必须定义一个 type 属性，同时可以传递任意其他属性。通过定义 action，开发者告诉 Redux 如何修改 state tree。当一个 action 被分发到 Redux 中，Redux 会调用 reducer 来更新 state tree，reducer 是一个纯函数，只接收前一个 state 和 action，并返回新的 state。通过这种方式，Redux 保证了整个应用的 state 是可预测的，任何操作不会直接修改 state，而是通过一个约定的方式更新。
为什么要使用 Redux？
Redux 的设计思想主要在于解决应用的状态管理问题。在传统的 jQuery 时代中，开发者在修改应用状态时往往会对 DOM 进行直接操作，这样会极大地增加代码的复杂性，降低代码的可维护性。在 React 时代，React 将应用中组件的状态抽离到组件之外，在 state 和 props 的约束下，开发者可以将组件的状态变得可预测和易于管理。但是当应用变得复杂时，组件之间的状态交互也会变得复杂。与此同时，需要注意状态的正确传递和组件之间的依赖关系。这是应用中的另一个复杂性。
Redux 将所有应用状态存储在单个对象中，并通过约定的方式进行状态更新，从而降低了组件之间的状态交互，减少了整个应用的复杂性。同时，Redux 还提供了方便的调试工具和中间件接口，开发者可以在 Redux 中处理常见的异步和副作用操作，这些操作不会污染状态。
因此，使用 Redux 可以帮助开发者更好地管理应用状态，提高代码的可维护性和可拓展性，同时还可以减少调试和测试的工作量。
如何使用 Redux？
Redux 是一个 JavaScript 库，它与任何视图库或框架都可以很好地协作。如果你使用 React，你可以通过使用 react-redux 库来让 Redux 和 React 更好地协作。下面是一个基本的 Redux 配置示例：
-- -------------------- ---- -------
------ - ----------- - ---- -------
-- ------------ ----- - ------ ---
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - -
---- ------------
------ ----- - -
--------
------ -----
-
-
-- -- -----
----- ----- - --------------------
-- -- ------
----- --------------- - - ----- ----------- -
----- --------------- - - ----- ----------- -
-- -- ----- ---
------------------ -- ------------------------------
-- -- ------
------------------------------- -- -
------------------------------- -- -
------------------------------- -- -在上面的示例中，我们首先定义了一个 reducer，它接收当前的 state 和一个 action，返回新的 state。然后我们使用 createStore 函数创建了一个 store，store 中包含了整个应用的 state 和更新 state 的 reducer。接着我们定义了两个 action，并使用 store 的 dispatch 函数将它们分发到 store 中。最后我们订阅了 store 的变化，使用 getState 函数获取当前的 state。
如何构建自己的状态管理中心？
在实际应用中，我们很少使用 Redux 的 baseline 配置，通常我们需要在应用中使用自己定义的 action 和 reducer，同时还可能需要使用 react-redux 库来和 React 一起使用。下面是一个示例代码，展示了如何构建自己的状态管理中心：
-- -------------------- ---- -------
-- ------ -----
----- -------- - ----------
----- ----------- - -------------
----- --------------------- - -----------------------
-- ------ --------
-------- ------------- -
------ - ----- --------- ---- -
-
-------- ----------------- -
------ - ----- ------------ ----- -
-
-------- --------------------------- -
------ - ----- ---------------------- ------ -
-
-- --------
-------- ----------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
----- ------------
---------- -----
-
-
---- ------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ - -------- ---------- --------------- -
-
------ ----
--
--------
------ -----
-
-
-------- ---------------------- - ----------- ------- -
------ ------------- -
---- ----------------------
------ -------------
--------
------ -----
-
-
-- ------- --------
-------- ------------- - --- ------- -
------ -
------ ------------------ --------
----------------- ---------------------------------------- -------
-
-
-- ------ -----
------ - ----------- - ---- -------
----- ----- - --------------------
-- --- ---- -----
------ ------ - --------- - ---- -------
------ - --------- ------- - ---- -------------
----- --- ------- --------- -
-------- -
----- - ------ ---------------- - - ----------
------ -
-----
-------- ---------
------ --------- -- ----------- - ------ --
-------
----------- -- -
-----------------------------------------
---------------- - --
--
-
--- ----
---------
----
----------------- ------ -- -
---
-----------
----------- -- -
---------------------------------
--
--------
--------------- -------------- - -------------- - ------
--
-
-----------
-----
---
-----
---
------- --
-------
----------- -- -
-----------------------------------------------
--
-
---
----------- --
-------
----------- -- -
-----------------------------------------------------
--
-
---------
----------- --
-------
----------- -- -
--------------------------------------------------
--
-
------
---------
----
---
------- ---------- ------- ------------------
----
------
-
-
-
----- --------------- - ----- -- -
------ -
------ ------------
----------------- ----------------------
-
-
----- ------------ - -----------------------------
----- ------- - -- -- -
--------- --------------
------------- --
-----------
-
------ ------- -------在上面的代码中，我们首先定义了三个 action types，并分别定义了对应的 action creators。然后我们定义了两个 reducers，一个用于处理 todos 的状态，一个用于处理 visibilityFilter 的状态。在我们的例子中，todos 是一个数组，用于存储所有的条目，每个条目是一个对象包含 text 和 completed 两个属性。visibilityFilter 是一个字符串，表示当前展示的条目类型。我们的 reducers 是纯函数，只接收当前的 state 和 action，返回新的 state。
接着我们使用 combineReducer 函数将 todos 和 visibilityFilter 两个 reducers 组合成一个新的 reducer：todoApp。然后我们通过 createStore 函数创建了一个 store。
最后我们定义了一个新的 React 组件 App，并通过 connect 函数将它和 Redux 关联。在 App 组件中，我们使用 todos state 展示了所有的条目，并提供了添加新条目和更新条目状态的功能。通过 dispatch 函数将 action 分发到 store 中实现状态的修改。
然后我们将 App 组件包裹在 Provider 组件中，这个组件接收一个 store 属性，用于让 React 和 Redux 协作。最后我们导出了 TodoApp，这是一个已经和 Redux 配合好的具有完整功能的 Todo list。
总结
在本文中，我们详细地讲述了如何基于 Redux 打造自己的状态管理中心。首先介绍了 Redux 的设计思想和使用方法，然后讲解了在实际应用中如何定义自己的 action 和 reducer，以及如何使用 combineReducers 函数组合 reducer。最后我们使用了 react-redux 库将 Redux 和 React 结合起来，实现了一个 Todo list，并提供了完整的示例代码。使用 Redux 可以让我们更好地管理应用状态，提高应用的可维护性和可拓展性，同时还可以减轻调试和测试工作的负担。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66580d1ed3423812e4dcc737