Redux-persist搭配Redux-Toolkit使用无报错但不持久化数据怎么解决？

1. 优先修正语法问题 #

App.js中导入语句存在语法漏洞，检查本地实际运行代码确认是否已修正：
原代码写法import {store persistor} from './store' 两个导出变量之间缺少逗号，正确写法为import { store, persistor } from './store'，未修正会直接导致persistor实例异常。

2. 验证持久化存储生成情况 #

打开Chrome调试工具→Application→Local Storage，查看当前站点下是否存在persist:root这个key：

• 若完全不存在该key：说明持久化逻辑未触发，继续排查初始化逻辑
• 若存在该key但值为空/只有默认结构：说明reducer更新未被持久化捕获

3. 修复动态注入reducer的持久化失效问题 #

当前代码中injectReducer动态替换根reducer时，没有重新用persistReducer包裹新的根reducer，导致新增的reducer状态变更不会被持久化监听，修改逻辑如下：

// 与之前定义的persistConfig保持一致
const persistConfig = {
    key: 'root',
    storage
};
export const injectReducer = (key, reducer) => {
    if (store.asyncReducers[key]) {
        return false;
    }
    store.asyncReducers[key] = reducer;
    // 替换reducer时重新用persistReducer包裹新的根reducer
    const newRootReducer = persistReducer(persistConfig, createReducer(store.asyncReducers));
    store.replaceReducer(newRootReducer);
    return store;
};

同时热重载替换reducer的逻辑也需要同步修改：

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept('./rootReducer', () => {
        const newRootReducer = require('./rootReducer').default;
        const persistedNewRoot = persistReducer(persistConfig, newRootReducer.createReducer());
        store.replaceReducer(persistedNewRoot);
    });
}

4. 排查reducer重置逻辑冲突 #

当前createReducer中实现了登出时将state设为undefined的逻辑，确认测试时是否触发了auth/user/userLoggedOut这个action，该逻辑会清空整个store，会导致持久化数据被清空。

5. 验证PersistGate初始化状态 #

给PersistGate增加onBeforeLift回调，确认持久化初始化是否正常执行：

<PersistGate loading={null} persistor={persistor} onBeforeLift={() => console.log('persist初始化完成')}>

若控制台未打印该日志，说明persistor实例异常未正常初始化。

6. 开启debug模式定位流程日志 #

在persistConfig中增加debug: true参数开启调试模式，控制台会打印所有持久化相关的流程日志，可直接定位到具体失效环节：

const persistConfig = {
    key: 'root',
    storage,
    debug: true // 开发环境开启即可看到完整持久化全流程日志
};

内容的提问来源于stack exchange，提问作者Santiago Gonzalez Lojo