为什么页面重新加载后redux-persist存储的数据会丢失？

核心问题优先排查 #

你当前的配置大概率是reducer结构和白名单配置不匹配导致的：
你传入persistReducer的根reducer是userData，但persistConfig的白名单写的是["userData"]，只有当你的根reducer是通过combineReducers生成、且存在userData子字段时，这个白名单配置才会生效。如果你的根reducer本身就是userData对应的状态切片，白名单匹配不到对应字段，就不会触发持久化存储。

其他常见排查点 #

• 打开浏览器开发者工具的「存储/Application」面板，查看LocalStorage下你的站点域名，确认是否存在persist:root的存储项：
  • 不存在：说明数据压根没有写入存储，优先排查配置问题
  • 存在但内容为空/异常：排查reducer逻辑是否返回了空值覆盖了持久化数据
• 检查reducer代码，确认初始值逻辑不会覆盖持久化返回的状态，不要在reducer中硬编码强制重置初始状态
• 排查全局逻辑是否存在误调用persistor.purge()的情况，该方法会清空所有持久化数据
• 升级redux-persist到最新稳定版，部分旧v6版本存在已知的持久化失效bug

修复方案示例 #

如果你的项目只有userData一个状态切片，直接删除白名单配置即可：

const persistConfig = {
  key: "root",
  storage,
  // 删掉whitelist，整个根reducer的状态都会被持久化
};

如果后续需要扩展多个状态切片，改用combineReducers生成根reducer：

import { createStore, combineReducers } from "redux";
import userDataReducer from "./reducers/reducers";
// 其他reducer可以继续引入
// import otherDataReducer from "./reducers/other";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const rootReducer = combineReducers({
  userData: userDataReducer,
  // other: otherDataReducer
})

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["userData"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
export const persistor = persistStore(store);
export default store;

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