React Next.js中Redux Toolkit全局状态重置至初始值的原因排查

• Redux Store 重复实例化：如果在组件或非全局模块中多次调用configureStore，每次页面加载都会生成全新的Store实例，之前存储的状态自然丢失。必须保证Store只在全局文件（如app/store.js）中创建一次，再通过Provider全局包裹整个应用。

• 服务端渲染/静态生成的状态不同步：若ComponentY是服务端渲染(SSR)或静态生成(SSG)页面，且未做服务端到客户端的状态同步，服务端渲染阶段会使用初始状态生成页面，覆盖客户端已更新的状态。需要检查ComponentY的渲染模式，或者在服务端将状态序列化后传递给客户端完成hydration。

• 路由跳转触发页面全刷新：如果用原生window.location.href或<a>标签跳转，会触发整个页面刷新，Redux状态会因页面重新加载被重置。应该使用Next.js的useRouter提供的push/replace方法进行客户端路由跳转，维持单页应用的状态。

• 切片reducer存在意外重置逻辑：检查ComponentX跳转前、ComponentY加载时是否触发了某个action（比如初始化类action），导致状态被重置为initialState。可以通过Redux DevTools追踪action调用顺序，排查是否有意外的重置动作。

• App Router下的Store配置错误：如果使用Next.js App Router（App目录），未在根layout中用Provider包裹所有路由，或者Store创建方式不符合App Router要求（比如在服务端组件中调用了客户端专属API），会导致状态无法跨页面共享。

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