react-router RouteのonChangeからディスパッチを呼び出す方法は？

Question

URLクエリを使用して検索クエリを実行するWebアプリケーションを開発しています。
urlクエリーparamsに従って、検索を実行するときに新しいリクエストをサーバーに送信して新しいデータを取得する必要があります。
react-routerとReduxを使用して、dispatch関数を呼び出して、クエリ（URL変更）に従ってサーバーから新しいデータを取得します。

私はこのように、onChangeイベントを使用してdispatch機能を呼び出すように考えていた：

<IndexRoute component={Catalog} onChange={(prevState, nextState, replace) => {dispatch(fetchProducts(nextState.location.search))}}/> 

しかし、私のルートが反応構成要素ではないので、私はディスパッチ機能にアクセスするカント。
私は自分の店をインポートしてstore.dispatchを使用することができますが、それはお勧めしません。
あなたは私に何をすべきだとお考えですか？問題のこの種を解決するために

Answer 1

、私たちは常に次のような関数の中で宣言するか、ルート：

function createRoutes(store) { 
    return { 
    component: App, 
    childRoutes: [ 
     // Here are defined the other routes. 
     // They can be defined using plain objects: 
     {path: "profile", component: Profile}, 
     // Or generated through a function call: 
     ...require("./some/module")(store), 
    ] 
    } 
} 

あなたがこれを行うと、アクションを派遣したり、計算を行うためにストアを使用するために非常に簡単ですリアクタのライフサイクルのフックで

function createRoutes(store) { 
    return { 
    component: Settings, 
    onEnter: (nextState, replace, callback) => { 
     const state = store.getState() 
     if (!state.user.logged) { 
     dispatch(createNotification("You must be logged to perform this")) 
     replace("/login") 
     } 

     callback() 
    } 
    } 
}