How can I get redux-saga to wait for two actions to happen at least once in any order?

Question

Redux saga noob here.

I need to create a saga that loads the initial state for the redux store from my API server.

This involves using two async sagas: getCurrentUser and getGroups.

I need to issue these ajax requests in parallel and wait for the GET_CURRENT_USER_SUCCESS and GET_GROUPS_SUCCESS actions before issuing the pageReady action which tells the UI it's time to render the react components.

I came up with a hacky solution:

function * loadInitialState () {
  yield fork(getCurrentUser)
  yield fork(getGroups)

  while (true) {
    yield take([
      actions.GET_GROUPS_SUCCESS,
      actions.GET_CURRENT_USER_SUCCESS
    ])
    yield take([
      actions.GET_GROUPS_SUCCESS,
      actions.GET_CURRENT_USER_SUCCESS
    ])
    yield put(actions.pageReady())
  }
}

The problem with this code is that if for some reason GET_GROUPS_SUCCESS is issued twice, the pageReady action will be called to early.

How can I get redux saga to wait for GET_GROUPS_SUCCESS and GET_CURRENT_USER_SUCCESS to happen at least once in any order?

score 34 · Accepted Answer · answered Jul 09 '17 at 18:53

34

I think you want the all effect

function * loadInitialState () {
  // start loading state...

  yield all([
    take(actions.GET_GROUPS_SUCCESS)
    take(actions.GET_CURRENT_USER_SUCCESS)
  ]);

  yield put(actions.pageReady())
}

answered Jul 09 '17 at 18:53

erikvold

15,988
11
54
98

How would you do it if **any** of these 2 was required? – haxpanel Aug 24 '18 at 12:57
3

post another question. – erikvold Sep 01 '18 at 16:01
10

@haxpanel use the race effect instead of all – brietsparks Oct 19 '18 at 00:13
1

You can `const firstAction = yield take([action1, action2])` – Łukasz Ostrowski Oct 24 '19 at 06:51

How can I get redux-saga to wait for two actions to happen at least once in any order?

1 Answers1