Javascript 如何让Next.js服务器等待操作创建者完全完成？

我正在将Next.js与Redux一起使用，我需要等到action creator完全完成（包括对外部服务器的请求），以便数据已经在初始渲染中。我将试着用一个例子来解释这个案例

我在文档中使用HOC from，并将

页面

与它一起包装

因此，您可以在下面看到代码示例：

index.js在

页面

文件夹中

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

export default withRedux()(IndexPage)

我尝试在index.js

页面中使用静态方法
getInitialProps
，如下所示：

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

IndexPage.getInitialProps = async ({ store }) => {
    await store.dispatch(fetchLatestNews())
}

export default withRedux()(IndexPage)

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

IndexPage.getInitialProps = async ({ store }) => {
    await store.dispatch(fetchLatestNews())
}

export default withRedux()(IndexPage)  

export const fetchLatestNews = params => {
    return async dispatch => {
        dispatch({ type: newsTypes.FETCH_WP_LATEST_NEWS_REQUEST })
        await newsApi.fetchLatestNews(params)
            .then(response => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_SUCCESS,
                    payload: response.data,
                })
            })
            .catch(error => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_FAILURE,
                    payload: error,
                })
            })
    }
}

import withRedux from'../utils/withRedux'
从“../src/containers/news/RunningLineContainer”导入RunningLineContainer
常量索引页=（）=>
IndexPage.getInitialProps=异步（{store}）=>{
等待store.dispatch（fetchLatestNews（））
}
使用redux（）导出默认值（InExpage）

不幸的是，这对我不起作用

我如何解决这个任务？有什么解决办法吗

提前感谢
您的操作创建者没有返回承诺，因此无法等待。修复：

export function fetchLatestNews(params) {
    return function (dispatch) {
        dispatch({ type: newsTypes.FETCH_WP_LATEST_NEWS_REQUEST })

        // return statement
        return newsApi.fetchLatestNews(params)
            .then(response => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_SUCCESS,
                    payload: response.data,
                })
            })
            .catch(error => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_FAILURE,
                    payload: error,
                })
            })
    }
}

最后，我解决了这个任务

实际的解决方案是使返回函数creator异步，并将
wait
添加到API请求中

所以，我使用上面提到的静态方法，如下所示：

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

IndexPage.getInitialProps = async ({ store }) => {
    await store.dispatch(fetchLatestNews())
}

export default withRedux()(IndexPage)

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

IndexPage.getInitialProps = async ({ store }) => {
    await store.dispatch(fetchLatestNews())
}

export default withRedux()(IndexPage)  

export const fetchLatestNews = params => {
    return async dispatch => {
        dispatch({ type: newsTypes.FETCH_WP_LATEST_NEWS_REQUEST })
        await newsApi.fetchLatestNews(params)
            .then(response => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_SUCCESS,
                    payload: response.data,
                })
            })
            .catch(error => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_FAILURE,
                    payload: error,
                })
            })
    }
}

谢谢你的帮助！我已经发布了完整的答案。@谢谢，但是为什么我需要调用
store.dispatch（fetchLatestNews（））
为什么不
等待linkLead3（数据）
@abdullazulqarain什么是
linkLead3
？对不起，它是
等待fetchLatestNews（）
，因为我们内部已经调用了
dispatch
但是为什么我们需要**调度`动作。。。？