Redux 源码阅读记录

/**
 * 从右往左，编译单个参数的函数。最右函数可以是多个参数的函数，提供单个编译函数。
 *
 * @param {...Function} funcs The functions to compose.
 * @returns {Function} A function obtained by composing the argument functions
 * from right to left. 
 * For example, compose(f, g, h) is identical to doing
 * (...args) => f(g(h(...args))).
 */
function compose() {
  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

  if (funcs.length === 1) {
    return funcs[0];
  }
  // reduce 多次回归调用，函数是一个包裹的过程，从左往右包裹，执行时从右往左执行。
  // 最后返回一个可以执行所有函数的 函数!
  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(void 0, arguments));
    };
  });
}

// 源码这里 调用函数会返回一个函数，函数执行会返回dispatch执行action的结果，相当于提前执行了dispatch。
function bindActionCreator(actionCreator, dispatch) {
  return function () {
    return dispatch(actionCreator.apply(this, arguments));
  };
}

/**
 * 
 * 转换每一个action creator，将其返回的对象的key都进行 dispatch 包裹，方便直接调用。
 * 为了方便，也可以在creator 的第一个参数传入dispatch，用dispatch包裹后再返回。
 *
 * @param {Function|Object} actionCreators An object whose values are action
 * creator functions. One handy way to obtain it is to use ES6 `import * as`
 * syntax. You may also pass a single function.
 * 和es6 的 import * as 语法结合使用，传入对象或者函数。
 *
 * @param {Function} dispatch The `dispatch` function available on your Redux
 * store.
 *
 */


function bindActionCreators(actionCreators, dispatch) {
  // 判断是否是函数
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch);
  }
  
  // 判断是否是不是null的对象
  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error("bindActionCreators expected an object or a function, instead received " + (actionCreators === null ? 'null' : typeof actionCreators) + ". " + "Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?");
  }
  // 定义新对象，存储传参对象调用 bindActionCreator 的返回值。
  var boundActionCreators = {};
  // 如果是对象执行 for-in 循环（for-in专用于遍历对象的key。）
  for (var key in actionCreators) {
    var actionCreator = actionCreators[key];
    // 对每个对象中的function都调用一次上面的 bindActionCreator() 函数。
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
    }
  }
  // 返回新的对象
  return boundActionCreators;
}

/**
 * 
 * 引用中间件以丰富修改 redux store 的dispatch方法。
 * 满足不同的任务，用简明的方式实现，例如：异步action，日志等。
 * 
 * 参考 `redux-thunk` 就是处理异步的中间件。
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 * 因为中间件是潜在的异步过程，应该是在组和链中第一个被调用
 *
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 * 每个中间件都应该有 dispatch 和 getState 方法。
 *
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 * 然后返回应用中间件的store enhancer 状态值的放大器。

 * 重点意思是，对action的再次封装返回新的action。
 */

function applyMiddleware() {
  // 遍历函数arguments，并将参数重新收集到一个新的 middlewares 数组。
  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function () {
      var store = createStore.apply(void 0, arguments);
      
      // 引用中间件不被允许的提示。
      var _dispatch = function dispatch() {
        throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');
      };
      
      // store的 getState dispatch 方法，拿过来给每个中间件都是
      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch() {
          return _dispatch.apply(void 0, arguments);
        }
      };
      var chain = middlewares.map(function (middleware) {
        // 将getState和dispatch传递给中间件
        return middleware(middlewareAPI);
      });
      
      //把添加getState和dispatch的中间件数组，调用 compose 进行一次dispatch的合并，返回一个函数再次调用得到新的dispatch。
      _dispatch = compose.apply(void 0, chain)(store.dispatch);
      return _objectSpread2({}, store, {
        dispatch: _dispatch
      });
    };
  };
}