如何使用connect wRedux从this.props获取简单的调度？

如何使用connect w / Redux从this.props获取简单的调度？

默认情况下

mapDispatchToProps

是

dispatch => ({ dispatch })

。
因此，如果您不指定的第二个参数

connect()

，则会将其

dispatch

作为prop注入到组件中。

如果您将自定义函数传递给

mapDispatchToProps

，则可以使用该函数执行任何 *** 作。
一些例子：

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

为了节省您的输入，Redux提供

bindActionCreators()

了以下功能：

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

到这个：

import { bindActionCreators } from 'redux';// injects onPlusClick, onMinusClickfunction mapDispatchToProps(dispatch) {  return bindActionCreators({    onPlusClick: increment,    onMinusClick: decrement  }, dispatch);}

当道具名称与动作创建者名称匹配时，甚至更短：

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

如果您愿意，绝对可以

dispatch

手动添加：

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

没有官方建议您是否应该这样做。

connect()

通常用作支持Redux的组件和不支持Redux的组件之间的边界。这就是为什么我们通常觉得它没有意义注入
两个 有时限的行动创造者和

dispatch

。但是，如果您觉得需要这样做，请随意。

最后，您现在使用的模式是一个快捷方式，它甚至比call更短

bindActionCreators

。当您要做的只是return时

bindActionCreators

，您可以忽略呼叫，而不是这样做：

// injects increment and decrementfunction 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

。