ReferenceError : Dispatch is not defined

Question

I have a Connector, which has mapDispatchToProps and mapStateToProps functions, and I need to dispatch a action from my main component.

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 :

componentWillMount() {
        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 componentWillMount :

componentWillMount() {
        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.

Answer 1

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)} />