在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綁定到每個渲染上的函數時會引起性能問題。 請參閱本文章以獲得更多信息。