redux-saga - Server-Side rendering with 1 async dependent on another

Question

I am trying to get my app to Server-Side render via the END effect (details on https://github.com/redux-saga/redux-saga/issues/255, with explanations why this is so tricky).

My data relies on 2 async requests: getJwtToken -> (with token data) FetchItem -> now render.

Is this possible at all?

I have spent time looking at Channels (here https://redux-saga.js.org/docs/advanced/Channels.html) and could not get any variation to work.

My Saga looks something like this (LOAD_USER_PAGE is fired initially)

function* loadUserPage() {
  yield put({type: 'JWT_REQUEST'})
  const { response } = yield call(fetchJwtToken)
  if (response) {
    yield put({type: 'JWT_REQUEST_SUCCESS', payload: response})
  }
}

function* fetchItem() {
  console.log('NEVER GETS HERE')
}

function* watchLoadPage() {
    yield takeLatest('LOAD_USER_PAGE', loadUserPage);
}

function* watchFetchItem() {
  yield takeLatest('JWT_REQUEST_SUCCESS', fetchItem);
}

export default function* rootSaga() {
  yield all([
    fork(watchLoadPage)
    fork(watchFetchItem)
  ])
}

I believe I understand why it doesn't work (due to END event fired terminating only those effects which have started, and since my 2nd effect will not be fired until my first is back, it is not included in runSaga().done promise.

By doesn't work I mean the action JWT_REQUEST_SUCCESS is fired and the runSaga.done promise runs. But my message in console.log is not fired.

I think its possible by having both requests in the same function, but I am trying to abstract the token auth part out.

Is it not possible in any way?

Really stuck.

Answer 1

EDIT: The solution was to use channels as suggested in the comment on https://github.com/redux-saga/redux-saga/issues/255#issuecomment-323747994 and https://github.com/redux-saga/redux-saga/issues/255#issuecomment-334231073.

SSR for all :)