一、Redux中间件原理

redux中间件的“中间”指的是action和store之间，在redux之中，action只能是一个对象被dispatch分发，当使用redux-thunk之后，action可以是一个函数了，由此可以，实际上中间件其实就是对dispatch方法的封装，或者说是对dispatch方法的升级。例如，在redux-thunk之后，当dispatch方法接收的参数为一个对象的时候会直接传给store，如果接收的是一个函数的时候，它就会让这个方法先执行。

二、redux-logger中间件

redux-logger会在dispatch改变仓库状态的时候打印出旧的仓库状态、当前触发的action以及新的仓库状态

// 简单实现
let next = store.dispatch
store.dispatch = (action) => {
  console.log('prev state',store.getState())
  console.log('action',action)
  next(action)
  console.log('next state',store.getState())
}

三、redux-thunk中间件

redux-thunk是一个比较流行的action异步中间件，使用场景：1.当需要在一个action中触发多个dispatch。2.需要在action中做其他任何函数能做的事情，比如带副作用的事情

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

简单来说就是，就是判断每个action：如果是function类型，就调用这个function（并传入 dispatch 和 getState 及 extraArgument 为参数），而不是任由让它到达 reducer，因为 reducer 是个纯函数，Redux 规定到达 reducer 的 action 必须是一个 plain object 类型。参数dispatch就是store.dispatch，参数getState 就是store.getState