Redux 简介-1

look_w

状态管理是软件开发的最困难方面之一，这使得状态管理错误成为了几乎所有 bug 的源头。本系列将探索 ，这是一个针对 JavaScript 应用程序的可预测的状态容器。Redux        不仅有助于状态管理，还使得实现一些高级特性变得很简单，比如无限撤销/重做和实时编辑时间旅行 (live-editing time travel)。
尽管 Redux 来自  社区，但它并不依赖于 React。无论有没有        JavaScript 框架，比如 React、Angular、Backbone 或 Cycle.js，都可以使用 Redux。在第一期文章中，首先将了解 Redux        基础知识，学习如何使用它作为独立的状态容器；然后继续探索如何结合使用 Redux 和 React。后续几期文章将介绍更高级的 Redux 场景，在最后一期文章中，将学习如何结合使用        Redux 和 Angular。
Redux 的工作原理安装 Redux可通过克隆 GitHub  或通过 npm 来安装            Redux：npm install redux

Redux 是 Facebook 的           架构的一种简化实现。（Redux 既是一个表示 “已返回” 的英文单词，也是 reducer + flux        的混合词。）Flux 在本质上采用了模型-视图-控制器 (MVC) 的结构，但引入了很高的复杂性。Redux 从  借用了缩减程序 (reducer) 的概念来降低了这一复杂性，Elm        是一个基于不可变数据结构和纯函数的强大的反应式函数编程语言。纯函数是没有副作用的函数，Redux 缩减程序是计算应用程序状态的纯函数。
Redux 有 3 条原则：

• 应用程序状态存储在单个对象中。
• 应用程序状态不可变，只能通过描述状态更改的操作 彻底替换。
• 缩减程序根据当前状态和某个操作来创建下一个状态。

应用程序状态存储在单个对象中Redux 通过一个 JavaScript        对象管理状态，该对象称为数据存储，包含应用程序的所有状态。将状态集中保存在一个对象中，这使得在阅读代码时推断应用程序数据变得更容易。另外，当所有数据都在一个位置时，应用程序更容易调试和测试。将应用程序状态存储在一个对象中，还使持久保存应用程序的整体状态变得更容易。
应用程序状态不可变对于 Redux，您不能修改应用程序状态。而需要使用新状态替换现有状态。新状态由操作指定，操作也是不可变的 JavaScript 对象，用于描述状态更改。
将状态更改封装在不可变的对象中有许多优点。尽管封装状态更改时使用了模式，但封装状态更改远不止使用模式那么简单，所以最好连同引用一起删除。您在本系列文章中将会看到，其中一个优点是能够实现无限撤销和重做        — 实际上类似于时光机。操作也按严格的顺序执行，所以不会发生竞争条件。
缩减程序创建一种新状态缩减程序是纯 JavaScript 函数，它们：

• 根据当前状态和某个操作来创建一个新状态
• 集中化数据变化
• 可处理所有或部分状态
• 可组合和重用

因为它们是纯函数，缩减程序没有副作用 — 所以它们很容易读取、测试和调试。您可以构造缩减程序，轻松实现仅关注整体应用程序状态的一部分的简单缩减程序。
因为应用程序状态不可变，而且因为缩减程序是没有副作用的纯函数，所以 Redux 是一个可预测的        状态容器：给定任何状态和任何操作，您就可以非常肯定地预测应用程序的下一个状态。Redux 的这种可预测元素是一个非常好的特性，使实现无限撤销/重做和实时编辑时间旅行成为可能。
我们接下来将通过两个示例演示一下 Redux 的基础原理。
操作、缩减程序和存储在图 1 中，一个简单的 Redux 示例（一个交通信号灯模拟器）的代码在 TextMate 文本编辑器中运行。图中 TextMate          生成的工具提示显示了应用程序的输出，其中显示了应用程序的状态（STOP、CAUTION 或        GO）。
图 1. 使用 Redux 的交通信号灯状态图 1 中的代码首先要求使用 Redux 并创建 Redux 存储：

1 2 3

const Redux = require('redux'); const createStore = Redux.createStore; const store = createStore(reducer);

使用 Redux.createStore() 函数创建应用程序的存储。每个 Redux 应用程序仅有一个存储，每个存储仅有一个缩减程序。将该缩减程序传递给          Redux.createStore() 函数。
应用程序的状态（在本例中为一个具有值 GO、STOP 或 CAUTION 的字符串）由          reducer() 函数创建。reducer() 函数根据当前状态和某个描述状态更改的操作来返回一个新状态。清单 1          给出了交通信号灯应用程序的缩减程序。请注意，在状态未定义时（也就是初始状态），reducer() 函数将返回 GO。
清单 1. 交通信号灯应用程序的缩减程序

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const reducer = (state = 'GO', action) => {   switch(action.type) {      case 'GO':         state = 'GO'         break;      case 'STOP':         state = 'STOP'         break;      case 'CAUTION':         state = 'CAUTION';         break;   }   return state; }

接下来，该代码定义了 3 个操作对象，每个对应于一个状态，如清单 2 所示。
清单 2. 交通信号灯操作

1 2 3 4 5 6 7 8 9 10 11

const cautionAction = {    type: 'CAUTION' }; const goAction = {    type: 'GO' }; const stopAction = {    type: 'STOP' }

最后，如清单 3 所示，应用程序分派操作，通过 Redux 存储的 getState() 方法获取当前状态的引用，并将该状态的值打印到控制台。
清单 3. 分配交通信号灯操作

1 2 3 4 5 6 7 8 9 10

// Dispatch actions.................................................... store.dispatch(stopAction); console.log('State: ' + store.getState()); store.dispatch(cautionAction); console.log('State: ' + store.getState()); store.dispatch(goAction); console.log('State: ' + store.getState());