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

时间:2017-01-07 06:53:01

标签: reactjs react-native redux-saga

我想从我的本机应用程序上传多个文件。它在收益表上给出Unexpected Token错误。

是否可以在循环中执行yield

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

谢谢, 抱歉我的英文不好

2 个答案:

答案 0 :(得分:14)

在上面的示例中,您在传递给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将取消剩余的呼叫并引发错误)。

另一种方式(也许你期望的)是为每个单独的进程(call - > put)提供并行传奇。例如

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块包围每个单独的进程,所以任何错误都将单独处理,不会导致其他上载进程失败

答案 1 :(得分:0)

这对我将多个文件传递给uploadSingleFile 生成器函数很有用。

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