javascript - 使用 Redux Saga 并行获取数据

Question

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

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

我已经通过使用以下模式成功地实现了它(抱歉，我缺少完整的代码示例，目前不可用):

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

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