在 Redux 中，替换 action creator 中的 dispatch

Question

鉴于我的动作创作者：

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)
    }
}

所以我在 action creator 中使用 dispatch。但是如果我必须分派多个动作，那么我的代码将是

        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)
        }

我已经在组件中使用了 mapDispatchToProps。有没有类似的 way/method 我可以在 action creator 中使用，这样我就不必一个接一个地手动发送 action 了？

Answer 1

redux的store.dispatch()不是异步函数，所以没必要await它的return。它仍然有效，因为 awaiting 非异步函数将它们转换为立即解决的承诺。

关于分派多个操作，您将需要手动分派您需要的每个操作。问题变成了：为什么需要派发这么多动作？通常，对于 ajax 调用 thunk，您将使用开始、成功和失败的操作，仅此而已。

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));
    }
}

在 Redux 中，替换 action creator 中的 dispatch

In Redux, replace dispatch in action creator

dispatch

reactjs

redux