Redux-Persist无法完成数据恢复问题求助

问题 #

每次刷新页面时，redux-logger显示persist和rehydrate方法已调用，但没有任何数据被恢复。尝试添加whitelist属性测试reducer，也没有效果。另外，相同的Redux-Persist实现在React V17 + Redux V4项目中可正常运行，但在当前React V18 + Redux V4项目中失效。

相关代码片段 #

root-reducer.js

import { combineReducers } from "redux";

import User from "../reducers/user/user.reducer";
import UIReducer from "../reducers/ui/ui.reducer";
import ReservationReducer from "../reducers/reservation/reservation.reducer";
import RestaurantsReducer from "../reducers/restaurants/restaurants.reducer";

import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";

const persistConfig = {
  key: "root",
  storage,
};

const rootReducer = combineReducers({
  user: User,
  ui: UIReducer,
  reservation: ReservationReducer,
  restaurants: RestaurantsReducer,
});

export default persistReducer(persistConfig, rootReducer);

store.js

import createSagaMiddleware from "redux-saga";
import { applyMiddleware, createStore, compose } from "redux";
import logger from "redux-logger";

import { persistStore } from "redux-persist";

import rootReducer from "./root-reducer";
import rootSaga from "./root-sagas";

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const middlewares = [sagaMiddleware, logger];

export const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(...middlewares))
);
sagaMiddleware.run(rootSaga);

export const persistor = persistStore(store);

index.js

import { persistor, store } from "./redux/store/store";
import { PersistGate } from "redux-persist/integration/react";
import { Provider } from "react-redux";

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

可能的解决思路 #

1. 升级Redux-Persist版本
   React 18的并发渲染机制对第三方库兼容性有要求，旧版redux-persist可能未适配。直接升级到v6.0.0及以上的稳定版，大概率能解决版本兼容问题。

2. 检查reducer纯函数性
   Redux-Persist要求所有reducer必须是纯函数，如果某个reducer存在直接修改state、依赖外部变量等非纯操作，会导致数据无法正常恢复。逐个排查user、ui等reducer的实现逻辑，确保符合纯函数规范。

3. 精准指定whitelist测试
   修改persistConfig，只保留一个简单的reducer（比如user）做测试：

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

如果这个reducer能正常恢复数据，再逐个添加其他reducer，定位到出问题的那个。

4. 查看REHYDRATE动作的Payload
   在Redux DevTools中找到persist/REHYDRATE动作，检查它的payload：

• 如果payload为空，说明本地存储里根本没写入数据，要先排查persist写入的逻辑；
• 如果payload有数据但state没更新，说明对应的reducer未正确处理REHYDRATE动作。

5. 临时关闭StrictMode测试
   React 18的StrictMode会触发某些函数/生命周期的双重调用，可能干扰redux-persist的初始化流程。先移除<React.StrictMode>标签再测试，如果数据能恢复，再针对性调整代码适配StrictMode。

6. 确认persistStore初始化时机
   确保persistStore(store)在store创建完成后立即执行，不要放在异步逻辑或延迟调用中。同时检查saga等中间件是否拦截或干扰了persist相关的动作。

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