React Routerを使用している場合、Reduxコンテナにアクションをディスパッチするにはどうすればよいですか？

Question

現在、React、React Router、およびReduxを使用してSPAを実装しようとしています。

このシナリオでは、同じ親プレゼンテーションコンポーネントとコンテナコンポーネントを共有する2つの階層ルートがありますが、URLに基​​づいて異なる「子」プレゼンテーションコンポーネントがレンダリングされます。例えば

：

/widgets/:slug - >親+ウィジェット詳細ページ

/widgets/:slug/things/:thing - >親+シングの詳細ページ

私は一緒に親をレンダリングするコンテナコンポーネントを作成しました子供。私がいる問題は、コンテナコンポーネントから例えばfetchWidgets(slug)（私はアクションをディスパッチする必要があると思うことmapStateToPropsは下プレゼンテーションコンポーネントに適用小道具（例えばwidgetとthing）を送信渡すようなものである。

何私は私が実際にアクションをディスパッチできるように、同じ場所でdispatchメソッド参照およびprops.params.slugまたはprops.params.thingプロパティ参照の両方を取得する方法で見つけ出すことはできません。

Answer 1

をあなたは合格するReduxのが提供する接続機能を使用する必要がありますあなたの容器に小道具として&の発送をしてください。

const mapStateToProps = (state) => { 
    return { 

    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     action:() => dispatch(actionGenerator()) 
    } 
}; 

export default Container = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Component); 

Answer 2

アクションクリエイターの呼び出しを1か所で保持したい場合は、小道具を介して子コンポーネントに送ることができます。

<Parent 
    { ...bar } 
    foo={ x => actions.handlefoo(x) } 
/> 

---

const Child = ({ 
    barOne 
    barTwo 
    foo 
}) => 
<div> 
    <input onChange={ foo() } /> 
    {barOne} 
    {barTwo} 
</div> 

明らかにこれは擬似コードですが、それはそれはあなたの子コンポーネントに、関数を含む、任意の型の変数/オブジェクトを渡すことがいかに簡単で実証しなければなりません。