Redux运行时频繁创建多个store是否属于正常现象?
问题结论
完全不需要创建这么多Redux store,这是next-redux-wrapper配置错误导致的异常重复实例化问题。
问题根因
这个日志是next-redux-wrapper开启debug模式后的输出,触发重复创建的常见原因有3个:
- 你在
_app.js/tsx中配置的makeStore方法没有做客户端复用逻辑,每次组件渲染/路由跳转都会返回全新的store实例 - 除了根
_app组件外,你还在子页面/子组件中额外使用了withRedux高阶组件,每多包裹一次就会多创建一个store - React开发模式下的严格模式会触发重复渲染,进一步放大这个问题
修复方案
- 调整
makeStore逻辑,客户端复用单例store,服务端每次请求新建实例:
// 全局缓存客户端store实例 let clientStore const makeStore = (context) => { // 服务端场景:每次请求创建独立store,避免多个请求状态串扰 if (typeof window === 'undefined') { return createStore(rootReducer, preloadedState) } // 客户端场景:复用已创建的实例,仅首次初始化时新建 if (!clientStore) { clientStore = createStore(rootReducer, preloadedState) } return clientStore } // 仅在根_app组件使用withRedux高阶组件 export default withRedux(makeStore)(MyApp)
- 移除所有子页面、子组件中额外添加的
withRedux包裹逻辑,全局仅需在根组件配置一次即可。 - 不需要调试Redux初始化逻辑时,关闭next-redux-wrapper的debug开关,避免日志刷屏:
const wrapper = createWrapper(makeStore, { debug: false })
额外说明
如果不修复这个问题,会出现路由跳转后状态丢失、内存占用持续升高、订阅事件重复触发等异常,需要优先处理配置问题。
内容的提问来源于stack exchange,提问作者János
相关产品推荐
相关产品推荐

