React中如何结合Redux Toolkit使用redux-persist-transform-encrypt？

以下是完整实现代码，通过redux-persist-transform-encrypt对Redux存储的数据进行加密，结合Redux Toolkit与redux-persist完成持久化存储：

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cart";
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import { encryptTransform } from "redux-persist-transform-encrypt";

// 持久化配置，包含加密转换规则
const persistConfig = {
  key: 'root',
  storage, // 采用localStorage作为存储载体
  transforms: [
    encryptTransform({
      secretKey: "your-secure-secret-key", // 请替换为自定义加密密钥，生产环境切勿硬编码
      onError: (err) => {
        console.error("加密/解密操作出错:", err);
      }
    })
  ]
}

// 生成带持久化能力的reducer
const persistedReducer = persistReducer(persistConfig, cartReducer)

// 配置Redux Store
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略redux-persist的内置动作，避免序列化检查警告
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

// 创建persistor，用于在根组件中包裹应用
export const persistor = persistStore(store)

核心要点说明： #

• 加密密钥管理：加密密钥建议从环境变量读取，不要直接写入代码，防止密钥泄露。
• 序列化检查适配：redux-persist的几个内置动作不属于可序列化对象，必须在serializableCheck中忽略，否则Redux Toolkit会抛出警告。
• 存储介质替换：若需使用sessionStorage，可将storage替换为import storageSession from 'redux-persist/lib/storage/session'。

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