使用Redux Saga并行获取数据

Question

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

1. 用户交互将调度操作。
2. 适当的侦听传奇现在尝试通过并行调用多个异步方法从API获取数据。
3. 在每次成功响应时，独立于其余请求，将使用检索到的数据调度操作（从而更新UI等）。
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/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');
}

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