javascript - 在 Redux mapDispatchToProps 中使用组件状态或 props

Question

我是一个 Redux/React 初学者，仍在尝试将我的知识包裹在 Redux 生态系统中的 dispatch 组件中。到目前为止，我在组件中发出 Redux 操作的方式是直接调用组件 props 的 dispatch() 函数:

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

export default connect(mapStateToProps)(SearchForm);

然后，我有一个与 onClick 事件绑定(bind)的处理函数:

  handleOptionChange(changeEvent) {

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

但是，我一直在尝试实现mapDispatchToProps。这个SO post描述了使用 mapDispatchToProps 而不是简单地使用 this.props.dispatch 的一些好处。但是，我一直在努力寻找一种将组件 Prop 或状态集成到 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
  }

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

Answer 1

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

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

然后调用时传递参数:

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

在每次渲染时将 onClick 绑定(bind)到函数时请注意性能问题。请参阅this文章了解更多信息。