NextJS：我是不是需要使用 getInitialProps 和 next-redux-wrapper 来向所有页面共享状态？

Posted 2023-02-22

【中文标题】NextJS：我是不是需要使用 getInitialProps 和 next-redux-wrapper 来向所有页面共享状态？

【英文标题】：NextJS: Do I need to use getInitialProps with next-redux-wrapper to share state to all pages?NextJS：我是否需要使用 getInitialProps 和 next-redux-wrapper 来向所有页面共享状态？

【发布时间】：2021-04-28 07:02:55

【问题描述】：

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

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

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

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

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

【参考方案1】：

是的，您必须在 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并保存它。