Redux 中间件

参考：# Redux 中间件实现原理

redux middleware调用时机

在界面出发状态改变之后，dispatch之前，从某种意义上来说，劫持了dispatch方法，如下图：

手写常用中间件

1.redux-logger：打印 dispath 前后状态的日志

const reduxLoggerMiddleware = () => {
  return ({ getState, dispatch }) =>
    (next) =>
    (action) => {
      console.log('==prev state:', getState());
      try {
        next(action);
        console.log('==next state:', getState());
      } catch (e) {
        console.log(e);
        throw e;
      }
    };
};

2.redux-thunk: 支持 action 中有异步操作

const reduxThunkMiddleware = (extraArguments) => {
  return ({ getState, dispatch }) =>
    (next) =>
    (action) => {
      if (typeof action === 'function') {
        return action(dispatch, getState, extraArguments);
      }
      return next(action);
    };
};