在这里我们结合react-redux来介绍bindActionCreators。
在react中使用redux时,通常我们会使用react-redux库。那么为什么我们执行connect(mapStateToProps, mapDispatchToProps)(MyContainer)
后就可以通过this.props.myAction()
的方式来触发action呢?
在connect方法中对参数mapDispatchToProps做了如下处理:
export default function wrapActionCreators(actionCreators) {
return dispatch => bindActionCreators(actionCreators, dispatch)
}
mapDispatch = wrapActionCreators(mapDispatchToProps)
mappedDispatch = mapDispatch(store.dispatch, props)
bindActionCreators和bindActionCreator的核心代码:
export default function bindActionCreators(actionCreators, dispatch) {
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators, dispatch)
}
var keys = Object.keys(actionCreators)
var boundActionCreators = {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i]
var actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
}
}
return boundActionCreators
}
function bindActionCreator(actionCreator, dispatch) {
return (...args) => dispatch(actionCreator(...args))
}
由此可见,bindActionCreators最终返回的是一个对象,该对象结构如下:
{
actionName: (...args) => dispatch(actionCreator(...args))
}
然后在执行createElement时,将该对象作为属性。这样我们在执行this.props.actionName(params)时,就会执行actionCreator进而dispatch该action。