【React全家桶入门之十二】Redux介绍
前面的文章中使用了最原始的写法（基于state的状态管理）来完成了一个管理系统。
接下来准备给我们的系统引入Redux。
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。
简单来说，Redux是一个“中心数据库”，我们可以把应用中的各种状态与数据存放在Redux中，并且可以通过Redux提供的方法对数据库中的数据进行更新，更新数据之后，通过诸如React Redu这样的工具来将数据的更新同步到UI上。
三个核心
Redux有三个核心的概念：Store、Action和Reducer。
Store
Store就是上面所说的“数据库”，在Redux中只有一个Store，所有的数据以一棵树的形式存储在Store中，比如：
const store = {
user: {
list: [...],
editTarget: {
id: 10000,
name: '一韬',
...
}
},
book: {
list: [...],
editTarget: {...}
}
};我们的管理系统的状态就可以用上面这个结构的store来维护。
Action
Action用于描述更新数据的“行为”，每一个Action都是一个普通的javascript对象，这个对象必须带有一个名为type的字段（type的值一般是一个大写形式的唯一的字符串）用于表示当前的行为类型；还可以带有其它字段用来更新Store（一般我们将额外的数据统一放到名为payload的字段中）。
一个标准的Action应该是这个样子的：
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;
}
}上面提到，state表示Store或者Store的一部分，为什么呢？
Redux通过Reducer来构建Store的结构（state参数的初始值）：当只有一个Reducer的时候，这个Reducer的state就表示整个Store；而当我们使用多个Reducer来创建Store这棵树的时候，每个Reducer的state就表示这棵树的一个子树（或树的节点）。
这样的好处就是，我们可以把一棵大树分割成多棵小树，让每棵小树自己维护自身的状态。
这就好比一个国家有多个省市，但是国家政府并不直接管理所有省市的一切事务，而是通过省政府、市政府、乡镇政府进行分级管理。
使用Redux
讲完了三个核心概念，我们来看看最简单的Redux使用例子：实现一个计数器。
HTML
<div>
<p>Count: <span id="value">0span>p>
<button id="btn_increase">+ 1button>
<button id="btn_decrease">- 1button>
div>定义Reducer
function counter (state = 0, action) {
switch (action.type) {
case 'INCREASE': return state + 1;
case 'DECREASE': return state - 1;
default: return state;
}
}创建Store
使用Redux.createStore方法来创建Store，方法的第一个参数就是reducer：
const {createStore} = Redux;
const store = createStore(counter);监听Store的更新
使用store.subscribe方法可以在Store更新时执行一些操作。
在这里使用store.getState方法取得最新的state并同步到界面上：
store.subscribe(() => {
setCount(store.getState());
});
function setCount (count) {
document.getElementById('value').innerHTML = count;
}触发Action
在点击按钮时，使用store.dispatch方法可以触发传入的action：
document.getElementById('btn_increase').addEventListener('click', function () {
store.dispatch({type: 'INCREASE'});
});
document.getElementById('btn_decrease').addEventListener('click', function () {
store.dispatch({type: 'DECREASE'});
});结果
看一下最终结果（Code Pen）：
height="265" width="100%" scrolling="no" title="zNMmLK" src="//codepen.io/awaw00/embed/zNMmLK/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen zNMmLK by aaron wang (@awaw00) on CodePen.