Question

我是一个Redux / React的初学者，仍然试图将我在Redux生态系统中的dispatch组件包围起来。到目前为止，我在组件中发布Redux操作的方法是直接调用组件props的dispatch()函数：

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

export default connect(mapStateToProps)(SearchForm);

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

  handleOptionChange(changeEvent) {

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

但是，我一直在尝试实施mapDispatchToProps。此SO post描述了使用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总是发送一个不依赖于组件状态/ props的动作。将组件的状态/道具引入mapDispatchToProps的最佳做法是什么？

Answer 1

只需将您的调度程序定义为接受道具作为参数的函数：

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

然后在调用时传递参数：

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

在将onClick绑定到每个渲染上的函数时，请注意性能问题。有关详细信息，请参阅Generating all permutation of a character array文章。

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

1 个答案: