React/ReduxアプリケーションでXHRとルート変更に最も便利なパターン

Question

React + Reduxアプリケーションで作業しており、その中に検索機能があります。 UIに関しては、それは他の検索エンジンと非常によく似ています - ホームページと検索結果ページがあります。

検索結果を得るには、アクションタイプとデータを持つオブジェクトを返すアクションrequestSearchがあります。それはredux-sagaによってキャプチャされます。ここでAPIにリクエストを行い、レスポンスを処理し、減速機によってキャプチャされた検索結果で新しいアクションをディスパッチします。しかし、それは問題ではありません。

質問はどこから始めるのですか？また、ここでルーティングするのに最適な場所は何ですか（react-router v3）、どこで経路を変更しますか？明らかに、私はここで重要な何かを逃しているので、良いパターンについて尋ねています。 は、これまでのところ私はそれを実装するための2つの方法を試みた：

• を呼び出し、検索フォーム上のrequestSearchアクションが提出した後、history.pushで ルートを変更します（）;
• 経路を変更し、検索結果のページコンテナから requestSearchを呼び出してください。

私はこれらのソリューションに満足できません。 助け、提案、または批評をいただければ幸いです。

Answer 1

•検索フォームのsubmitSearchアクションを実行し、history.push（）;を使用して ルートを変更します。

OK、これに対して、このタスクの決定に近づき、いくつかの瞬間を考慮することができます。まず、反応ルータを使用する場合は、history.pushのような直接呼び出しを行う必要はありません。代わりに、konsistentyを使用し、そこにプッシュ機能を必要とする箇所にhttps://github.com/reactjs/react-router-reduxを置く必要があります。

第二に、Reduxの-佐賀でストアにアクションをプッシュするのアクセスがあった - 現在のケースでは、適切なURLとreact-router-reduxアクションpush次のようになります。

import { routerMiddleware, push } from 'react-router-redux' 

// Apply the middleware to the store 
const middleware = routerMiddleware(browserHistory) 
const store = createStore(
    reducers, 
    applyMiddleware(middleware) 
) 

// Dispatch from anywhere like normal. 
store.dispatch(push('/foo')) 

次のよう

import { push } from 'react-router-redux' 
yield put(push('/foo')) 

セットアップお店