如何使用redux-persist实现Redux状态刷新浏览器后不丢失

步骤1：安装依赖 #

首先安装redux-persist库：

npm install redux-persist
# 或者使用yarn
yarn add redux-persist

步骤2：修改Store.js配置 #

调整你的store代码，加入持久化逻辑，同时解决你截图中的序列化报错问题，修改后代码如下：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
// 引入redux-persist相关依赖
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage作为存储介质

// 持久化基础配置
const persistConfig = {
  key: 'root', // 存储到本地的键名，可自定义
  storage, // 指定存储介质
  whitelist: ['user'] // 配置需要持久化的reducer模块，这里仅保留user模块
}

// 包装userReducer得到支持持久化的reducer
const persistedUserReducer = persistReducer(persistConfig, userReducer);

export const store = configureStore({
  reducer: {
    user: persistedUserReducer,
  },
  // 关闭序列化检查，解决你遇到的redux-persist非序列化内容报错
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

步骤3：修改根目录Index.js #

使用PersistGate组件包裹App，用于应用启动时自动恢复本地存储的Redux状态：

import { store, persistor }  from './app/store';
import { PersistGate } from 'redux-persist/integration/react'; // 引入持久化门控组件

ReactDOM.render(
    <Provider store={store}>
      {/* loading属性可传入自定义加载组件，加载持久化状态过程中展示，不需要可传null */}
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>,
  document.getElementById('root')
);

补充说明 #

• 配置完成后登录状态会自动同步到localStorage，刷新页面时会自动恢复到Redux中，无需额外处理
• 调用logout清空user状态时，本地存储的内容也会自动同步更新
• 如果需要切换为会话级存储（关闭浏览器就清空），只需将storage导入替换为import storageSession from 'redux-persist/lib/storage/session'，再修改persistConfig中的storage值为storageSession即可

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