（转）redux

随着 JavaScript 单页应用开发日趋复杂，越来越多的 state （状态）需要在前端进行管理。

这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

为了高效的管理 state 而不是简单的在全局上新建变量，开发者需要捋清 model/view 之间的关系，以降低前端开发的复杂性。此处以 Redux 为例，总结如何利用其设计思想以及实践经验，来使得应用的 state 管理变得容易。

核心概念

Redux 的核心概念第一点则是 state 的表示，你可以用一个对象来表示应用的 state (可以看成 model) 但不能直接修改他（没有 setter）。这一步定义的内容可以看成是用于控制页面效果、动画的一些开关状态。

{

    todo: [],

    name: 'me'

}

想要修改 state 中的数据只能通过发起 action 来实现（这样做的好处就是可以清晰的知道应用中到底发生了什么）， action 也是一个普通对象，用来描述将要发生什么。在 action 中我们需要存储发生事件的描述以及用于更新 state 的属性数据，比如：

{ type: 'ADD_TODO', text: 'Go to swimming pool' }

那么如何接收 action 并更新返回新的 state 呢？用 reducer 函数。它接收 state 和 action，在内部处理后并返回新的 state。考虑到应用的复杂性，我们可以分别编写 reducer 分别独立地操作 state tree 的不同部分。

我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。除了 type 字段外，对象结构完全由自己决定。但是需要注意的是应该尽量减少在 action 中传递的数据。

为了了解生成 action，还需要知道 action 创建函数，该函数只是简单的返回一个 action，这样做将使 action 创建函数更容易被移植和测试。例如：

function addTodo(text) {

  return {

    type: ADD_TODO,

    text

  }

}

当你把 action 创建函数结果传给 dispatch() 方法，即可发起一次 dispatch 过程，例如：

dispatch(addTodo(text))

在使用过程中可能用到的工具包括 connect()， bindActionCreators()

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。通过 reducer，我们不仅可以修改 state 还可以借机初始化 state。

针对 action 的处理我们需要注意：不要修改 state，且在 default 情况下返回旧的 state。

在使用过程中可能用到的工具包括 combineReducers()

在知道了如何用 reducer 来根据 action 更新 state 后，需要进一步了解的就是 store —— 将它们联系到一起的对象。store 具有以下职责：

Redux 应用中的数据的生命周期遵循四个步骤：

结合 react 开发其中比较重要的一点在于如何设计组件层次结构。结合 react 可以知道在组件层次方面，主要需要考虑两点：展示组件和容器组件，当然不好区分的组件可以划分为其他组件。