reactjs - Redux-saga はキャンセル後にアクションを呼び出します

Question

内部に redux-saga を含む React-boilerplate を実装しようとしています。そのため、サーバーからデータを取得してから、別のページにリダイレクトしようとしています。問題は、サガをリダイレクトする前に、サーバーに 2 番目の要求を行うことです。キャンセルするのは何か問題があると思います。ここに私のコードの一部があります:

export function* fetchData() {
  ...
  console.log('fetched');
  yield browserHistory.push('/another-page');
}

export function* fetchDataWatcher() {
  while (yield take('FETCH_DATA')) {
    yield call(fetchData);
  }
}

export function* fetchDataRootSaga() {
  const fetchWatcher = yield fork(fetchDataWatcher);

  yield take(LOCATION_CHANGE);
  yield cancel(fetchWatcher);
}

export default [
  fetchDataRootSaga
]

したがって、この例では 2 つのコンソール ログがあり、2 つ目はリダイレクト前に表示されます。どうすれば修正できますか？

そして別の質問です。実際には、このファイルにはさらに多くの機能があります。それらのそれぞれに「rootSaga」を作成する必要がありますか、それともその fetchDataRootSaga() でそれらをすべてキャンセルできますか? この方法でサガをキャンセルするのは正常ですか:

export function* fetchDataRootSaga() {
  const watcherOne = yield fork(fetchDataOne);
  const watcherTwo = yield fork(fetchDataTwo);
  ...

  yield take(LOCATION_CHANGE);
  yield cancel(watcherOne);
  yield cancel(watcherTwo);
  ...
}

前もって感謝します！PS このコードがベスト プラクティスであるかどうかはわかりません。このリポジトリに触発されています