Получать данные параллельно, используя Redux Saga

Question

Я хочу знать, как правильно в Redux Saga добиться следующего поведения:

1. Действие отправляется взаимодействием с пользователем.
2. Соответствующая сага о прослушивании теперь пытается извлечь данные из API, вызвав несколько асинхронных методов параллельно.
3. При каждом успешном ответе независимо от остальных запросов отправляется действие с извлеченными данными (таким образом, обновляется пользовательский интерфейс и т. Д.).
4. Ошибочные ответы собираются и затем отправляются одним действием после того, как все запросы завершены (например, для последующего показа одного сообщения об ошибке).

Я успешно реализовалиспользуя следующий шаблон (извините, у меня нет полных примеров кода, в данный момент он недоступен):

function* fetchData(dataType) {
  const resp = yield call(MyApi.fetchData, dataType);
  if(!resp.err) {
    yield put(fetchDataSuccess, resp.data);
  } else {
    return resp.err;
  }
}

function* mySaga() {
  const errors = yield all([
    call(fetchData, 'typeOne'),
    call(fetchData, 'typeTwo),
    call(fetchData, 'typeThree)
  ]);
  // errors contains the returned errors
}

Это лучший способ достичь желаемого эффекта?

Answer 1

Вы можете использовать fork эффект для одновременной отправки запросов https://redux -saga.js.org / документы / расширенный / ForkModel.html

Так ваш код станет похож на

function* fetchData(dataType) {
  const resp = yield call(MyApi.fetchData, dataType);
  if(!resp.err) {
    yield put(fetchDataSuccess, resp.data);
  } else {
    return resp.err;
  }
}

function* mySaga() {
 yield fork(fetchData, 'typeOne');
 yield fork(fetchData, 'typeTwo');
 yield fork(fetchData, 'typeThree');
}

Для обработки ошибок вы можете выбросить ошибку из генератора и обработать ее в основной саге.