如何处理 redux saga 中的请求数组答案

【问题标题】：How to handle array of requests in redux saga如何处理 redux saga 中的请求数组
【发布时间】：2017-05-21 23:39:37
【问题描述】：

我正在尝试从我的 react 本机应用程序上传多个文件。它在 yield 语句上给出 Unexpected Token 错误。

是否可以在循环内执行yield？

files.map((fileOb)=>{
 const response=yield call(FileManager.uploadFile, fileOb)
 yield put(Actions.fileUploaded(response))
})

谢谢，对不起我的英语不好

【问题讨论】：

标签： reactjs react-native redux-saga

【解决方案1】：

在上面的示例中，您在传递给files.map 的回调中屈服。它不起作用，因为您只能在 Generator 函数中使用 yield。

要处理并行请求，您可以生成效果数组

function* uploadFiles(files) {
  const responses = yield files.map(fileOb => {
    return call(FileManager.uploadFile, fileOb)
  })

  yield responses.map(response => {
    return put(Actions.fileUploaded(response))
  })
}

请注意，在这种情况下，所有调用都必须成功才能调度操作。即，直到所有调用都成功解决后才会调度操作（否则 Saga 将取消剩余的调用并引发错误）。

另一种方法（可能是您所期望的）是为每个单独的进程（调用 -> 放置）设置并行 saga。例如

function* uploadFiles(files) {
  yield files.map(file => call(uploadSingleFile, file))
}

function* uploadSingleFile(file) {
  try {
    const response = yield call(FileManager.uploadFile, file)
    yield put(Actions.fileUploaded(response))
  } catch(err) {
    yield put(Actions.fileUploadedError(response))
  }

}

在后面的示例中，只要相应的调用返回，就会分派上传操作。此外，因为我们已经用 try/catch 块包围了每个单独的进程，所以任何错误都将单独处理，不会导致其他上传进程失败

【讨论】：

【解决方案2】：

这对我来说可以将多个文件传递给 uploadSingleFile 生成器函数。

function* uploadFiles(files) {
  yield all(files.map(file => call(uploadSingleFile, file)));
}

【讨论】：

就我而言，我使用了 put（非阻塞效应） yield all(tickets?.map((ticket) => put(getQrAction({ frontUri: ticket.front, backUri: ticket.back }))))