Using an action / saga in another saga
I have a Saga where I need to make 3 asynchronous requests and then use the responses from 3 requests in a subsequent request. Here is some psuedo code to explain:
function* useOtherActionsAndSagas(action) {
try {
const [response1, response2, response3] = yield [
request1,
request2,
request3
];
const orderData = {
...response1,
...response2,
...response3,
};
const response4 = yield request4;
yield put({ type: 'SUCCESS', data: response4 });
} catch (e) {
// handle error
}
3 queries request1
, request2
and request3
correspond to 3 separate sagas. For example, for request1
there is a saga along the lines:
export function* request1(action) {
try {
const result = yield api.get(`/api/endpoint`);
yield put({...action, type: ACTION1_SUCCESS, data: result});
} catch (e) {
yield put({...action, type: ACTION1_FAIL, errors: e});
}
}
function* watchAction1() {
yield* takeLatest(ACTION1, request1);
}
export default function* () {
yield [fork(watchAction1)];
}
where api.get
is a wrapper for Axios.get () .
This observer in this Saga is associated with the corresponding action / reducer.
export const ACTION1 = "actions/ACTION1";
export const ACTION1_SUCCESS = "actions/ACTION1_SUCCESS";
export const ACTION1_FAIL = "actions/ACTION1_FAIL";
const initialState = {
// Initial state
};
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case ACTION1:
// return state
case ACTION1_SUCCESS:
// return state
case ACTION1_FAIL:
// return state
};
default:
// return state;
}
}
export function request1 (data) {return {type: ACTION1, data}; }
To keep the code DRY, I was hoping to take advantage of the existing action and saga in the parent saga. For this I tried:
const [response1, response2, response3] = yield [
put({type: ACTION1, data: data1}),
put({type: ACTION2, data: data2}),
put({type: ACTION3, data: data3})
];
This correctly triggers every action and their respective sagas. However, the response from requests is not available in assigned variables. That is response1
, response2
and response3
are references to their actions {type: "actions/ACTION1", data: data1}
, not Promises.
I know it would be possible to duplicate Axios requests in this parent saga, but I would lose the success / failure bonus for individual requests.
Can this setup be used? If so, how can you get the responses from the asynchronous requests for use in a subsequent request?
If not, what is the correct method to do this?
Update
I can use workers from other sagas in the parent saga, for example:
import request1 from request1Saga;
const [response1, response2, response3] = yield [
call(request1, data1),
call(request2, data2),
call(request3, data3),
];
where request1
, request2
and request3
are working functions from other Sagas. This gives the benefit of actions ACTION1_SUCCESS
and ACTION1_FAIL
those that are used Sagas.
source to share
All you need is an all
effect combinator call
(docs for composing sagas and current tasks in parallel ):
const [response1, response2, response3] = yield all([
call(request1),
call(request2),
call(request3)
]);
This will execute the sagas in parallel and return results from each one. It works like Promise.all
.
The sagas above (request1 to request3) should return some data at the end of the saga:
export function* request1(action) {
try {
const result = yield call(url => api.get(url), `/api/endpoint`);
yield put({...action, type: ACTION1_SUCCESS, data: result});
// This will be assigned to result1
return result
} catch (e) {
yield put({...action, type: ACTION1_FAIL, errors: e});
}
}
Note : you don't need to fork takeEvery because it is already "forked":
// Example of root saga:
export default function* () {
yield takeLatest(ACTION1, request1);
yield takeLatest(ACTION2, request2);
// ...
}
source to share