How to handle array of requests in redux saga

Question

I am tring to upload multiple files from my react native app. It's giving Unexpected Token error on yield statement.

Is it possible to do yield inside a loop?

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

Thanks, Sorry for my bad English

Hygienic

Answer 1

In your example above, you're yielding inside the callback passed to files.map. It doesn't work because you can use yield only inside a Generator function.

To handle parallel requests, you can either yield arrays of effects

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

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

Note that in this case all calls must succeed in order to dispatch the actions. i.e. the actions will not be dispatched until all calls are resolved with success (otherwise the Saga will cancel the remaining calls and raise an error).

Another way (perhaps what you'd expect) is to have parallel sagas for each individual process (call -> put). For example

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

}

In the later example, an upload action will be dispatched as soon as the corresponding call has returned. Also because we've surrounded each individual process with a try/catch block, any errors will be handled individually and won't cause the other upload processes to fail

Ruthi

Answer 2

This worked for me to pass multiple files to uploadSingleFile generator function.

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

Keloid

in my case, I have used put (not blocking effect) yield all(tickets?.map((ticket) => put(getQrAction({ frontUri: ticket.front, backUri: ticket.back })))) – Alliteration