javascript - ReferenceError : Dispatch is not defined - Stack Overflow

admin管理员组

文章数量:1324827

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.

• javascript
• reactjs
• react-redux
• redux-thunk

Share Improve this question Follow edited Jan 6, 2017 at 22:18 Deepak Bandi asked Jan 6, 2017 at 22:02 Deepak BandiDeepak Bandi 1,90444 gold badges2222 silver badges3737 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 to dispatch so trying to call it inside the ponent will only fail (as you noticed). Btw, you should assign functions to userAction and elementsAction, not call dispatch 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

 |  Show 11 more ments

1 Answer 1

Sorted by: Reset to default 4

You 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