欢迎关注redux源码分析系列文章:
bindActionCreators.js文件算是非常简单的一个文件了,该文件就实现一个目的:以前这样触发一个action,即dispatch(actionCreator(args)),现在变成这样触发一个action: boundActionCreator(args)。目的很单纯,简化某个action的调用。
实现上面那个效果,仅需一行代码,也就是源码文件中的第一个函数:
function bindActionCreator(actionCreator, dispatch) { return (...args) => dispatch(actionCreator(...args))}
但是bindActionCreators.js文件对外提供的并不是上面的函数,而是另外一个,源码如下:
export default function bindActionCreators(actionCreators, dispatch) { //如果actionCreators是一个函数,则说明只有一个actionCreator,那直接调用bindActionCreator就行了 if (typeof actionCreators === 'function') { return bindActionCreator(actionCreators, dispatch) } //如果是actionCreator是对象,或者是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"?` ) } //保持actionCreators里面原来的key,只是把key对应的value都转成了boundActionCreator const keys = Object.keys(actionCreators) const boundActionCreators = {} for (let i = 0; i < keys.length; i++) { const key = keys[i] const actionCreator = actionCreators[key] //只对value是函数的key进行转换,其他的都过滤掉了 if (typeof actionCreator === 'function') { boundActionCreators[key] = bindActionCreator(actionCreator, dispatch) } } //返回绑定之后的对象 return boundActionCreators}
这个函数做的事情也很简单,只是把actionCreators这个对象里面包含的每一个actionCreator按照原来的key的方式全部都封装了一遍而已,具体看代码喽
完整解析请参考我的github:,如果对您有帮助,欢迎star,有任何问题也请指正。