当前位置：首页 > article >正文

详细讲一下React中Redux的持久化存储（Redux-persist）

article 2025/1/5 23:37:28

1.安装依赖：

npm install redux-persist

2. 基础配置：

// store.js
import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认是 localStorage

// 持久化配置
const persistConfig = {
    key: 'root',        // 存储的键名
    storage,           // 存储方式
    whitelist: ['user', 'settings'],  // 需要持久化的reducer
    blacklist: ['temp'] // 不需要持久化的reducer
}

// 包装 reducer
const persistedReducer = persistReducer(persistConfig, rootReducer)

// 创建 store
export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                // 忽略 redux-persist 的动作类型
                ignoredActions: ['persist/PERSIST']
            }
        })
})

// 创建持久化 store
export const persistor = persistStore(store)

3.在应用中使用：

// App.jsx
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'

function App() {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <YourApp />
            </PersistGate>
        </Provider>
    )
}

4.高级配置：

const persistConfig = {
    key: 'root',
    storage,
    // 数据转换
    transforms: [
        encryptTransform({
            secretKey: 'my-secret-key'
        })
    ],
    // 存储版本控制
    version: 1,
    migrate: (state) => {
        // 版本迁移逻辑
        return Promise.resolve(state)
    },
    // 合并策略
    stateReconciler: autoMergeLevel2
}

5.自定义存储引擎：

// 使用 sessionStorage
import createWebStorage from 'redux-persist/lib/storage/createWebStorage'
const sessionStorage = createWebStorage('session')

// 使用 AsyncStorage (React Native)
import AsyncStorage from '@react-native-async-storage/async-storage'

const persistConfig = {
    key: 'root',
    storage: AsyncStorage
}

6.选择性持久化：

// 单独配置某个 reducer
const userPersistConfig = {
    key: 'user',
    storage,
    whitelist: ['profile', 'preferences']
}

const userReducer = persistReducer(userPersistConfig, baseUserReducer)

// 在 store 中使用
const store = configureStore({
    reducer: {
        user: userReducer,
        other: otherReducer
    }
})

7.处理持久化状态：

// 监听持久化状态
persistStore(store, null, () => {
    console.log('重置完成')
}).purge() // 清除持久化数据

// 在组件中使用
function App() {
    return (
        <PersistGate 
            loading={<LoadingView />}
            persistor={persistor}
            onBeforeLift={() => {
                // 在恢复数据之前执行
            }}
        >
            <YourApp />
        </PersistGate>
    )
}

8.实际应用示例：

// userSlice.js
import { createSlice } from '@reduxjs/toolkit'

const userSlice = createSlice({
    name: 'user',
    initialState: {
        profile: null,
        token: null
    },
    reducers: {
        setUser: (state, action) => {
            state.profile = action.payload
        },
        setToken: (state, action) => {
            state.token = action.payload
        },
        logout: (state) => {
            state.profile = null
            state.token = null
        }
    }
})

// store.js
const persistConfig = {
    key: 'user',
    storage,
    whitelist: ['token'] // 只持久化 token
}

const persistedUserReducer = persistReducer(
    persistConfig,
    userSlice.reducer
)

// 使用
function App() {
    const dispatch = useDispatch()
    const token = useSelector(state => state.user.token)
    
    useEffect(() => {
        if (token) {
            // 自动登录逻辑
        }
    }, [token])
    
    return (
        // ...
    )
}

主要功能：