首页 文章

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

提问于
浏览 次
0

我是一个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
  }

但是，显然， mapDispatchToProps 中的 this 未定义，因为该函数是在我的组件范围之外定义的 . 在我引用的SO帖子中，在教程材料和文档中， mapDispatchToProps 总是发送一个不依赖于组件状态/ props的动作 . 什么's the best practice for introducing a component'的状态/道具进入 mapDispatchToProps ？

javascript reactjs redux react-redux

1 回答

  • 1

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

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

    然后在调用时传递参数：

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

    在将onClick绑定到每个渲染上的函数时，请注意性能问题 . 有关详细信息，请参阅this文章 .

    回复于

相关问题