React中Redux Toolkit结合Redux Persist实现状态持久化失败求助

我希望页面刷新后能保留Redux状态，因此尝试用Redux Persist，参考了相关教程但因为自己用的是Redux Toolkit的configureStore写法，和教程里的方式不一样，多次尝试都失败了，控制台提示"couldn't find app store"。以下是我的代码，求指导实现方法：

原代码 #

store.js #

// store.js
import { configureStore } from "@reduxjs/toolkit";
import appSlice from './appSlice';
  
const store = configureStore({
    reducer: {
        app: appSlice.reducer,
    }
});

export default store

index.js #

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { App } from './App';
import store from './data/store';
import './index.css'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// const store = configureStore({ reducer: App });
// const store = createStore(Reducer)
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/*" element={<App/>} />
        </Routes>
        </Router>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

解决方案 #

要在Redux Toolkit中集成Redux Persist，需要调整store配置并添加状态持久化的包裹组件，具体步骤如下：

1. 安装依赖 #

首先确保已安装redux-persist：

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

2. 修改store.js配置 #

用persistReducer包装根reducer，同时创建persistor实例，适配Redux Toolkit的configureStore：

// store.js
import { configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage作为存储介质
import appSlice from './appSlice';

// 持久化配置
const persistConfig = {
  key: 'root', // 存储的根标识
  storage,
  // 可选：如果有不需要持久化的slice，添加blacklist，比如 blacklist: ['tempSlice']
};

// 用persistReducer包装原始根reducer
const persistedReducer = persistReducer(persistConfig, {
  app: appSlice.reducer,
});

export const store = configureStore({
  reducer: persistedReducer,
  // 禁用persist相关action的序列化检查，避免Redux Toolkit报错
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }),
});

export const persistor = persistStore(store);

3. 修改index.js，添加PersistGate #

用PersistGate包裹路由组件，确保状态恢复完成后再渲染页面：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'; // 引入PersistGate
import { App } from './App';
import { store, persistor } from './data/store'; // 同时导入store和persistor
import './index.css'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      {/* PersistGate会等待状态恢复完成后再渲染内部组件 */}
      <PersistGate loading={null} persistor={persistor}>
        <Router>
          <Routes>
            <Route path="/*" element={<App/>} />
          </Routes>
        </Router>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

关键说明 #

• persistConfig中的storage可以替换为redux-persist/lib/storage/session来使用sessionStorage
• PersistGate的loading属性可设置状态恢复时显示的加载组件，设为null表示无加载提示
• 配置serializableCheck忽略persist相关action，是因为这些action包含非序列化的存储对象，会触发Redux Toolkit的默认检查报错

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