在复杂的 React 应用中，数据流的管理是十分关键的。Redux是一个优秀的状态管理库，它能够帮助我们解决应用中数据流难以管理的问题，提升 React 应用的性能和可维护性。
在这篇文章中，我们将探讨 Redux 是如何工作的，如何使用 Redux 构建高性能的 React 应用，并提供示例代码以供参考。
Redux 工作原理
Redux 的设计思想是单一数据源，并且状态不可变。单一数据源指睡在整个应用中，只有一个 Store 存放所有的数据。不可变性指所有的状态都是只读的，不能直接修改。
Redux 中的数据流是单向的，从 View 到 Action 再到 Reducer 最后更新 Store，这么做的目的是为了方便状态的追踪和调试。
View：用户的交互行为都来自于 View，并且把这些交互行为转化成 Action，例如按钮点击、输入框的输入等等。
Action：Action 是一个普通的 JavaScript 对象，记录着发生什么事情，例如用户点击了哪个按钮，输入了什么内容等等。它必须包含一个 type 属性，区别不同的 Action 类型。
Reducer：Reducer 是一个纯函数，当 Store 收到一个 Action 时，它计算出新的状态并返回，新的状态将被更新到 Store 中。Reducer 接收两个参数，一个是当前状态 state，另一个是 Action。Reducer 在计算时需要保证纯(无副作用)，因为它是会让 Store 中原有的状态丢失。
Store：Store 存放着整个应用的状态。它提供了 getState 方法获取当前状态，提供了 dispatch 方法来更新状态和触发 Reducer 计算，还提供了 subscribe 方法监听 Store 的变化。
下面是一张图来表示整个流程：
在 React 中使用 Redux
首先，我们需要引入 Redux 库：
--- ------- -----
通常我们会在一个单独的文件中定义一个 Store，例如： src/store/index.js
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- ------ ------- ------
上面代码中，我们通过 createStore 方法创建了一个 Store，传入了一个 rootReducer。rootReducer 是由一组 Reducer 组成的，它们协同工作，处理不同类型的 Action。Reducer 在执行时需要注意不改变原有的状态。
接下来我们来看看如何定义 Action 和 Reducer。
定义 Action:
------ - -------- - ---- ----------
------ ----- ------- - ------ -- --
----- ---------
-------- -
-----
---------- -----
-
---上面代码中，我们定义了一个 addTodo 方法，它返回一个普通 JavaScript 对象，包含 type 属性和 payload 属性。type 决定了这个 Action 的类型，payload 是一个对象，包含 Action 的附加数据。
定义 Reducer:
------ - --------------- - ---- --------
------ - --------- ----------- - ---- -------------------
----- ------------ - -
------ --
--
----- ----------- - ------ - ------------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
--------------
--
---- ------------
------ -------------- -- -
-- -------- --- ------------------ -
------ -
--------
---------- ---------------
--
-
------ -----
---
--------
------ ------
-
--
----- ----------- - -----------------
------ -----------
---
------ ------- ------------上面代码中，我们先定义了一个 initialState，它包含了一个名为 todos 的数组。todoReducer 是处理 todos 数组的 Reducer，它根据 action.type 返回新的 todos 数组。
Reducer 需要通过 combineReducers 方法组合。
在 Action、Reducer 定义完毕后，我们可以在 React 组件中引入并使用它们。
使用 connect 方法连接 React 组件和 Redux Store:
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------
----- -------- ------- --------------- -
----- - -
------------ --
--
------------ - ------- -- -
--------------- ------------ ------------------ ---
--
------------ - ------- -- -
-----------------------
-- ------------------------------- -
-------------------------------------------
--------------- ------------ -- ---
-
--
-------- -
------ -
----- -----------------------------
------
-----------
------------------------------
----------------------------
--
------- ----------------- -------------
-------
--
-
-
------ ------- ------------- - ------- -------------上面代码中，我们使用 connect 方法来连接 TodoForm 组件和 Redux Store。connect 方法接收两个参数，第一个参数 mapStateToProps，传入 null 表示我们不需要从 Store 中取数据。第二个参数是 mapDispatchToProps，它可以绑定 Action，并将 Action 中的方法作为 props 传递给组件。
最后，我们可以在 TodoForm 组件中调用 this.props.addTodo 方法来触发 Action，添加新的 Todo 到防线中。
总结
Redux 是一个优秀的状态管理库，它提供了一种单一数据源、不可变性的数据流解决方案，能够帮助我们提升 React 应用的性能和可维护性。
在 React 应用中使用 Redux，我们可以通过定义 Action 和 Reducer 来协同工作，处理不同类型的 Action。通过 connect 方法将 React 组件和 Redux Store 绑定在一起。
本文示例代码可参考：https://github.com/nodejh/redux-todo-app
参考文献：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ec0c948841e9894d270dc