redux中bindActionCreators源码分析

既然是源码分析那么首先上源码

为了方便分析我们直接在源码上做标注

bindActionCreator源码

function bindActionCreator(actionCreator, dispatch) {
  return function () {
    return dispatch(actionCreator.apply(this, arguments));
  };
}
//bindActionCreator接收两个参数，第一个参数是一个函数，第二个是dispatch
//这里的目的是将发送actions的过程简化，这里的重点是它返回的是一个函数，当调用这个返回的函数时会自动调用dispatch发送对应的action

bindActionCreators源码

function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
  //这里首先检测传入的第一个参数是不是函数类型的，如果是的话则直接调用bindActionCreator
  //返回一个函数来使用，当参数为函数是说明当前只有一个actionCreator
    return bindActionCreator(actionCreators, dispatch);
  }
	
  if (typeof actionCreators !== 'object' || actionCreators === null) {
  //这里判断当传入的参数不是对象或者是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\"?");
  }

  var keys = Object.keys(actionCreators);
  //获取传入对象的所有key值
  var boundActionCreators = {};
 //这里创建一个新的对象用来保存所有的actionCreator
  for (var i = 0; i < keys.length; i++) {
  //遍历所有的key
    var key = keys[i];
    var actionCreator = actionCreators[key];
	
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
    }
    //将当前传入对象的key和value导入到我们新的对象中，并且在这里将value也就是要执行的函数和dispatch一起传入bindActionCreator，使得我们的每个新的函数都能使用dispatch
    //转化完成之后的boundActionCreators大概张这个样子
    {
    	key：function () {return dispatch(actionCreator.apply(this, arguments))};
    }
  }

  return boundActionCreators;
}

总结

boundActionCreators主要是用来将actions转化为dispatch(action)这种格式，方便进行actions的分离，并且使代码更简洁，源码中主要是用到了将传入对象的所有key值进行遍历，转化为一个函数抛出一个对象的形式，这个抛出的对象中，key值是传入对象的key值，value是一个函数内部执行dispatch(action)，将传入对象的value返回值当做action传了进去。