说说Redux（一）

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

所以什么是Redex呢？

简单来说，Redux是一个“中心数据库”，我们可以把应用中的各种状态与数据存放在Redux中，并且可以通过Redux提供的方法对数据库中的数据进行更新，更新数据之后，通过诸如React-Redux这样的工具来将数据的更新同步到UI上。

image

Redux包含三个组件：Store、Action和Reducer。

Store

Store就像是一个“数据库”，在Redux中只有一个Store，所有的数据以的树形存储在Store中。

Action

1. Action用于描述更新数据的“行为”，每一个Action都是一个普通的js对象;

2. 这个对象必须带有一个名为type的字段（type的值一般是一个大写形式的唯一的字符串）用于表示当前的行为类型；

3. 还可以带有其它字段用来更新Store（一般我们将额外的数据统一放到名为payload的字段中）。

const action = {
 
   type: 'LOAD_USER_INFO',

   payload: {
 
     userId: 10000  }
 
 };

Reducer

Reducer是一个普通的javascript方法，这个方法接收两个参数：state和action。
其中state表示Store或者Store的一部分，action就是上面提到的一个对象。
每当有一个Action被触发，所有的Reducer方法都将被执行。
在Reducer方法中，如果接收到的Action是这个Reducer所期望的type，那么就可以根据state和action来生成并返回一个新的state，否则就直接返回state。
这就是Redux更新state的逻辑：action -> reducer -> new state
我们需要给Reducer的第一个参数state设置一个初始值，这个初始值最终会变成Store或Store中一个子树的初始值。
一般Reducer方法中都会有一个switch，通过switch来根据接收到的action.type来执行不同的更新操作，例如：

function count(state = 0, action){ 
switch (action.type) {

    // 当接收到type为'INCREASE'的时候，我们将state加1    
case 'INCREASE': return state + 1;

    // 当接收到type为'DECREASE'的时候，我们将state减1   
case 'DECREASE': return state - 1;

    // 其它的type直接返回原state    
default: return state;

  }

}