I wish to know what is the proper way in Redux Saga to achieve the following behavior:
- An action is dispatched by user interaction.
- The appropriate listening saga now tries to fetch data from the API, by calling several async methods in parallel.
- Upon every successful response, independently from the rest of the requests, an action is dispatched with the retrieved data (thus updating the UI, etc).
- Erroneous responses are gathered and then dispatched with a single action once all requests have finished (in order to later show a single error toast, for instance).
I have successfully implemented it by using the following pattern (sorry I lack full code examples, it isn't available at the moment):
function* fetchData(dataType) {
const resp = yield call(MyApi.fetchData, dataType);
if(!resp.err) {
yield put(fetchDataSuccess, resp.data);
} else {
return resp.err;
}
}
function* mySaga() {
const errors = yield all([
call(fetchData, 'typeOne'),
call(fetchData, 'typeTwo),
call(fetchData, 'typeThree)
]);
// errors contains the returned errors
}
Is it the best way to achieve the desired effect?
const [one, two, three]
so each holder has its value either result or error. Like in redux-saga API – Snatch