Xtykutl

I use redux-saga and have the following code:

function* loginFlow(username, password) {

  try {

    yield call(loginApi, username, password);

    yield put({ type: LOGIN_SUCCESS });

    yield put({ type: TOGGLE_LOGGED_DONE, payload: true });

    yield put(push('/dashboard'));

  } catch (error) {

    yield put({ type: LOGIN_ERROR, error });

  } finally {

    if (yield cancelled()) {

      console.log('ALWAYS CANCELLED');

      // yield put(replace('/login'));

    }

  }

}



// Watcher saga.

function* loginWatcher() {

  while (true) {

    const { username, password } = yield take(LOGIN_REQUESTING);

    const task = yield fork(loginFlow, username, password);

    const action = yield take([LOGOUT, LOGIN_ERROR]);

    if (action.type === LOGOUT) yield cancel(task);

    yield call(logoutUser);

  }

}

The problem is that the loginFlow function always get cancelled in the end (I see 'ALWAYS CANCELLED' in console). Even if I remove const action = yield take([LOGOUT, LOGIN_ERROR]); and yield call(logoutUser); from loginWatcher.

I can't see that either LOGOUT or LOGIN_ERROR are fired:

Any ideas what wrong with my code?

Note that I use withRouter in the index.js for login page where saga above is (else I get blank screen when redirect):

const withSaga = injectSaga({ key: 'login', saga }); 



export default compose( withReducer, withSaga, withConnect, )(LoginPage); 

Best Regards

EDIT:
If wrapping loginWatcher in try/catch I also go to finally there:

function* loginWatcher() {

  while (true) {

    try {

      const { username, password } = yield take(LOGIN_REQUESTING);

      const task = yield fork(loginFlow, username, password);

      const action = yield take([LOGOUT, LOGIN_ERROR]);

      if (action.type === LOGOUT) yield cancel(task);

      yield call(logoutUser);

    } catch (error) {

      yield put({ type: LOGIN_ERROR, error });

    } finally {

      if (yield cancelled()) {

        console.log('HERE AS WELL');

        // yield put(push('/login'));

      }

    }

  }

}

I'm posting what we've gathered as an answer, so that this question is useful for future readers.

In redux-saga, sagas started via call() and fork() are cancelled recursively. Saga means a recursively cancellable task. So when a saga gets cancelled, you should check its parent saga, and so on.

This code snippet you've posted:

const withSaga = injectSaga({ key: 'login', saga });

export default compose( withReducer, withSaga, withConnect, )(LoginPage)

Google suggests that it uses this redux-saga + react-boilerplate example. It covers cancellation and how to disable it. Check the link to find out about it.

I'm not familiar with react-boilerplate (React ecosystem is huge), but I guess my answer at least narrows down the search. Consider asking a separate question with react-boilerplate if you get confused.