CODEWITHSUNDEEP
javascriptreactjspromisereact-reduxredux-saga
Patrickkx
Patrickkx

Reputation: 1870

Do not fail whole task even if one of promises rejected

In redux saga if we want to handle multiple promises, we can use all (which is equivalent of Promise.all):

yield all(
   users.map((user) => call(signUser, user)),
);

function* signUser() {
   yield call(someApi);
   yield put(someSuccessAction);
}

The problem is, even if one of the promises (calls) fail, the whole task is cancelled.

My goal is to keep the task alive, even if one of the promises failed.

In pure JS I could handle it with Promise.allSettled, but whats the proper way to do it in redux saga?

Edit: still didnt find any suitable solution, even if I wrap the yield all in try... catch block, still if even one of the calls failed, whole task is canceled.

Upvotes: 7

Views: 2295

Answers (3)

Swapnil Navalakha
Swapnil Navalakha

Reputation: 319

I was able to do it the old school way Promise.allSettled()!

const promises = [];
users.map((user) => promises.push(call(signUser, user)));


function* signUser() {
  let responses = [];
  responses = yield(yield Promise.allSettled(promises)));
  // filter the onces which are successfull unsuccessfull once don't have value
  responses = responses.filter(response => response.value);
}

Upvotes: 0

Lin Du
Lin Du

Reputation: 102347

You can implement it by yourself. There is a PR. See below example:

import { all, put, call, takeLatest } from 'redux-saga/effects';
import { createStoreWithSaga } from '../../utils';

const someSuccessAction = { type: 'SIGN_USER_SUCCESS' };

function someApi(user) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (user < 5) {
        resolve('success');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

const allSettled = (effects) =>
  all(
    effects.map((effect) =>
      call(function* settle() {
        try {
          return { error: false, result: yield effect };
        } catch (err) {
          return { error: true, result: err };
        }
      }),
    ),
  );

function* batchSignUser(action) {
  const r = yield allSettled(action.payload.users.map((user) => call(signUser, user)));
  console.log(r);
}

function* signUser(user) {
  const r = yield call(someApi, user);
  yield put(someSuccessAction);
  return r;
}

function* watchBatchSignUser() {
  yield takeLatest('SIGN_USER', batchSignUser);
}
const store = createStoreWithSaga(watchBatchSignUser);

const users = [1, 2, 3, 4, 5, 6, 7];
store.dispatch({ type: 'SIGN_USER', payload: { users } });

The execution result:

[
  { error: false, result: 'success' },
  { error: false, result: 'success' },
  { error: false, result: 'success' },
  { error: false, result: 'success' },
  { error: true, result: 'failed' },
  { error: true, result: 'failed' },
  { error: true, result: 'failed' }
]

Upvotes: 1

AmerllicA
AmerllicA

Reputation: 32532

Actually, you should change your array of Promises to the all method of Redux-Saga, you should write it like below:

yield all(
  users.map((item) =>
    (function* () {
      try {
        return yield call(signUser, item);
      } catch (e) {
        return e; // **
      }
    })()
  )
);

You pass a self-invoking generator function with handling the error and instead of throw use return. hence, the line with two stars(**).

By using this way all of your async actions return as resolved and the all method never seen rejection.

Upvotes: 3

Related Questions