React：Redux怎么处理异步？
Redux是个状态管理容器，核心接口就这几个：
createStore(reducer, preloadedState, enhancer); store.subscribe(listener); // 订阅State的变化； store.dispatch(action); // 分发Action store.getState(); // 获取State；
我们只能通过dispatch(action)来触发状态变化：
store.dispatch(action); // 分发Action
dispatch(action)则通过reducer完成状态修改：
currentState = currentReducer(currentState, action)
附：redux的dispatch源码
至此，我们可以看出
Reducer 必须是同步函数
不能放置异步逻辑
（注：Redux要求Reducer必须是“纯函数”!）
那么，问题来了...
Redux应该在哪处理异步逻辑？
异步逻辑应放置在
Redux中间件中处理
!! Middleware !!
（就是下面要提到的redux-thunk、redux-promise）
Redux中间件实质是
store.dispatch函数的增强器
它们拦截特定的Action
并在其中把带有副作用的工作完成
（例如：异步...）
1. 有哪些异步处理中间件？
redux-thunk：不到10行代码，精简到炸！ redux-promise：基于Promise的异步处理； redux-promise-middleware：还是Promise； redux-saga：最优雅！最复杂！
下面，通过代码示例
直观展示这4款中间件的差异
2. redux-thunk
redux:
store.dispatch({type: "INC", payload:....}); 注：redux 的 action 是一个简单 JS 对象；
redux-thunk:
store.dispatch((dispatch, getState) => { ... }) 注：redux-thunk 允许我们 dispatch 一个 thunk函数；
redux-thunk 中间件允许你 dispatch 一个函数（即：thunk），异步逻辑就放在这个函数中处理；
感受一波redux-thunk的精炼
redux-thunk应用示例
总结：
redux-thunk 允许我们 dispatch 一个包含异步处理逻辑函数（thunk）；优点是我们可以借助这种简单的机制在 redux 中处理异步逻辑；缺点是这会让 action 变的不纯粹，也会使得业务逻辑很分散；
扫码查看示例源码
2. redux-promise
redux:
store.dispatch({type: "INC", payload:....});
redux-thunk:
store.dispatch((dispatch, getState) => { ... }) 注：redux-thunk 允许我们 dispatch 一个 thunk函数；
redux-promise:
store.dispatch({type:"INC", payload: Promise}); 注：redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action；
redux-promise也很精炼
redux-promise应用示例
总结：
redux-promise 虽然比 redux-thunk 封装的更深，但仍然存在几个问题：
a. INC_INPROGRESS 动作不太好安置，不利于我们实现 loading 状态；
b. 业务逻辑实质还是集中在 action 中处理，变更了 action 原本的含义；
扫码查看示例源码
2. redux-promise-middleware
redux:
store.dispatch({type: "INC", payload:....});
redux-thunk:
store.dispatch((dispatch, getState) => { ... }) 注：redux-thunk 允许我们 dispatch 一个 thunk函数；
redux-promise:
store.dispatch({type:"INC", payload: Promise}); 注：redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action；
redux-promise-middleware:
store.dispatch({type:"INC", payload: Promise}); 注：redux-promise-middleware 与 redux-promise 一样，允许我们 dispatch 一个 payload 为 Promise 的 action；
redux-promise-middleware应用示例
总结：
redux-promise-middleware 与 redux-promise 差不多...不多说了...
扫码查看示例源码
2. redux-saga
redux:
store.dispatch({type: "INC", payload:....});
redux-thunk:
store.dispatch((dispatch, getState) => { ... }) 注：redux-thunk 允许我们 dispatch 一个 thunk函数；
redux-promise:
store.dispatch({type:"INC", payload: Promise}); 注：redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action；
redux-saga:
store.dispatch({type:"INC", payload:...}); 注：redux-saga 不会变动 action 的本来含义，action 仍然是一个普通的 JS 对象；
redux-saga应用示例
总结：
redux-saga是最优雅的，也是最复杂的异步中间件：
a. 有强大的异步流程控制功能（例：takeEvery、takeLatest）；
b. 异步业务逻辑被集中在 Saga 中管理；
c. 没有修改 action 原本的含义；
d. 结合 Generator、Promise 特性，用同步的方式书写异步代码；
扫码查看示例源码