CODEWITHSUNDEEP
javascriptreduxredux-saga
Sergei Basharov
Sergei Basharov

Reputation: 53850

How to make sure all actions are performed after some action is fired with Saga?

I have some initial data that is loaded from server on start of the application.

It loads and then fires an action like InitialDataLoaded.

This data is saved to a state and is used for all future communications with server.

While the app is loading that data, some other requests can be sent by takeEvery(action). If initial data is not available by the moment, I cannot send these requests as they don't make sense without initial data in them.

How do I make sure that all dependent actions cause requests only when the needed action is fired?

Upvotes: 0

Views: 44

Answers (1)

brub
brub

Reputation: 1153

I'm not sure if the other requests that can be sent to takeEvery are initiated by the UI (in which case you would want to disable the UI by checking some prop if the initial data is loaded).

But if you are talking about within the saga, you can wait for the InitialDataLoaded action like this:

function* watchAppInit() {
  while (true) {
    // when this completes it dispatches the InitialDataLoaded action
    yield fork(loadInitialData); 

    yield take(actionTypes.InitialDataLoaded);

    // this won't execute until InitialDataLoaded action is dispatched
    yield fork(doOtherStuff);
  }
}

or you can check the state in the other actions:

function* watchDoOtherStuff() {
  while (true) {
    const action = yield take(actionTypes.DO_OTHER_STUFF);

    // check the state to see if you have initial data
    const initialized = yield select(selectors.getInitialDataLoaded);

    if (initialized) {
      yield fork(doIt);
    }
  }
}

Upvotes: 1

Related Questions