最近在读Redux源码,现将自己实现的代码和理解贴上,后期再补充详细~
为了方便利用action创建函数来分发(触发)action,redux提供了一个函数bindActionCreators。该函数用于增强action创建函数的功能,使它不仅可以创建action,并且创建后会自动完成分发。
bindActionCreators,接受两个参数:actionCreators、dispatch。
dispatch会被传递,每次调用action都会执行一次。
actionCreators需区分对象和函数类型,做不同的处理。
简单的说是返回一个对象,每个key对应一个函数,这个函数运行时会调用action生成函数,然后再调用一下dispatch,简化了操作。
/**
*
* @param {*} actionCreators action生成器
* @param {*} dispatch
*/
export function bindActionCreators(actionCreators, dispatch) {
// 如果是函数则直接返回
if (typeof actionCreators === 'function') {
return getAutoDispatchActionCreator(actionCreators, dispatch)
} else if (typeof actionCreators === "object") {
const result = {}; //返回结果
for (const key in actionCreators) {
if (actionCreators.hasOwnProperty(key)) {
const actionCreator = actionCreators[key];
if (typeof actionCreator === 'function') {
result[key] = getAutoDispatchActionCreator(actionCreator, dispatch);
}
}
};
return result;
} else {
throw new TypeError("actionCreators must be an object or function which means action creator")
}
}
// 进行抽象,本质是使用action生成器,生成一个action,并调用dispatch触发
function getAutoDispatchActionCreator(actionCreator, dispatch) {
return function (...args) {
const action = actionCreator(...args)
dispatch(action);
}
}