そのため、ルートのロード時に Sagas を動的に注入しています
path: '/home',
name: 'home',
getComponent(nextState, cb) {
require.ensure([],
require => {
let HomePageReducer = require('./containers/HomePage/reducer').default;
let HomePageSagas = require('./containers/HomePage/sagas').default;
let HomePage = require('./containers/HomePage').default;
injectReducer('home', HomePageReducer);
injectSagas(HomePageSagas);
cb(null, HomePage);
})
},
injectAsyncSagas
次のようになります。
export function injectAsyncSagas(store) {
return (sagas) => sagas.map(store.runSaga);
}
は、ストアの作成時に作成されますstore.runSaga
。sagaMiddleware.run
ルートが読み込まれると、サガが正常に開始されます。アクションをリッスンしています。
export function* mySagaFunction() {
console.log("Start mySagaFunction");
while (true) {
const watcher = yield race({
loadRepos: take(SOME_HOME_PAGE_ACTION),
stop: take(LOCATION_CHANGE), // stop watching if user leaves page
});
if (watcher.stop) {
console.log("Stop mySagaFunction", watcher.stop);
break;
}
//other statements here to handle SOME_HOME_PAGE_ACTION
}
ルートをロードすると、「Start mySagaFunction」がコンソールされます。SOME_HOME_PAGE_ACTION をディスパッチすると、必要なことはすべて正常に実行されます。ページを離れると、ルーターが LOCATION_CHANGE を呼び出し、Saga コンソールが「mySagaFunction を停止」して、while ループを正常に終了したことを意味します。
それから別のルートに行き、このルートに戻ってきます。今回は、予想どおり、LOCATION_CHANGE がルーターによってディスパッチされました。しかし佐賀は始まってすぐに止まる。私のコンソールは次のようになります:
Start mySagaFunction
Stop mySagaFunction
Redux 開発ツールでは、LOCATION_CHANGE が 1 つしか表示されません。Saga が開始され、すぐに停止する理由を特定するにはどうすればよいですか? ルートに戻った場合にのみ発生します。
LOCATION_CHANGEの発送が遅れているのではないかと思いました。しかし、いいえ。私のレデューサーでは、アクションタイプを慰めました。最初に LOCATION_CHANGE で Reducer が呼び出され、saga が開始され、次に saga が停止します。
ページ間を移動するために使用Link
しています。私も試しbrowserHistory.push(url)
てみdispatch(push(url))
ました。同じ結果です。
注: react-boilerplateからサガを挿入するためのコードを取得しました。私はこのコードのみを使用しており、ボイラープレート自体は使用していません。定型文を実行しましたが、このバグは発生していません。違いは次のとおりです。
selectLocationState
syncHistoryWithStore で使用しています。私の店全体は不変ではないので、それは必要ありません。- fromの
routeReducer
代わりに独自のものを使用しています。理由はわかりません。完全に不変のストアが原因かもしれません。routerReducer
react-router-redux
とにかく、定型コードで上記の2つのポイントを削除しましたが、まだシナリオは発生していません。