Async Await (ES7) vs Promises (ES6) data fetching in Redux actions
Benefits of Async Await (ES7):
- Readability.
- Await allows you to halt the execution of the function until a resolved promise is returned.
Benefits of Promises (ES6):
- Define arbitrary resolved value.
- Custom error handling.
Async Await:
export function getActivityPageFeed() {
return async (dispatch) => {
const payload = await dispatch(fetchAPI(`/api/activity`));
// Do something else here with resolved payload if required
dispatch({ type: SET_ACTIVITY_PAGE_PRODUCTS, payload });
};
}
Promises:
export function getActivityPageFeed() {
return (dispatch) => {
return dispatch(fetchAPI(`/api/activity`)).then(
(response) => {
dispatch({ type: SET_ACTIVITY_PAGE_PRODUCTS, payload: response });
Promise.resolve();
},
(error) => {
return Promise.error(error);
}
);
}
}