Reputation: 1697
Given my action creator:
export const REQUEST_ARTICLES = 'REQUEST_ARTICLES'
export const RECEIVE_ARTICLES = 'RECEIVE_ARTICLES'
export const CHANGE_PAGE = 'CHANGE_PAGE'
export const changePage = (currentPage) => ({
type: CHANGE_PAGE,
currentPage,
})
export const requestArticles = () => ({
type: REQUEST_ARTICLES,
})
export const receiveArticles = json => ({
type: RECEIVE_ARTICLES,
posts: json.hits,
})
export const fetchArticles = () => async (dispatch) => {
try {
await dispatch(requestArticles())
let response = await fetch('www.abc.com')
let json = await response.json()
await dispatch(receiveArticles(json))
} catch (e) {
console.log('error:', e)
}
}
So I am using dispatch inside action creator. But if I have to dispatch multiple actions, then my code would be
try {
await dispatch(requestArticles1())
await dispatch(requestArticles2())
await dispatch(requestArticles3())
await dispatch(requestArticles4())
await dispatch(requestArticles5())
let response = await fetch('www.abc.com')
let json = await response.json()
await dispatch(receiveArticles(json))
} catch (e) {
console.log('error:', e)
}
I already use mapDispatchToProps
in the component. Is there any similar way/method I can use in action creator so that I don't have to dispatch actions manually one by one?
Upvotes: 0
Views: 487
Reputation: 4039
redux's store.dispatch()
is not an asynchronous function, so there is no need to await
its return. It will still work because await
ing non-async functions casts them to an immediately-resolving promise.
With regard to dispatching multiple actions, you will need to manually dispatch every action that you need. The question becomes: why do you need to dispatch so many actions? In general for an ajax-calling thunk you will use a started, succeeded and failed action, and not many more.
export const fetchArticles = () => async (dispatch) => {
try {
dispatch(requestArticlesStarted())
const response = await fetch('www.abc.com')
const json = await response.json()
dispatch(requestArticlesSucceeded(json))
} catch (e) {
console.log('error:', e);
dispatch(requestArticlesFailed(e));
}
}
Upvotes: 1