使用 Redux Saga 并行获取数据

Question

我想知道在 Redux Saga 中实现以下行为的正确方法是什么：

1. 操作由用户交互分派。
2. 适当的监听传奇现在尝试通过并行调用多个异步方法从 API 获取数据。
3. 在每次成功响应时，独立于其余请求，将使用检索到的数据分派一个操作（从而更新 UI 等）。
4. 收集错误响应，然后在所有请求完成后通过单个操作进行分派（例如，以便稍后显示单个错误 Toast）。

我已经通过使用以下模式成功实现了它（对不起，我缺少完整的代码示例，目前不可用）：

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/docs/advanced/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');
}

对于错误处理，您可以从生成器中抛出错误并在主 saga 中处理它。