在 Next 12+ SSR 上通过 url 参数初始化 Redux Toolkit 存储

Question

我是 NextJS (12) 的新手，我正在创建一个电子商务网站，其中有一些 UI 过滤器；我正在使用 getServerSideProps 来获取数据，因为我需要网站符合 SEO 标准。

当用户点击过滤器时，我将更新全局状态并触发 next/router 获取新数据并填充页面，只需将查询参数传递给 url。一切似乎都很好。

当用户使用活动过滤器（通过 url 查询参数）登陆网站时，我通过 getServerSideProps（解析 url 查询参数）用正确的数据填充页面，但现在我还应该使用活动过滤器丰富 Redux 状态，以显示正确的 UI.

是否有任何方法可以在页面加载 (SSR) 时通过 url 参数初始化 Redux Toolkit 存储？

我知道我不会在这里发布任何代码，但我首先需要知道在这种情况下使用 Redux Toolkit 是否有点矫枉过正，以及是否有任何方法可以在不使用过于复杂的同步库的情况下实现我需要的功能.

非常感谢

Answer 1

我不知道这是否对您有帮助，即使这可能是一个好的做法或 anti-pattern，但是 - 因为我想您已经将您的商店传递给那里的应用程序 -你为什么不通过 _app 中的 useRouter 获取你的查询参数，在其中用查询字符串组成实际的商店，然后将它传递给商店提供商？

import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { Provider as StoreProvider } from 'react-redux';

import store from '../store';

const App = ({ Component, pageProps }: AppProps) => {
  const { query } = useRouter();
  const realStore = doSomethingWithQueryAndReturnRealStore(store, query);

  return (
    <StoreProvider store={realStore}>
      <Component {...pageProps} />
    </StoreProvider>
  );
};

请记住，我还没有测试过，这只是一个假设:)

在 Next 12+ SSR 上通过 url 参数初始化 Redux Toolkit 存储

Initialize Redux Toolkit store via url params on Next 12+ SSR

reactjs

redux

next.js

redux-toolkit