admin管理员组文章数量:1323715
I have a Connector, which has mapDispatchToProps and mapStateToProps functions, and I need to dispatch a action from my main ponent.
I'm getting an error saying dispatch is not defined when I'm trying to dispatch fetchPlaces(this.props.user.id)
this.props.user.id
has value 1.
I need to get the user id and pass it to fetchPlaces, which intern gets me the places of the user. I'm not sure how to do it.
Connector
const mapStateToProps = function (store) {
return {
elements: store.elements.elements,
places: store.places.places,
geocode : store.geocode.geocode,
user : store.user.user
};
};
const mapDispatchToProps = function (dispatch) {
return {
userAction : dispatch(fetchUser()),
elementsAction : dispatch(fetchCategories()),
placesAction: (id) => { dispatch(fetchPlaces(id)) }
}
}
class BasicinfoConnector extends React.Component{
render() {
console.log(this.props.user);
if(typeof this.props.user.id != "undefined"){
return (
<Basicinfo elements={this.props.elements} places={this.props.places} geocode={this.props.geocode} user={this.props.user}/>
);
}
else{
return null;
}
}
}
export default Redux.connect(mapStateToProps, mapDispatchToProps)(BasicinfoConnector);
I have a Connector, which has mapDispatchToProps and mapStateToProps functions, and I need to dispatch a action from my main ponent.
I'm getting an error saying dispatch is not defined when I'm trying to dispatch fetchPlaces(this.props.user.id)
this.props.user.id
has value 1.
I need to get the user id and pass it to fetchPlaces, which intern gets me the places of the user. I'm not sure how to do it.
Connector
const mapStateToProps = function (store) {
return {
elements: store.elements.elements,
places: store.places.places,
geocode : store.geocode.geocode,
user : store.user.user
};
};
const mapDispatchToProps = function (dispatch) {
return {
userAction : dispatch(fetchUser()),
elementsAction : dispatch(fetchCategories()),
placesAction: (id) => { dispatch(fetchPlaces(id)) }
}
}
class BasicinfoConnector extends React.Component{
render() {
console.log(this.props.user);
if(typeof this.props.user.id != "undefined"){
return (
<Basicinfo elements={this.props.elements} places={this.props.places} geocode={this.props.geocode} user={this.props.user}/>
);
}
else{
return null;
}
}
}
export default Redux.connect(mapStateToProps, mapDispatchToProps)(BasicinfoConnector);
Component :
ponentWillMount() {
console.log(this.props);
console.log(this.props.user.id);
dispatch(fetchPlaces(this.props.user.id))
}
Is placesAction: (id) => { dispatch(fetchPlaces(id)) }
the right syntax of doing it?
UPDATE
I changed ponentWillMount
:
ponentWillMount() {
console.log(this.props);
console.log(this.props.user.id);
dispatch(this.props.placesAction(this.props.user.id))
}
and mapDispatchToProps :
const mapDispatchToProps = function (dispatch) {
return {
userAction: bindActionCreators(fetchUser, dispatch),
elementsAction: bindActionCreators(fetchUser, dispatch),
placesAction: (id) => { dispatch(fetchPlaces(id)) }
}
}
Still have the same error.
Share Improve this question edited Jan 6, 2017 at 22:18 Deepak Bandi asked Jan 6, 2017 at 22:02 Deepak BandiDeepak Bandi 1,9044 gold badges22 silver badges37 bronze badges 16-
1
"I need to dispatch a action from my main ponent" You would be calling the corresponding prop for that. E.g.
this.props.placesAction(this.props.user.id)
. The ponent itself doesn't have access todispatch
so trying to call it inside the ponent will only fail (as you noticed). Btw, you should assign functions touserAction
andelementsAction
, not calldispatch
right away. – Felix Kling Commented Jan 6, 2017 at 22:08 -
So something like
placesAction: (id) => { dispatch(fetchPlaces(id)) }
– Deepak Bandi Commented Jan 6, 2017 at 22:16 - You already have that and that's correct. – Felix Kling Commented Jan 6, 2017 at 22:18
- Oki, so I added bindActionCreators, got the reference from github./reactjs/react-redux/issues/89 – Deepak Bandi Commented Jan 6, 2017 at 22:19
- @FelixKling Updated the changes, still the error exists. Am I missing anything else? – Deepak Bandi Commented Jan 6, 2017 at 22:23
1 Answer
Reset to default 4You need to pass the property down to the next level, either by sharing all your props like this:
<Basicinfo {...this.props} />
or only the particular ones that you want
<Basicinfo placesAction={(id) => this.props.placesAction(id)} />
本文标签: javascriptReferenceErrorDispatch is not definedStack Overflow
版权声明:本文标题:javascript - ReferenceError : Dispatch is not defined - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742124713a2421884.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论