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.
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.
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' }
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With