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

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