Is there Promise.any like thing in redux saga? - reactjs

I know about Redux Saga's all([...effects]) effect combinator that is very similar to Promise.all utility, but I've not found something similar to Promise.any behavior that will:
run all effects at the same time
fail if all effects fail (otherwise succeed)
if fail throw AggregateError of all errors
if succeed return nothing or just first result (from multiple results)
e.g.
export function* getHomeDataSaga() {
yield* any([
call(getTopUsersSaga, { payload: undefined }),
call(getFavoritesSaga, { payload: undefined }),
call(getTrendingTokensSaga, { payload: undefined }),
call(getTopCollectionsSaga, { payload: { itemsPerPage: 9, page: 1 } }),
]);
}
This would be very useful when you want to group multiple (decomposed) sagas in to a single saga, it won't fail-fast but finish all effects.
Answer
Based on Martin Kadlec answer ended up using:
export function* anyCombinator(effects: SagaGenerator<any, any>[]) {
const errors = yield* all(
effects.map((effect) =>
call(function* () {
try {
yield* effect;
return null;
} catch (error) {
return error;
}
}),
),
);
if (errors.every((error) => error !== null)) {
throw new AggregateError(errors);
}
}

There isn't an existing effect that would do that, but you can create your own utility that will do that for you. The any functionality is very similar to the all functionality in that in one case you will get all the results/errors and in the other you get the first one that succeeds/fails. So you can easily get the any functionality by flipping the all effect -> for each item you throw on success and return on error.
const sagaAny = (effects = []) => {
const taskRunner = function* (effect) {
let value;
try {
value = yield effect;
} catch (err) {
// On error, we want to just return it
// to map it later to AggregateError
return err;
}
// On success we want to cancel all the runners
// we do that by throwing here
throw value;
};
return call(function* () {
try {
const runners = effects.map((effect) => call(taskRunner, effect));
// If one of the runners throws on success the all effect will
// cancel all the other runners
const failedResults = yield all(runners);
throw new AggregateError(failedResults, "SAGA_ANY");
} catch (err) {
if (err instanceof AggregateError) throw err;
return err;
}
});
};
function* getHomeDataSaga() {
const result = yield sagaAny([
call(getTopUsersSaga, { payload: undefined }),
call(getFavoritesSaga, { payload: undefined }),
call(getTrendingTokensSaga, { payload: undefined }),
call(getTopCollectionsSaga, { payload: { itemsPerPage: 9, page: 1 } }),
]);
}
In case you would prefer not to cancel the other sagas once one succeeds, things get a bit trickier because in standard fork tree the main saga (e.g. getHomeDataSaga) would wait until all the forked sagas (task runners) are done before continuing. To get around that we can use the spawn effect, which will not block the main saga though it has some other implications (e.g. if you kill them main saga the spawned sagas will continue running).
Something like this should do the trick:
const sagaAny = (effects = []) => {
const taskRunner = function* (effect, resultsChannel) {
try {
value = yield effect;
yield put(resultsChannel, { type: "success", value });
} catch (err) {
yield put(resultsChannel, { type: "error", value: err });
}
};
return call(function* () {
const resultsChannel = yield call(channel);
yield all(
effects.map((effect) => spawn(taskRunner, effect, resultsChannel))
);
const errors = [];
while (errors.length < effects.length) {
const result = yield take(resultsChannel);
if (result.type === "success") {
yield put(resultsChannel, END);
return result.value;
}
if (result.type === "error") errors.push(result.value);
}
throw new AggregateError(errors, "SAGA_ANY");
});
};
I use custom channel here to send the results from the spawned runners to the utility saga so that I can react to each finished runner based on my needs.

Related

How To Know If Dispatch Is Success or No In Redux Saga

So i already create the createMonsterStart and it will hit my API, my API is returning response code, and I want to alert success when the response code is 00 otherwise it will alert failed, how can i achieve that? here is my code:
const onSubmitHandler = () => {
dispatch(createMonsterStart(monster))
if(dispatch success){
alert("success")
}else{
alert("error")
}
}
And here is the redux saga code:
export function* createMonsterAsync({ payload: { monster } }) {
try {
const user = yield select(getUser)
const a = yield call(createMonster, user.user.token, monster)
if (a.error) {
yield put(createMonsterFailure(a.error))
return false
}
const monsters = yield call(fetchMonsterAsync)
yield put(createMonsterSuccess(monsters))
} catch (error) {
yield put(createMonsterFailure(error))
}
}

How to test throw new error in redux-saga with Jest

