Redux 简介(2)

look_w

操作、缩减程序和存储在图 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())