2017-01-06 6 views
0

mapDispatchToProps関数とmapStateToProps関数を持つConnectorがあり、メインコンポーネントからアクションをディスパッチする必要があります。ReferenceError:ディスパッチが定義されていません

私は、私はfetchPlaces(this.props.user.id)

this.props.user.idは、私は、ユーザーIDを取得し、fetchPlacesにそれを渡す必要がある値1

を持っている派遣しようとしているとき、ディスパッチが定義されていないというエラーを取得していますインターンは私にユーザーの場所を与えます。私はそれを行う方法がわかりません。

コネクタ

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);

コンポーネント:

componentWillMount() { 
 
     console.log(this.props); 
 
     console.log(this.props.user.id); 
 
     dispatch(fetchPlaces(this.props.user.id)) 
 
    }

placesAction: (id) => { dispatch(fetchPlaces(id)) } doinの右構文ですそれ?

UPDATE

私はcomponentWillMountを変更:

componentWillMount() { 
 
     console.log(this.props); 
 
     console.log(this.props.user.id); 
 
     dispatch(this.props.placesAction(this.props.user.id)) 
 
    }

とmapDispatchToProps:

const mapDispatchToProps = function (dispatch) { 
 
    return { 
 
     userAction: bindActionCreators(fetchUser, dispatch), 
 
     elementsAction: bindActionCreators(fetchUser, dispatch),   
 
     placesAction: (id) => { dispatch(fetchPlaces(id)) } 
 
    } 
 
}

まだ同じエラーがあります。

+1

をしたいだけで、特定のもの*「私は必要とします私の主なコンポーネントからアクションをディスパッチする "*あなたはそれに対応する小道具を呼ぶだろう。例えば。 'this.props.placesAction(this.props.user.id)'。コンポーネント自体は 'dispatch'へのアクセス権を持たないので、コンポーネント内部でそれを呼び出そうとすると(あなたが気づいたように)失敗します。 Btw、 'userAction'と' elementsAction'に関数を割り当て、 'dispatch'をすぐに呼び出さないでください。 –

+0

これは 'placesAction:(id)=> {dispatch(fetchPlaces(id))}' –

+0

のようなものです。 –

答えて

1

あなたはこのようにすべてのあなたの小道具を共有することによって、いずれか、次のレベルにまでプロパティを渡す必要があります:

<Basicinfo {...this.props} /> 

またはあなたが

<Basicinfo placesAction={(id) => this.props.placesAction(id)} /> 
関連する問題