I test saga with jest framework. I want to test the code when I throw new Error, but I have a problem.
Saga funtion
try {
const clientId = yield select(selectClientId)
if (!clientId) {
throw new Error('Client id is not exists')
}
const response = yield call(fetcher, {options})
yield put(clientReceiveData({ data: response }))
} catch (err) {
yield put(clientRequestDataFailure())
}
}
Here's a test saga
describe('client fetch data', () => {
const gen = cloneableGenerator(clientDataFetch)(params)
expect(gen.next().value).toEqual(select(selectClientId))
// #ts-ignore
expect(gen.throw(new Error('Client id is not exists')).value).toEqual( put(clientRequestDataFailure()))
// Here expect(received) is undefined
expect(gen.next().value).toEqual(call(fetcher, {options}))
})
received to equal with call fetcher is undefined
You already finished the generator đź‘Ť, there is no more code to execute, the way to assert that is:
:
expect(gen.next()).toStrictEqual({ done: true, value: undefined })
However, for clean code, you do expect cases where the client id is undefined, and handle correctly the case already, so it's not an unexpected exception, try:
// generator.ts
function* clientDataFetch(params) {
//...
const clientId = yield select(selectClientId)
if (!clientId) {
yield put(clientRequestDataFailure())
} else {
const response = yield call(fetcher, {options})
yield put(clientReceiveData({ data: response }))
}
}
// test.ts
describe('client fetch data', () => {
const gen = cloneableGenerator(clientDataFetch)(params)
expect(gen.next().value).toEqual(select(selectClientId))
// just return the falsy value
expect(gen.next(undefined).value).toEqual(put(clientRequestDataFailure()))
expect(gen.next()).toStrictEqual({ done: true, value: undefined })
})

How to set timeout for yield call in React Redux-Saga

In my rest API backend I do heavy processing and usually, it takes 1.5 minutes to produce a result, in that time I'm getting this error in my frontend react application.
Error: timeout of 60000ms exceeded
So, peer connection is lost.
How do I set request timeout in redux-saga
i was used race for such things. May be it will useful for you.
const {posts, timeout} = yield race({
posts: call(fetchApi, '/posts'),
timeout: delay(60 * 1000)
});
if (timeout) throw new Error('timeout of 60000ms exceeded')
import { eventChannel, END } from 'redux-saga'
function countdown(secs) {
return eventChannel(emitter => {
const iv = setInterval(() => {
secs -= 1
if (secs > 0) {
emitter(secs)
} else {
// this causes the channel to close
emitter(END)
}
}, 1000);
// The subscriber must return an unsubscribe function
return () => {
clearInterval(iv)
}
}
)
}
Hope this helps.
export function* create(action) {
try {
const { payload } = action;
const response = yield call(api.addPost, payload);
if (response.status === 200) {
console.log('pass 200 check');
yield put(appActions.setResourceResponse(response.data));
console.log(response.data);
payload.push('/add-news');
}
} catch (error) {
console.log(error);
yield put(
a.setResponse({
message: error.response.data,
status: error.response.status,
}),
);
}
}

How to chain firebase observables using redux-saga?

I've recently made the move from ionic/angular2/Rxjs to React/React Native/Redux-sagas. I'm porting over my app from ionic to react native and have really enjoyed the process. One thing, however, I have really struggled with is using firebase in react native via redux sagas. I can do simple requests however I would like to chain three requests and get the return value as an JSON object. Currently I have this :
export const getTuteeUID = state => state.login.username;
function* getMemberProfiles(UID) {
try {
const memberObject = yield call(get, 'userProfile', UID);
return memberObject;
} catch (err) {
console.log(err);
}
}
function* getLatestConversation(grpID) {
try {
const opts = newOpts();
const refLatestConvo = firebase
.database()
.ref('conversations')
.child(`${grpID}`)
.orderByChild('createdAt')
.limitToLast(1);
yield call([refLatestConvo, refLatestConvo.on], 'value', opts.handler);
while (true) {
const { data } = yield take(opts);
if (data.val()) {
return data.val()[data._childKeys[0]];
}
return null;
}
} catch (err) {
console.log(err);
}
}
export function* getChatGroupObject(grpID, tuteeUID) {
try {
const groupObject = yield call(get, 'groups', grpID);
const memberProfiles = yield Object.keys(groupObject.members)
.filter(mem => mem !== tuteeUID)
.map(memUID => call(getMemberProfiles, memUID));
const latestConversation = yield call(getLatestConversation, grpID);
return { ...groupObject, memberProfiles, key: grpID, latestConversation };
} catch (err) {
console.log(err);
}
}
/**
*
* #return {Generator} []
*/
export function* fetchChatGroups() {
try {
const opts = newOpts();
const tuteeUID = yield select(getTuteeUID);
const refGrpIDs = firebase.database().ref('userProfile').child(`${tuteeUID}/groups`);
const snapGrpIDs = yield call([refGrpIDs, refGrpIDs.once], 'value', opts.handler);
if (snapGrpIDs.val()) {
const groupObject = yield Object.keys(snapGrpIDs.val()).map(grpID =>
call(getChatGroupObject, grpID, tuteeUID),
);
yield put(ChatAction.chatGroupsReceived(groupObject));
} else {
ChatAction.chatGroupsReceived([]);
}
} catch (error) {
console.log(error);
}
}
Now this works and returns the correct object, however if the latest conversation in the array changes the object won't update. How can I get this to continue updating? Another thing is if I were to put this in a while(true) loop, is there a way to unsubscribe from the observable? In rxjs this used to be super easy to do.

