结合react-redux来介绍bindActionCreators

在这里我们结合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。