在Redux mapDispatchToProps中使用组件状态或道具

Question

我是Redux / React的初学者，仍在尝试围绕Redux生态系统中的dispatch组件进行操作。 到目前为止，我在组件内发出Redux动作的方式是直接调用组件props的dispatch()函数：

const mapStateToProps = (state) => {
  return {searchType: state.searchType}
}

export default connect(mapStateToProps)(SearchForm);

然后，我有一个与onClick事件onClick的处理函数：

  handleOptionChange(changeEvent) {

    this.setState({selectedOption: changeEvent.target.value});
    this.props.dispatch(setSearchType(this.state.selectedOption));
  }

但是，我一直在尝试实现mapDispatchToProps 。 这篇SO帖子描述了使用mapDispatchToProps而不是仅this.props.dispatch一些好处。 但是，我一直在努力寻找一种方法来将我的组件道具或状态集成到mapDispatchToProps 。 我想写这样的东西：

const mapDispatchToProps = (dispatch) => {
  return {
    setSearchType : dispatch(setSearchType(this.props.option))
  }
}

this.props.option是向下传递的道具，用于标识为特定按钮（在此为单选按钮）选择的配置。 然后只需调用：

  handleOptionChange(changeEvent) {

    this.setState({selectedOption: changeEvent.target.value});
    this.props.setSearchType(); // <--- this line is new
  }

然而，很明显， this在mapDispatchToProps未定义，因为该函数是我的组件的范围之外定义。 在我引用的SO帖子以及教程材料和文档中， mapDispatchToProps始终发送不依赖于组件状态/ mapDispatchToProps的动作。 将组件的状态/ mapDispatchToProps引入mapDispatchToProps的最佳实践是什么？

Answer 1

只需将调度程序定义为接受props作为参数的函数即可：

const mapDispatchToProps = (dispatch) => {
  return {
    setSearchType : option => dispatch(setSearchType(option))
  }
}

然后在调用它时传递参数：

this.props.setSearchType(this.props.option)

但是在将onClick绑定到每个渲染上的函数时会引起性能问题。 请参阅本文章以获得更多信息。