Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 729
Patrickkx Avatar asked Aug 27 '20 15:08

Patrickkx


2 Answers

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.

like image 73
AmerllicA Avatar answered Oct 26 '22 02:10

AmerllicA


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' }
]
like image 1
slideshowp2 Avatar answered Oct 26 '22 00:10

slideshowp2