reactjs - 将 redux 与 Nextjs 一起使用，我不明白为什么它需要与 react 应用程序不同的更多设置

Question

当我尝试为 redux 进行配置时，我开始将 nextjs 集成到我的 react 应用程序中，但我发现它需要对 store 进行额外配置，例如 get preloadState 和其他东西不喜欢不理解就复制过去 方便我编辑和维护

function initStore(preloadedState = initialState) {
  return createStore(
    reducer,
    preloadedState,
    composeWithDevTools(applyMiddleware())
  )
}

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

  
  if (preloadedState && store) {
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    })
    
    store = undefined
  }

  
  if (typeof window === 'undefined') return _store
  
  if (!store) store = _store

  return _store
}

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

Answer 1

使用 nextjs，您可以使用getServerSideProps或getStaticProps函数在呈现页面之前预取内容。

基本上，该代码在初始化商店之前检查商店中是否已经有东西，如果有东西，它将尝试将其与初始商店值合并，如果没有，它将只返回商店的初始状态。

有一些验证可以检查您是否没有从浏览器运行它：

if (typeof window === 'undefined') return _store

这通常意味着您在 nextjs 的数据获取功能中使用 redux 存储，如本示例https://github.com/vercel/next.js/blob/canary/examples/with-redux/pages/ssr。 js。

此外，useStore 函数正在记忆状态以查看它是否应该重新运行 initializeStore，只有当初始状态发生变化时。