Redux 入门

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。

Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

安装

安装稳定版：

npm install --save redux

以上基于使用 npm 来做包管理工具的情况下。

否则你可以直接在 unpkg 上访问这些文件，下载下来，或者把让你的包管理工具指向它。

一般情况下人们认为 Redux 就是一些 CommonJS 模块的集合。这些模块就是你在使用 Webpack、Browserify、或者 Node 环境时引入的。如果你想追求时髦并使用 Rollup，也是支持的。

你也可以不使用模块打包工具。redux 的 npm 包里 dist 目录包含了预编译好的生产环境和开发环境下的 UMD 文件。可以直接使用，而且支持大部分流行的 JavaScript 包加载器和环境。比如，你可以直接在页面上的 <script> 标签 中引入 UMD 文件，也可以让 Bower 来安装。UMD 文件可以让你使用 window.Redux 全局变量来访问 Redux。

Redux 源文件由 ES2015 编写，但是会预编译到 CommonJS 和 UMD 规范的 ES5，所以它可以支持 任何现代浏览器。你不必非得使用 Babel 或模块打包器来使用 Redux。

附加包

多数情况下，你还需要使用 React 绑定库和开发者工具。

npm install --save react-redux
npm install --save-dev redux-devtools

需要提醒的是，和 Redux 不同，很多 Redux 生态下的包并不提供 UMD 文件，所以为了提升开发体验，我们建议使用像 Webpack 和 Browserify 这样的 CommonJS 模块打包器。

要点

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers。

就是这样！

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import { createStore } from  'redux' ;   /**   * 这是一个 reducer，形式为 (state, action) => state 的纯函数。   * 描述了 action 如何把 state 转变成下一个 state。   *   * state 的形式取决于你，可以是基本类型、数组、对象、   * 甚至是 Immutable.js 生成的数据结构。惟一的要点是   * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。   *   * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)   * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。   */ function  counter(state = 0, action) {    switch  (action.type) {    case  'INCREMENT' :      return  state + 1;    case  'DECREMENT' :      return  state - 1;    default :      return  state;    } }   // 创建 Redux store 来存放应用的状态。 // API 是 { subscribe, dispatch, getState }。 let store = createStore(counter);   // 可以手动订阅更新，也可以事件绑定到视图层。 store.subscribe(() =>    console.log(store.getState()) );   // 改变内部 state 惟一方法是 dispatch 一个 action。 // action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行 store.dispatch({ type:  'INCREMENT'  }); // 1 store.dispatch({ type:  'INCREMENT'  }); // 2 store.dispatch({ type:  'DECREMENT'  }); // 1

你应该把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state。然后编写专门的函数来决定每个 action 如何改变应用的 state，这个函数被叫做 reducer。

动机

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。

如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性，难道就这么放弃了吗？当然不是。

这里的复杂性很大程度上来自于：我们总是将两个难以理清的概念混淆在一起：变化和异步。 我称它们为曼妥思和可乐。如果把二者分开，能做的很好，但混到一起，就变得一团糟。一些库如 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。

跟随 Flux、CQRS 和 Event Sourcing 的脚步，通过限制更新发生的时间和方式，Redux 试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。

核心概念

Redux 本身很简单。

当使用普通对象来描述应用的 state 时。例如，todo 应用的 state 可能长这样：

1 2 3 4 5 6 7 8 9 10

{    todos: [{      text:  'Eat food' ,      completed:  true    }, {      text:  'Exercise' ,      completed:  false    }],    visibilityFilter:  'SHOW_COMPLETED' }

这个对象就像 “Model”，区别是它并没有 setter（修改器方法）。因此其它的代码不能随意修改它，造成难以复现的 bug。

要想更新 state 中的数据，你需要发起一个 action。Action 就是一个普通 JavaScript 对象（注意到没，这儿没有任何魔法？）用来描述发生了什么。下面是一些 action 的示例：

1 2 3

{ type:  'ADD_TODO' , text:  'Go to swimming pool'  } { type:  'TOGGLE_TODO' , index: 1 } { type:  'SET_VISIBILITY_FILTER' , filter:  'SHOW_ALL'  }

强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了，就可以知道为什么变。action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。再次地，没有任何魔法，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 对于大的应用来说，不大可能仅仅只写一个这样的函数，所以我们编写很多小函数来分别管理 state 的一部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function  visibilityFilter(state =  'SHOW_ALL' , action) {    if  (action.type ===  'SET_VISIBILITY_FILTER' ) {      return  action.filter;    }  else  {      return  state;    } }   function  todos(state = [], action) {    switch  (action.type) {    case  'ADD_TODO' :      return  state.concat([{ text: action.text, completed:  false  }]);    case  'TOGGLE_TODO' :      return  state.map((todo, index) =>        action.index === index ?          { text: todo.text, completed: !todo.completed } :          todo     )    default :      return  state;    } }

再开发一个 reducer 调用这两个 reducer，进而来管理整个应用的 state：

1 2 3 4 5 6

function  todoApp(state = {}, action) {    return  {      todos: todos(state.todos, action),      visibilityFilter: visibilityFilter(state.visibilityFilter, action)    }; }

这差不多就是 Redux 思想的全部。注意到没我们还没有使用任何 Redux 的 API。Redux 里有一些工具来简化这种模式，但是主要的想法是如何根据这些 action 对象来更新 state，而且 90% 的代码都是纯 JavaScript，没用 Redux、Redux API 和其它魔法。

三大原则

Redux 可以用这三个基本原则来描述：

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度。此外，受益于单一的 state tree ，以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

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

console.log(store.getState())   /* 输出 {    visibilityFilter:  'SHOW_ALL' ,    todos: [      {        text:  'Consider using Redux' ,        completed:  true ,      },      {        text:  'Keep all state in a single tree' ,        completed:  false      }    ] } *／

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接修改 state，相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行，因此不用担心 race condition 的出现。 Action 就是普通对象而已，因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

1 2 3 4 5 6 7 8 9

store.dispatch({    type:  'COMPLETE_TODO' ,    index: 1 })   store.dispatch({    type:  'SET_VISIBILITY_FILTER' ,    filter:  'SHOW_COMPLETED' })

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

function  visibilityFilter(state =  'SHOW_ALL' , action) {    switch  (action.type) {      case  'SET_VISIBILITY_FILTER' :        return  action.filter      default :        return  state    } }   function  todos(state = [], action) {    switch  (action.type) {      case  'ADD_TODO' :        return  [          ...state,          {            text: action.text,            completed:  false          }        ]      case  'COMPLETE_TODO' :        return  state.map((todo, index) => {          if  (index === action.index) {            return  Object.assign({}, todo, {              completed:  true            })          }          return  todo        })      default :        return  state    } }   import { combineReducers, createStore } from  'redux' let reducer = combineReducers({ visibilityFilter, todos }) let store = createStore(reducer)

就是这样，现在你应该明白 Redux 是怎么回事了。