在Redux Toolkit中使用redux-persist进行状态持久化

news2024/11/19 7:34:30

在这里插入图片描述

在 Redux Toolkit 中使用 redux-persist 持久化插件的步骤如下:

安装依赖

npm install redux-persist

配置 persistConfig

在 Redux store 配置文件中(例如 rootReducer.js)，导入必要的模块并配置持久化选项:

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

// Redux Toolkit Slices
import counterSlice from './counterSlice';

const rootReducer = combineReducers({
  counter: counterSlice.reducer
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['counter'] // 指定需要持久化的 reducer 键名
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default persistedReducer;

创建持久化的 Redux store

在 Redux store 创建文件中(例如 store.js)，创建持久化的 store 并导出 persistor 实例:

import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';
import persistedReducer from './rootReducer'; // 导入上面配置的持久化根 reducer

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false, // 避免由于使用 Immutable.js 而引发的序列化检查错误
  }),
});

const persistor = persistStore(store);

export { store, persistor };

在 React 应用程序入口文件中使用 PersistGate

在 React 应用程序的入口文件中(例如 index.js)，使用 PersistGate 组件包裹根组件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);