React Router + Redux - 経路変更に非同期アクションをディスパッチしますか？

Question

私はreduxと反応ルータを使用している普遍的な反応アプリを持っています。

次のように私はいくつかの経路を持っている：

/2016 
/2015 
/2014 
/2013 

など

各ルートには、APIからのデータを必要とします。現在、Navigationコンポーネントの<Link>要素に、非同期アクションonClickが送信され、そのルートのAPIのデータがストアに格納されます。

MVPの場合は、ルートに変更があったときに新しい投稿コンテンツを店舗のpost: {}のコンテンツに上書きしています。これにより、APIに新しいコンテンツが追加されます。

<Link>ボタンのアクションディスパッチャを使用することは最適ではありません。前のルートのコンテンツを取得するために、アクションボタンを押してもアクションディスパッチは再トリガーされません。

ルート変更が発生したときに、リザルトルータがディスパッチアクションを開始する方法はありますか？ （特定のルートセットを聞くことを制限するとボーナスになります）。

は、私は私が店からの歴史を取得する必要があります実現が、今のところ、それは新しいコンテンツを得るために行動派遣をトリガすることによって、再びAPIをヒットする方が簡単です。

乾杯。

Answer 1

はいリアクタには、onEnterフックとonLeaveフックがあります。あなたはこれらのヘルパーでそれにアクセスできるように、あなたのstoreインスタンスを取るためにあなたのルートを構築することができ：

const createRoutes = (store) => { 
    const fetchPosts =() => store.dispatch({ 
    types: ['FETCH_POSTS', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAIL', 
    url: '/posts' 
    }); 

    return (
    <Route path="/" component={App}> 
     <Route path="posts" component={PostList} onEnter={fetchPosts}/> 
     <Route path="posts/:id" component={PostDetail} /> 
    </Route> 
) 
} 

より良い解決策がredialまたはredux-async-connectのようなものを使用することです。これにより、ネットワークに触れずにコンポーネントをテストする機能を維持しながら、コンポーネントのデータ依存関係をコンポーネントと同じ場所に配置することができます。