Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

258
Views
How to handle array of requests in redux saga

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

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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

function* uploadFiles(files) {
  yield all(files.map(file => call(uploadSingleFile, file)));
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!