Redux 是一个 JavaScript 应用程序状态管理库，它可以管理整个应用程序的状态，避免了单向数据流的过长问题。在 React 开发环境中，Redux 可以与 React 建立起很好的配合来进行状态管理。本篇文章将用简单易懂的方式，带你从容入门 Redux。
Redux 实现过程
Redux 最基本的实现过程可以用下图来概括：
-- -------------------- ---- ------- ----------------------- - - - - --------- ------------- - ---- - ----- - ----- - --------- ------------- - - - - ----------------------- - - ---------- - ------ - ----------展开代码
从图中可以看出，Redux 的基本实现过程可以分为三个部分：
View：用户界面，就是最终呈现给用户的 UI 。
Redux：状态管理，主要负责响应和处理用户界面发出的请求，同步和异步请求会进入相应的中间件进行处理，最终改变该应用程序的状态。
Server：数据层，主要负责获取数据的逻辑。
Redux 工作原理
Redux 通过一下三个重要的概念来管理应用程序的状态，分别是：
Store：负责管理整个应用程序的状态，是一个包含状态、状态修改方法和状态订阅方法的对象。
Action：一个简单的 JavaScript 对象，其描述应用程序中的事件。
{ type: 'ADD_TODO', payload: { id: 0, text: 'Fix the bathroom door' } }
其中 type 属性是描述事件类型的，payload 属性则是描述事件所携带的一些数据信息。
- Reducer：状态修改方法，将旧的状态作为输入，生成新的状态作为输出。
-- -------------------- ---- ------- -------- ----------- - --- ------- - ------ ------------- - ---- ----------- ------ - --------- - --- ------------------ ----- ------------------- - - -------- ------ ----- - -展开代码
整个 Redux 工作流程的图示可以用下图来概括：
-- -------------------- ---- ------- ----------------------------------------- - - - - ----------------- ---------- - ------ - - ----- - ----------------- ---------- - - -- ------ - - - - ------------- - ----------- - - ------ - - - ---- - - - - - - - - - ------- - - - - - - - - ------------- - - -- -------- - ------- - - - ----------- ---------- - - ---- - - ----------------- - - - - - - - - - - - - ------ - - - - - ---------- - - -- ------ --- ------- - ------------ - ---- - ------------展开代码
Redux 工作的基本流程如下：
View 向 Store 分发 Action。
Store 接收并处理 Action。
Store 通过 Reducer 将旧状态转换成新状态并返回。
Store 将新状态传递给 View。
示例代码
我们可以通过下面这个简单的待办事项示例来简单地理解 Redux：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- -- -- ------ -- ----- -------- - ---------- -- -- ------ -- -------- ------- ------ - ------ - ----- --------- ----- ---- - - -- -- ------- -- -------- ----- ------ - --- ------- - ------ ------------- - ---- --------- ------ ---------- ------------ -------- ------ ----- - - -- -- ----- ----- ----- - ------------------ -- ------ ----------------------------- -- -- ----- -- ------------------ -- ------------------------------ -- -- --------- ----- ------------------------ --- -- ----- -------- ----- ----- --- -- -- --------- ----- ------------------------ --- -- ----- -------- ----- ---- ---展开代码
这个例子的功能很简单，定义了一些常量用来确定我们要做什么，例如添加 Todo 时必须使用 ADD_TODO 常量。定义了 Action 函数 addTodo，该函数将一个带有 “todo” 属性的 JavaScript 对象作为参数，最终返回一个带有 ADD_TODO 标识符和 “todo” 属性的对象。
上面代码中的 Reducer 函数 todos 对 Action 的处理逻辑非常简单，它仅根据 Action 的类型来确定将要如何处理状态。
最后，我们定义了 Store 对象，并通过 createStore 函数创建。然后我们分别通过 dispatch 函数分发两个 Action 请求，最终我们通过 getState 函数获得了状态的最新值。
终
Redux 能够在应用程序发生复杂运动时提供可预测性的状态管理。理解它的基本概念和实现过程是学习 React 和 Node.js 的一个重要部分。虽然如此，但我们应该认识到，没有单一的、完美的状态管理解决方案。根据不同的需求，应选择不同的解决方案。在实践中，我们经常会混合应用不同的工具来实现简单、快速、动态的 React 和 Node.js 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca6445e46428fe9e27f1d8
