在 NextJs 中使用 Redux Provider 与 Redux Wrapper |没有包装器的状态仍然存在答案

【问题标题】：Using Redux Provider vs Redux Wrapper with NextJs | State Persists Without Wrapper在 NextJs 中使用 Redux Provider 与 Redux Wrapper |没有包装器的状态仍然存在
【发布时间】：2022-06-15 02:44:57
【问题描述】：

根据docs 的 next-redux-wrapper：

但是，当涉及 Next.js 静态站点生成器或服务器端渲染时，事情开始变得复杂，因为服务器上需要另一个存储实例来渲染与 Redux 连接的组件。

我不明白问题出在哪里。

SSR 到 SSG Redux 状态在页面导航期间持续存在

我构建了一个简单的 NextJs 应用程序，其中一个页面呈现在服务器上，另一个页面静态呈现。在生产模式或开发模式下，我可以在这两个页面之间导航，并且我的 redux 状态保持不变。

我的理解是不应该这样，因为必须在服务器和客户端上创建单独的 redux 存储；因此创建了下一个 redux 包装器（也用于将 redux 状态注入 NextJs 生命周期方法，我不需要）。

我对使用什么机制来保持 SSR 和 SSG 页面之间的 redux 状态感到困惑。我正在使用一个简单的 redux 提供程序，带有一些简单的状态用于测试。

这是我的配置示例代码：

page1.js（静态渲染）

import Layout from './layout';
import { useSelector, useDispatch } from 'react-redux';
import { getTest, addBar } from '../redux/slices/topten';

export default function Page1() {

  const dispatch = useDispatch();
  const myState = useSelector(getTest);

  return (
    <Layout>
        <span>
          { myState }
        </span>
        <button onClick={() => dispatch(addBar())}>
           Add Bar to Foo
        </button>
    </Layout>
   )
}

page2.js（服务器端渲染）

import Layout from './layout';
import { useSelector, useDispatch } from 'react-redux';
import { getTest, addBar } from '../redux/slices/topten';

export default function Page2() {

    const dispatch = useDispatch();
    const myState = useSelector(getTest);

    return (
       <Layout>
            <h2>Server Side Rendered</h2>
            <div>
                <span>
                    { myState }
                </span>
                <button onClick={() => dispatch(addBar())}>
                    Add Bar to Foo
                </button>
            </div>
       </Layout>
    )
}

export async function getServerSideProps() {

   // Code for fetching data from external api.

  return {
    props: {
        // Returned props
    }
  };
};

App.js

import { Provider } from 'react-redux';
import { store } from '../redux/store';

export default function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

我省略了布局，因为它是多余的。

我已在此处验证，只需使用 Provider HOC，两个组件之间的状态就会持续存在。它不会在页面刷新时持续存在，但根据文档

商店正在被导航替换

我不明白为什么我需要包装器，除非我需要在 NextJs 生命周期方法中访问 redux 状态。

如有任何澄清，我们将不胜感激。

【问题讨论】：

这并没有完全回答这个问题，但它是一个很好的适用阅读:) nextjs.org/docs/advanced-features/react-18/server-components
您在客户端获取数据，当在 Next.js 数据获取方法 (getServerSideProps/getStaticProps) 和状态中的服务器上获取数据时会出现复杂情况需要在服务器和客户端之间进行同步。
@juliomalves 实际上，我的数据正在服务器上获取。我可以在终端的控制台中记录它，它正在服务器端呈现，我通过浏览器中的 HTML 输出进行了验证。
你能提供在服务器端获取数据的代码吗？到目前为止，您提供的代码似乎是在仅在客户端上运行的 useEffect 中获取数据。

标签： reactjs redux react-redux next.js