版权声明：本文为博主原创文章，未经博主允许不得转载。转载请注明出处： http://blog.csdn.net/peng_cao https://blog.csdn.net/cpwolaichile/article/details/82623605
前言
我们在上一节中介绍了redux的一个基本用法Redux 入门。 用户发出Action，redux计算出新的state，View根据新的state来渲染界面。但是当我们希望尝试异步操作、并且希望当一个action完成之后自动执行下一个action的时候怎么办呢？这里我们介绍下在redux中经常被使用的一个工具：middleware
中间件的概念
要想理解中间件，我们先站在设计者的角度来思考问题；如果我们需要在redux中添加的功能怎么做？
reducer： 纯函数，只承担计算State的功能，存函数不能进行读写操作View: 和state一一对应，Action: 存放数据的对象，消息的存放载体，只是一个载体，可以被动的接收消息却无法操作消息。dispatch: 发出action的时候
如上一篇文章中提到的发出一个action的常见dispatch方法
store.dispatch(createTODOAction("TODO text"));我们现在对这个dispatch函数稍微改造下
let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action); // --> here
next(action);
console.log('next state', store.getState()); // --> here
}在发出当前action之前打印log，在发出当前action之后再次打印log信息。
中间件就是一个函数，它对store.dispatch 方法进行了改造，在发出action和执行reducer之间添加了其他功能
中间件的用法
这里以常见的中间件redux-logger为例
import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(logger)
);其实比较简单。通常情况下中间件组件会提供一个生成当前该中间件的一个函数；例如这里的createLogger()然后将生成的中间件作为appliMiddleware(...)的入参。在传入createStore方法即可。
需要注意的是
- createStore可以接收三个参数，通常第二个参数用于初始化当前应用的初始状态
const initial_store = {}；
const store = createStore(
reducer,
initial_state,
applyMiddleware(logger)
);- 中间件的排列顺序是有讲究的(一定要按照特定的顺序排，或者按照自己所期望的顺序排列)
applyMiddleware
applyMiddleware的作用就是讲多个middle组合在一起，然后按照一定的秩序执行
异步操作的思路
- 操作开始时，送出一个 Action，触发 State 更新为”正在操作”状态，View 重新渲染
- 操作结束后，再送出一个 Action，触发 State 更新为”操作结束”状态，View 再一次重新渲染