将 NextJS 与 Redux 一起使用。 是否应该在具有不同预加载状态的页面之间重新初始化存储？

Question

我正在尝试使 Redux 与 NextJS 一起使用。 在 NextJS 官方 repo 中，您可以找到以下示例：

https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk

这是 Redux 代码（初始化存储的代码）的主要部分。

import { useMemo } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import reducers from './reducers'

let store

function initStore(initialState) {
  return createStore(
    reducers,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

export const initializeStore = (preloadedState) => {
  let _store = store ?? initStore(preloadedState)

  // After navigating to a page with an initial Redux state, merge that state
  // with the current state in the store, and create a new store
  if (preloadedState && store) {
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    })
    // Reset the current store
    store = undefined
  }

  // For SSG and SSR always create a new store
  if (typeof window === 'undefined') return _store
  // Create the store once in the client
  if (!store) store = _store

  return _store
}

export function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState])
  return store
}

他们是这样说的：

每个初始的服务器端请求都将使用一个新的存储。 但是，每个 Router 或 Link 操作都将在用户浏览页面时保留相同的存储。 为了演示这个示例，我们可以使用提供的链接来回导航到 /show-redux-state。 但是，如果我们直接导航到 /show-redux-state（或刷新页面），这将导致服务器端渲染，然后将使用新的存储。

他们的完整示例不是一个很好的示例，因为没有一个页面使用getInitialProps方法。 因此，您在切换页面时看不到store的变化。

// Create the store once in the client

从上面的评论中，我的印象是，无论如何，商店只会在客户端初始化一次（一次） 。 但事实并非如此。

每次我导航到一个将initialState添加到 Redux 存储的页面（这是通过使用getInitialProps方法完成的）时，都会在我的客户端代码上获取一个新存储。 我已经从字面上测试了这种行为。 store引用确实发生了变化。

这让我想到：在多个渲染中改变 Redux store引用不是一种不好的做法吗？ 我的意思是，React 会相应地重新渲染，但是异步代码呢？

假设我有一个 Redux thunk 仍然挂起，我导航离开页面。 现在，我的 Redux 存储将被重新初始化，如果：

• 我的 thunk 派发新动作？ thunk 的调度很可能链接到以前的商店
• 我的 thunk 访问getState() ？ 该getState()调用也可能链接到以前的商店。

这是反模式还是什么？

Answer 1

如果这是否是反模式，我没有最终答案，但是 NextJS 建议应初始化并重新初始化存储以合并服务器数据的方式肯定存在限制。

我刚刚进行了以下测试：

_app.tsx

import { useEffect } from "react";
import { Provider } from "react-redux";
import { useStore } from "./useStore";

export default function App({ Component, pageProps }) {
  console.log("Rendering App...");

  const store = useStore(pageProps.initialReduxState);
  const dispatch = store.dispatch;
  const getState = store.getState;

  useEffect(() => {
    console.log("store has changed");
  }, [store]);

  useEffect(() => {
    console.log("dispatch has changed");
  }, [dispatch]);

  useEffect(() => {
    console.log("getState has changed");
  }, [getState]);

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

当我导航到没有任何pageProps.initialReduxState值的页面时，我得到的是：

当我导航到具有pageProps.initialReduxState值的页面时，会发生以下情况：

作为这个测试的结果，我认为可以安全地假设在 thunk 中运行的待处理代码将是陈旧的，并且不会对新存储产生任何影响。