When cancelling a saga task with ejectSaga, yield cancelled() isn't triggering - reactjs

Question

I'm using the react-boilerplate injectSaga/ejectSaga functionality (reference) and I'm running into an issue trying to cancel my saga.
tl;dr - When the component with the injected saga is unmounted, the saga cancellation occurs via task.cancel(), but this isn't triggering in the actual saga itself (i.e., yield cancelled() is not triggering)
I inject my saga into my container like so (using react-router v4 and redux):
const enhance = compose(
withRouter, // from react-router 4
injectSaga({ key: 'stuffDirectory', saga: stuffDirectorySaga }),
connect(mapStateToProps, mapDispatchToProps),
// other things that we're composing
);
The injectSaga function performs the following magic:
export default ({ key, saga, mode }) => WrappedComponent => {
class InjectSaga extends React.Component {
static WrappedComponent = WrappedComponent;
static contextTypes = {
store: PropTypes.object.isRequired,
};
static displayName = `withSaga(${WrappedComponent.displayName ||
WrappedComponent.name ||
'Component'})`;
componentWillMount() {
const { injectSaga } = this.injectors;
injectSaga(key, { saga, mode }, this.props);
}
componentWillUnmount() {
const { ejectSaga } = this.injectors;
ejectSaga(key);
}
injectors = getInjectors(this.context.store);
render() {
return <WrappedComponent {...this.props} />;
}
}
return hoistNonReactStatics(InjectSaga, WrappedComponent);
};
Here is my saga (pretty straightforward):
export function* watchSizesDraftsSaga() {
try {
let stuffWeLookingFor = yield select(selectStuff());
// waiting for stuff here
yield put( moveStuffOver(stuffWeLookingFor) );
// everything works fine here, page works as expected and stuff has been found
} finally {
if (yield cancelled()) {
// PROBLEM: when the saga is ejected via ejectSaga, this condition never happens
yield put( cleanStuffUp() );
}
}
}
The saga injection works correctly - every time the component mounts, I can clearly see the actions being called and caught in redux. In the specific sagaInjectors.js file from react-boilerplate, I've found the specific line that cancels injected sagas:
if (Reflect.has(store.injectedSagas, key)) {
const descriptor = store.injectedSagas[key];
if (descriptor.mode && descriptor.mode !== DAEMON) {
// the task is cancelled here
descriptor.task.cancel();
// we verify that the task is cancelled here - descriptor.task.isCancelled() returns true if we log it
// Clean up in production; in development we need `descriptor.saga` for hot reloading
if (process.env.NODE_ENV === 'production') {
// Need some value to be able to detect `ONCE_TILL_UNMOUNT` sagas in `injectSaga`
store.injectedSagas[key] = 'done'; // eslint-disable-line no-param-reassign
}
}
}
My yield cancelled() block is never running despite the task successfully being cancelled. Is there something I'm missing regarding how saga cancellation works? Is there an easy way for me to easily handle my saga clean up logic for whenever a saga is about to be cancelled?

Answer 1

I think you misunderstand how task cancellation works in redux-saga.
Your task corresponding to watchSizesDraftsSaga() completes on its own.
Then task.cancel() does nothing.
yield cancelled() block will only execute if you cancel a task when it is still running.