[英]Working with component state or props inside Redux mapDispatchToProps
I'm a Redux/React beginner still trying to wrap my held around the component of dispatch
within the Redux ecosystem. 我是Redux / React的初学者,仍在尝试围绕Redux生态系统中的dispatch
组件进行操作。 So far, the way I've issued Redux actions within my components is by directly calling the dispatch()
function of my component props: 到目前为止,我在组件内发出Redux动作的方式是直接调用组件props的dispatch()
函数:
const mapStateToProps = (state) => {
return {searchType: state.searchType}
}
export default connect(mapStateToProps)(SearchForm);
And then, I have a handler function tied to an onClick
event: 然后,我有一个与onClick
事件onClick
的处理函数:
handleOptionChange(changeEvent) {
this.setState({selectedOption: changeEvent.target.value});
this.props.dispatch(setSearchType(this.state.selectedOption));
}
However, I've been trying to implement mapDispatchToProps
instead. 但是,我一直在尝试实现mapDispatchToProps
。 This SO post describes some of the benefits to using mapDispatchToProps
instead of simply this.props.dispatch
. 这篇SO帖子描述了使用mapDispatchToProps
而不是仅this.props.dispatch
一些好处。 However, I've struggling to find a way to integrate my component props or state into mapDispatchToProps
. 但是,我一直在努力寻找一种方法来将我的组件道具或状态集成到mapDispatchToProps
。 I want to write something like this: 我想写这样的东西:
const mapDispatchToProps = (dispatch) => {
return {
setSearchType : dispatch(setSearchType(this.props.option))
}
}
this.props.option
is a prop passed down to identify the configuration being selected for a particular button (in this a Radio Button). this.props.option
是向下传递的道具,用于标识为特定按钮(在此为单选按钮)选择的配置。 And then simply call: 然后只需调用:
handleOptionChange(changeEvent) {
this.setState({selectedOption: changeEvent.target.value});
this.props.setSearchType(); // <--- this line is new
}
However, clearly, this
in mapDispatchToProps
is undefined, since the function is defined outside the scope of my component. 然而,很明显, this
在mapDispatchToProps
未定义,因为该函数是我的组件的范围之外定义。 In the SO post I referenced, and in the tutorial materials and documentation, mapDispatchToProps
is always sending an action that does not rely on a component state/props. 在我引用的SO帖子以及教程材料和文档中, mapDispatchToProps
始终发送不依赖于组件状态/ mapDispatchToProps
的动作。 What's the best practice for introducing a component's state/props into mapDispatchToProps
? 将组件的状态/ mapDispatchToProps
引入mapDispatchToProps
的最佳实践是什么?
Simply define your dispatcher as a function that accepts the props as parameter: 只需将调度程序定义为接受props作为参数的函数即可:
const mapDispatchToProps = (dispatch) => {
return {
setSearchType : option => dispatch(setSearchType(option))
}
}
Then pass the parameter when calling it: 然后在调用它时传递参数:
this.props.setSearchType(this.props.option)
Mind performance issues though when binding onClick to a function on every render. 但是在将onClick绑定到每个渲染上的函数时会引起性能问题。 See this article for more info. 请参阅本文章以获得更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.