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 的不一样部分。

Redux 三大原则

• 单一数据源：整个应用的 state 被储存在一棵 object tree 中，而且这个 object tree 只存在于惟一一个 store 中。
• State 是只读的：惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你须要编写 reducers。

基础

Action

咱们约定，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

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。经过 reducer，咱们不只能够修改 state 还能够借机初始化 state。

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

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

Store

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

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 经过 subscribe(listener) 注册监听器;
• 经过 subscribe(listener) 返回的函数注销监听器。

数据流

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

• 调用 store.dispatch(action)
• redux store 调用传入的 reducer 函数
• 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
• Redux store 保存了根 reducer 返回的完整 state 树

搭配 react

结合 react 开发其中比较重要的一点在于如何设计组件层次结构。结合 react 能够知道在组件层次方面，主要须要考虑两点：展现组件和容器组件，固然很差区分的组件能够划分为其余组件。