Reactjs 如何使用带 Redux 的连接从 this.props 获得简单的调度

默认情况下，mapDispatchToProps只是dispatch => ({ dispatch })

如果将自定义函数传递给mapDispatchToProps，则可以对该函数执行任何操作

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

为了节省一些时间，Redux提供了bindActionCreators()个选项，让您可以:

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

对此:

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

当props 名称与动作创建者名称匹配时，甚至更短:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

如果您愿意，可以手动添加dispatch:

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

对于你是否应该这样做没有官方建议.connect()通常是Redux-aware和Redux-unaware组件之间的边界.这就是为什么我们通常觉得注入both个绑定动作创作者和dispatch个绑定动作创作者是没有意义的.但如果你觉得有必要这么做，请随意.

最后，你现在使用的模式是一种比拨打bindActionCreators还短的快捷方式.当您只需返回bindActionCreators时，可以省略调用，而不是执行以下操作:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

可以这样写

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

然而，当你想要更定制的东西时，比如通过dispatch，你就必须放弃这个漂亮的简短语法.