修改Reducer代码时Redux Toolkit导致Redux重启问题求助

这个问题本质是开发环境热重载（HMR）的默认行为：当你修改reducer相关代码时，对应模块会被重新加载，原store实例被销毁并重建，导致状态全部重置。下面是具体解决方法：

1. 为Redux配置热重载支持 #

在你的store配置文件中添加热重载处理逻辑，让Redux可以在不重启整个store的前提下替换更新后的reducer。修改后的store代码如下：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import RootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';

const middleware = [thunk];
const devtools = (x) => x;

// 把store创建逻辑封装成函数，避免模块重载时直接创建新实例
export const createStore = () => configureStore({
  reducer: RootReducer,
  middleware: [...getDefaultMiddleware(), ...middleware],
  devTools: process.env.NODE_ENV !== 'production',
  enhancers: [devtools],
});

export const Store = createStore();

// 开发环境下启用热重载
if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept('./reducers/RootReducer', () => {
    // 加载更新后的根reducer
    const newRootReducer = require('./reducers/RootReducer').default;
    // 替换现有store的reducer，保留当前状态
    Store.replaceReducer(newRootReducer);
  });
}

2. 关键逻辑说明 #

• 将store创建逻辑封装为createStore函数，避免模块重新加载时直接生成全新的store实例。
• 通过module.hot.accept监听根reducer模块的变化，当reducer代码修改后，加载新的reducer并调用store.replaceReducer()方法完成替换，这个过程会完整保留当前store的状态，不会导致数据丢失。

3. 额外注意事项 #

• 该配置仅需在开发环境启用，生产环境下HMR不会生效，无需处理。
• 如果你使用createSlice创建reducer，只要根reducer正确引入了这些slice的reducer，热重载逻辑会自动识别slice的变化，无需单独处理每个slice。

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