How to cancel all running sagas when navigating between page views

问题

I'm trying to find a simple and easy way to cancel all running sagas within a "page" when the user decides to navigate to another "page" within the app... We are not using routing, but instead each "page" is its own widget within a larger host application that is responsible for creating and loading each page when the user navigates...

Currently, we are using redux-saga and have setup logic like so (simplified for brevity) when a page widget is created and loaded...

// page-sagas
export function* rootSaga() {
  const allSagas = [
    // ... all sagas used by page (example) ...
    // function* watchFoo() {
    //   yield takeEvery(FooAction, foo);
    // }
  ];
  yield all(allSagas.map((saga) => call(saga)));
}

// page-widget
onLoad = () => {
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(reducer, initState, applyMiddlware(sagaMiddleware));
  sagaMiddleware.run(rootSaga);
}

Ideally, I'd prefer to avoid having to add forking logic to every single saga in every single page-widget, and looking at the Redux-Saga Task API, it says you can cancel a task returned by the call to middleware.run, but I'm wondering if this propagates down to all nested / child sagas that are currently in progress, or if there are any issues / gotcha's I should be aware of:

Example:

// page-widget
onLoad = () => {
  ...
  this.task = sagaMiddlware.run(rootSaga);
}

destroy = () => {
  this.task.cancel();
}

来源：https://stackoverflow.com/questions/57912518/how-to-cancel-all-running-sagas-when-navigating-between-page-views