2

そのため、ルートのロード時に 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.runSagasagaMiddleware.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からサガを挿入するためのコードを取得しました。私はこのコードのみを使用しており、ボイラープレート自体は使用していません。定型文を実行しましたが、このバグは発生していません。違いは次のとおりです。

  • selectLocationStatesyncHistoryWithStore で使用しています。私の店全体は不変ではないので、それは必要ありません。
  • fromのrouteReducer代わりに独自のものを使用しています。理由はわかりません。完全に不変のストアが原因かもしれません。routerReducerreact-router-redux

とにかく、定型コードで上記の2つのポイントを削除しましたが、まだシナリオは発生していません。

4

1 に答える 1