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

【问题标题】：Initialize Redux Toolkit store via url params on Next 12+ SSR在 Next 12+ SSR 上通过 url 参数初始化 Redux Toolkit 存储
【发布时间】：2022-02-01 18:18:13
【问题描述】：

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

当用户单击过滤器时，我正在更新全局状态并触发获取新数据并填充页面的下一个/路由器，只需将查询参数传递给 url。一切似乎都运行良好。

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

有没有办法通过页面加载 (SSR) 时的 url 参数来初始化 Redux Toolkit 存储？

我知道我不会在这里发布任何代码，但我首先需要知道在这种情况下使用 Redux Toolkit 是否会过度杀伤力，以及是否有任何方法可以在不使用过于复杂的同步库的情况下实现我的需求。

非常感谢

【问题讨论】：

请问您为什么在这种情况下需要状态管理器？
@bitfella 因为 UI 分散在许多组件中，有时我需要知道某个特定过滤器何时处于活动状态，以便对另一个可能与第一个相距甚远的过滤器进行处理。您认为这可以通过其他方式实现吗？

标签： reactjs redux next.js redux-toolkit

【解决方案1】：

我不知道这是否可以帮助您，即使这可能是一个好的做法或反模式，但是 - 既然我想你已经将你的商店传递给那里的应用程序 - 为什么不您只需通过 _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>
  );
};

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

【讨论】：