Redux saga, axios and progress event

Is there clean/short/right way to using together axios promise and uploading progress event?
Suppose I have next upload function:
function upload(payload, onProgress) {
const url = '/sources/upload';
const data = new FormData();
data.append('source', payload.file, payload.file.name);
const config = {
onUploadProgress: onProgress,
withCredentials: true
};
return axios.post(url, data, config);
}
This function returned the promise.
Also I have a saga:
function* uploadSaga(action) {
try {
const response = yield call(upload, payload, [?? anyProgressFunction ??]);
yield put({ type: UPLOADING_SUCCESS, payload: response });
} catch (err) {
yield put({ type: UPLOADING_FAIL, payload: err });
}
}
I want to receive progress events and put it by saga. Also I want to catch success (or failed) result of the axios request. Is it possible?
Thanks.
So I found the answer, thanks Mateusz Burzyński for the clarification.
We need use eventChannel, but a bit canningly.
Suppose we have api function for uploading file:
function upload(payload, onProgress) {
const url = '/sources/upload';
const data = new FormData();
data.append('source', payload.file, payload.file.name);
const config = {
onUploadProgress: onProgress,
withCredentials: true
};
return axios.post(url, data, config);
}
In saga we need to create eventChannel but put emit outside.
function createUploader(payload) {
let emit;
const chan = eventEmitter(emitter => {
emit = emitter;
return () => {}; // it's necessarily. event channel should
// return unsubscribe function. In our case
// it's empty function
});
const uploadPromise = upload(payload, (event) => {
if (event.loaded.total === 1) {
emit(END);
}
emit(event.loaded.total);
});
return [ uploadPromise, chan ];
}
function* watchOnProgress(chan) {
while (true) {
const data = yield take(chan);
yield put({ type: 'PROGRESS', payload: data });
}
}
function* uploadSource(action) {
const [ uploadPromise, chan ] = createUploader(action.payload);
yield fork(watchOnProgress, chan);
try {
const result = yield call(() => uploadPromise);
put({ type: 'SUCCESS', payload: result });
} catch (err) {
put({ type: 'ERROR', payload: err });
}
}
I personally found the accepted answer to be very convoluted, and I was having a hard time implementing it. Other google / SO searches all led to similar type answers. If it worked for you, great, but I found another way using an EventEmitter that I personally find much simpler.
Create an event emitter somewhere in your code:
// emitter.js
import { EventEmitter } from "eventemitter3";
export default new EventEmitter();
In your saga to make the api call, use this emitter to emit an event within the onUploadProgress callback:
// mysagas.js
import eventEmitter from '../wherever/emitter';
function upload(payload) {
// ...
const config = {
onUploadProgress: (progressEvent) = {
eventEmitter.emit(
"UPLOAD_PROGRESS",
Math.floor(100 * (progressEvent.loaded / progressEvent.total))
);
}
};
return axios.post(url, data, config);
}
Then in your component that needs this upload progress number, you can listen for this event on mount:
// ProgressComponent.jsx
import eventEmitter from '../wherever/emitter';
const ProgressComponent = () => {
const. [uploadProgress, setUploadProgress] = useState(0);
useEffect(() => {
eventEmitter.on(
"UPLOAD_PROGRESS",
percent => {
// latest percent available here, and will fire every time its updated
// do with it what you need, i.e. update local state, store state, etc
setUploadProgress(percent)
}
);
// stop listening on unmount
return function cleanup() {
eventEmitter.off("UPLOAD_PROGRESS")
}
}, [])
return <SomeLoadingBar value={percent} />
}
This worked for me as my application was already making use of a global eventEmitter for other reasons. I found this easier to implement, maybe someone else will too.

Resources