redux-thunk logger applyMiddleware

1 依赖：applyMiddleware源码

export default function applyMiddleware() {
  for (var _len = arguments.length,middlewares = Array(_len),_key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    //enhancer(createStore)(reducer,preloadedState);这里的enhancer就是applyMiddleware(thunk,logger)
    //enhancer(createStore)返回值就是下面这个函数；
    return function (reducer,preloadedState,enhancer) {
      //还是先创建一个store;
      var store = createStore(reducer,enhancer);
      //下面对创建的store中的dispatch进行改造；
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.getState,dispatch: function dispatch(action) {
          return _dispatch(action);
        }
      };
      //放入到chain数组中的函数都形成了闭包；
      chain = middlewares.map(function (middleware) {
        //在这里对thunk和logger
        return middleware(middlewareAPI);
      });
      //将_dispatch指向新的函数；传入的store.dispatch还是原始的dispatch;
      _dispatch = compose.apply(undefined,chain)(store.dispatch);
      //_dispatch = chain[0](chain[1](store.dispatch))；
      //chain[1](store.dispatch) 返回值是一个函数，该返回值作为chain[0]的参数；
      //chain[0](chain[1](store.dispatch)) 的返回值是在下面源码处有注释
//返回最后的store
      return _extends({},store,{
        dispatch: _dispatch
      });
    };
  };
}

2 redux-thunk源码

'use strict';

exports.__esModule = true;
function createThunkMiddleware(extraArgument) {
  //下面返回函数其实就是thunk;
  return function (_ref) {
    //_ref就是middleWareAPI
    var dispatch = _ref.dispatch,getState = _ref.getState;
    //下面就是middleware(middlewareAPI);的返回值，被放到chain数组中,chain[0]，形成闭包；
    return function (next) { //这里的next就是chain[1](store.dispatch);
      return function (action) {  //这里就是 chain[0](chain[1](store.dispatch)) 也就是最终的dispatch,所以最终可以dispatch(action);
        if (typeof action === 'function') {
          return action(dispatch,getState,extraArgument);
        }
        //如果action不是函数，那么就执行next，就是chain[1](store);
        return next(action);
      };
    };
  };
}

var thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

exports['default'] = thunk;

什么是thunk

// Meet thunks.
// A thunk is a function that returns a function.
// This is a thunk.

3 Redux-logger源码

function createLogger() {
 //......删除了一些判断代码；
  return function (_ref) {
   // _ref就是middleWareAPI
    var getState = _ref.getState;
    //chain[1]其实就是这个函数；形成闭包；
    return function (next) {
      //chain[1](store.dispatch)就是下面这个函数；
      return function (action) {
        console.log('dispatch 前：',middlewareAPI.getState());
        var returnedValue = next(action);
        console.log('dispatch 后：',middlewareAPI.getState(),'\n');
        return returnedValue;
      };
    };
  };
}
//这里的{dispatch,getState}其实就是applyMiddleware中的
/*
      var middlewareAPI = {
        getState: store.getState,dispatch: function dispatch(action) {
          return _dispatch(action);
        }
      };
*/
//下面返回函数其实就是logger;
const defaultLogger = ({ dispatch,getState } = {}) => {
  if (typeof dispatch === 'function' || typeof getState === 'function') {
    //下面就是middleware(middlewareAPI);的返回值，被放到chain数组中,chain[1]
    return createLogger()({ dispatch,getState });
  }
}
export {defaultLogger as logger}

上面两者被放到chain数组中的函数其实都是类似于这样的

return function (next) {
      return function (action) {
      };
    };

4 logger最简化代码

function logger(middlewareAPI) {
  return function (next) {
    return function (action) {
      console.log('dispatch 前：',middlewareAPI.getState());
      var returnValue = next(action);
      console.log('dispatch 后：','\n');
      return returnValue;
    };
  };
}

5 结合applyMiddleware改进dispatch；

//createStore源码中有这么一行代码
enhancer(createStore)(reducer,logger)
//============
const store = createStore(
    reducer,applyMiddleware(thunk,logger)
);

redux-thunk