如何在Next.js的getStaticProps中访问Redux Toolkit非初始状态

问题根因 #

你遇到的状态不一致问题本质是Next.js服务端数据获取方法和客户端Redux实例的生命周期隔离导致的：

• getStaticProps 是在服务端构建阶段/增量再生阶段运行的方法，每次执行时next-redux-wrapper都会创建一个全新的、独立的Redux Store实例
• 你在客户端页面交互中通过dispatch存入Redux的accessToken，仅存在于用户浏览器本地的Store实例里，和服务端运行getStaticProps时的Store完全没有关联
• Redux DevTools中展示的是客户端Store的状态，和getStaticProps里拿到的服务端Store状态无关，所以才会出现两边状态不一致的情况

解决方案 #

根据你的业务场景选择对应方案即可：

场景1：你请求的接口需要用户专属登录态 #

这种场景不适合使用getStaticProps，改用getServerSideProps实现：

1. 调整登录逻辑：用户登录成功后，除了dispatch更新Redux的token状态，同时把accessToken写入浏览器Cookie
2. 在getServerSideProps中可以直接从请求上下文读取Cookie中的token，无需从Redux获取：

export const getServerSideProps = wrapper.getServerSideProps((store) => {
  return async (context) => {
    // 直接从请求cookie拿token
    const token = context.req.cookies.accessToken
    // 携带token调用业务接口即可
    const res = await fetch('你的业务接口地址', {
      headers: { Authorization: `Bearer ${token}` }
    })
    const data = await res.json()
    return {
      props: { data }
    }
  }
})

如果确实需要在服务端Store中同步token，可以拿到token后先dispatch到当前Store实例，再调用getState()获取状态即可。

场景2：你请求的接口使用公共固定token（无用户身份区分） #

这种场景可以继续使用getStaticProps，但不要把token存在Redux里，直接存入项目环境变量即可：

1. 在项目根目录的.env.local文件里配置公共token：

NEXT_PUBLIC_API_TOKEN=你的公共token

2. 在getStaticProps中直接读取环境变量使用：

export const getStaticProps = wrapper.getStaticProps((store) => {
  return async () => {
    const token = process.env.NEXT_PUBLIC_API_TOKEN
    // 后续接口调用逻辑
    return { props: {} }
  }
})

额外说明 #

你当前的HYDRATE合并逻辑是浅合并，如果你后续有嵌套状态同步的需求，需要调整合并逻辑避免深层状态丢失，不过这不属于本次问题的根因，可后续根据业务情况调整。

内容的提问来源于stack exchange，提问作者z1hoon