Redux 基础学习
参考：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
什么是Redux：
Redux是一个适合用户使用方式复杂、多用户权限（用户和管理员），与服务器大量交互或者View要从多个数据源获取数据的框架。
它的设计思想：
1、web用用是一个状态机，视图与状态是意义对应的。
2、所有状态，保存在一个对象里面
基本api
Store
Store是保存数据的地方，可以将其看成一个容器。整个应用只能有一个Store
Redux 提供createStore这个函数，用来生成Store。
import { createStore } from 'redux';
const store = createStore(fn);
注意：fn：是另一个函数
state
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
一个 State对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。
Action
Action 就是 View 发出的通知，表示State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示Action 的名称。其他属性可以自由设置，不过还是需要定一个规范
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
Action 描述当前发生的事情。改变 State 的唯一办法，就是使用Action。它会运送数据到 Store。
Action Creator
View 要发送多少种消息，就会有多少种Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) {
return{
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
store.dispatch()
这是View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
结合Action Creator就是
store.dispatch(addTodo('Learn Redux'));
Reducer
Store 收到 Action 以后，必须给出一个新的State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的State。
const reducer = function (state, action) {
// ...
returnnew_state;
};
在使用中store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State
store.subscribe()
允许使用store.subscribe方法设置监听函数，一旦 State发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
Store总结
Store提供三个方法：
l store.getState()
l store.dispatch()
l store.subscribe()
工作原理
中间件
什么是中间件
在整个工作流程中，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能
let next = store.dispatch;
store.dispatch = functiondispatchAndLog(action) {
console.log('dispatching', action);
next(action);
console.log('next state', store.getState());
}
对store.dispatch进行了重定义，在发送 Action 前后添加了打印功能
加载中间件
const logger = createLogger();
const store = createStore(
reducer,
initial_state,
applyMiddleware(logger)
);
加载多个中间件
const store = createStore(
reducer,
applyMiddleware(thunk, promise, logger)
);
applyMiddleware方法的三个参数，就是三个中间件，有的中间件有次序要求！
applyMiddlewares()内部，所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch
异步
异步操作的整体思路：
操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染
操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染
这里我们用到的是redux-thunk中间件，通过它改造store.dispatch，使得后者可以接受函数作为参数