Redux saga won't trigger two async calls simultaneously - redux

Question

I am trying to use redux saga to make the async calls simultaneously as I load the page... but only the loadPositions() is being called. anyone have an idea why? I think it has to do with a race condition. Please correct me.
const fetchPositions = () => {
return fetch(POSITIONS_API_ENDPOINT).then(function (response) {
return response.json().then(function (results) {
return results.map(function (p) {
return {
position: p.position,
platformId: p.platform_id
}
})
})
})
};
const fetchBanners = () => {
return fetch(BANNER_API_ENDPOINT).then(function (response) {
return response.json().then(function (results) {
return results.map(function (p) {
console.log(p)
return {
banner_id: p.banner_id,
type: p.image.type,
width: p.image.width
}
})
})
})
};
export function* loadBanners() {
try {
const banners = yield call(fetchBanners);
yield put({type: "BANNERS_LOADED", banners})
} catch (error) {
yield put({type: "BANNERS_LOAD_FAILURE", error: error})
}
}
export function* loadPositions() {
try {
const positions = yield call(fetchPositions);
yield put({type: "POSITIONS_LOADED", positions})
} catch (error) {
yield put({type: "POSITION_LOAD_FAILURE", error: error})
}
}
export function* rootSaga() {
yield [
loadBanners(),
loadPositions()
]
}

Answer 1

Try this:
Start the initial parallel loading by firing the ON_LOAD_START action
Make all your requests in parallel using the yield [] syntax and fire the appropriate actions with result data.
Root saga, compose all of your sagas:
export default function* rootSaga() {
yield fork(watchOnLoad);
}
Watcher saga, waits for action ON_LOAD_START before kicking of the worker saga:
function* watchOnLoad() {
// takeLatest will not start onLoad until an action with type
// ON_LOAD_START has been fired.
yield* takeLatest("ON_LOAD_START", onLoad);
}
Worker saga, actually makes all the requests in parallel and fires the success or error actions with relevant result data:
export function* onLoad() {
try {
const [banners, positions] = yield [
call(fetchBanners),
call(fetchPositions)
]
yield put({type: "ON_LOAD_SUCCESS", banners, positions})
} catch (error) {
yield put({type: "ON_LOAD_ERROR", error})
}
}