1

我正在使用 next-redux-wrapper 并从各个页面的 getServerSideProps 调度操作。但我意识到我无法从另一个页面访问填充的商店状态。如果我尝试在客户端或服务器端尝试，则状态在其他页面中返回为空。

所以，我听说需要使用 getInitialProps 在所有页面之间共享状态。由于我对所有这些感到困惑，因此我想消除一些疑问。我想知道：

  1. 当使用 redux 和 next-redux-wrapper 时，什么时候需要（如果有的话）在 _app.js 文件中使用 getInitialProps？我听说需要在 _app.js 中使用 getInitialProps 才能使每个页面都可以访问状态。但这对我不起作用。可能是因为执行错误！

  2. 如果我在 _app.js 中使用 getInitialProps 那么是否不需要在单个页面中使用 getServerSideProps 或 getStaticProps ？

  3. 使用 getServerSideProps 填充状态后，我是否可以在不使用 _app.js 中的 getInitialProps 的情况下将状态共享给每个页面，或者如果需要，我可以将获取的状态传递给 _app.js 中的 getInitialProps 吗？

4

1 回答 1

0

是的，您必须在 APP 组件中使用 getIntitprops 来在所有页面中提供存储，在这种情况下，所有页面都将在服务器上运行，如果您有很多静态页面，那么这将是一个巨大的失败，

或者您可以根据需要在每个页面上使用此代码，但您的调度只会更改服务器端状态！！！，这意味着您可以在客户端访问它们。

export const getServerSideProps = wrapper.getServerSideProps(async ({ store, query }) => {
    try {
        const { id } = query
        const res = await api.get('/abc', { params: { id } })
        await store.dispatch(action)
        return {
            props: {
                id,
                data: res.data,
                isServer: typeof window === 'undefined',
            }
        }
    } catch (error) {
        return {
            props: {
                errorCode: 409,
                message: "Data Unavailable"
            }
        }
    }
})

最后，我放弃了这两个选项，因为它提供了糟糕的用户体验。

我的建议是使用 getInitProps 并检查页面是否在服务器上呈现然后调用 API 并将 props 保存在客户端，否则在客户端调用 API 并保存它。

于 2021-06-24T17:18:34.660 回答