redux数据持久化-redux-persist

最新推荐文章于 2025-05-10 11:30:35 发布

原创最新推荐文章于 2025-05-10 11:30:35 发布 · 737 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #npm #前端

文章讲述了如何在Redux应用中实现数据持久化，即使页面刷新后数据也能保持原来的状态。通过引入redux-persist库，将特定的reducer数据存储在localstorage中，而不是cookie，并在主入口文件中使用PersistGate组件来处理数据恢复。案例展示了store.js和index.js的配置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、应用场景：刷新页面后重新加载，数据仍保持原来的状态。redux中的数据存储在localstorage中，而不是cookie中。不是所有的数据都需要永久存储，而是选择性的永久存储。

二、安装命令：npm i redux-persist --save

三、案例

1.store.js

// 1.引入redux
import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
import CityReducers from "./reducers/CityReducers";
import TabbarReducers from "./reducers/TabbarReducers";
import CinemaListReducers from "./reducers/CinemaListReducers";
import ReduxThunk from 'redux-thunk'; // 中间件
import ReduxPromise from 'redux-promise';
// 数据持久化
import {persistStore, persistReducer} from "redux-persist";
import storage from 'redux-persist/lib/storage'

// combineReducers:合并函数
const reducer = combineReducers({CityReducers, TabbarReducers, CinemaListReducers})

// 数据持久化:是指页面刷新后，数据仍然能够保持原来的状态
const persistConfig = {
    key: 'myPersist',
    storage,
    whitelist: ['CityReducers'] // 设置某个reducer数据持久化.whitelist:白名单；blacklist:黑名单
}
const persistedReducer = persistReducer(persistConfig, reducer)
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(ReduxThunk, ReduxPromise)));
let persistor = persistStore(store)
export {
    store,
    persistor
}

export default store

2.主入口文件index.js

import {persistor} from './Store'
import {PersistGate} from 'redux-persist/lib/integration/react';
<PersistGate loading={null} persistor={persistor}>
     ...
</PersistGate>