React 18 仿携程项目【二十九】redux数据持久化插件~redux-persist

数据持久化，一般利用web storage 存储数据（注：此种存储是存储在浏览器中的，而不是服务器上）；

数据存储分为临时存储sessionstorage和本地存储localstorage。

 

数据持久化存储步骤：

插件名：

redux-persist（redux-persist": "^6.0.0）

链接：https://github.com/rt2zz/redux-persist

（1）安装插件

npm install redux-persist

（2）store.ts中引入persistStore、persistReducer、storage 

import { persistStore,persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";


const persistConfig = { //redux-persist配置
    key: "root", //命名空间，必选项
    storage,    //数据保存方式，默认是localStorge,也可以使用cookie，必选项
    whiteList: ["userSignIn"]  //白名单,只保存userSignIn数据
}


//组合多个reducer
const rootReducer = combineReducers({
    language: languageReducer,
    productRecommend: productRecommendReducer,
    productDetail: ProductDetailSlice.reducer,
    productSearch: ProductSearchSlice.reducer,
    userSignIn: userSignInSlice.reducer
})

//redux-persist升级配置reducer
const persistedRed  = persistReducer(persistConfig,rootReducer)

//传入rootReducer和中间件函数applyMiddleware(thunk)
// const store = createStore(rootReducer,applyMiddleware(thunk,actionLog,i18nLog));
const store = configureStore({
    reducer: persistedRed,
    //异步处理中间件,保留redux-toolskit默认的getDefaultMiddleware并连接上自定义的中间件
    middleware: (getDefaultMiddleware)=> getDefaultMiddleware({serializableCheck:false}).concat(actionLog,i18nLog),
    devTools: true , //开启redux-dectools插件
})

//redux-persist升级配置store
const persistor = persistStore(store)

//获取store中的所有reducer的数据类型并导出
export type RootState = ReturnType<typeof store.getState>
//提取dispatch数据类型
export type AppDispatch = typeof store.dispatch;

//导出store
export default {store,persistor};

 getDefaultMiddleware({serializableCheck:false})中配置serializableCheck来防止redux-persist报错

（3）index.ts中使用prodiver包裹（PersistGate，是redux-persist针对react-redux生产的一款prodiver，相当于prodiver，包含persistor（必选）和loading（非必选）两个属性）

import rootStore from "./redux/store";
import { PersistGate } from 'redux-persist/integration/react';
import { Spin } from 'antd';


<Provider store={rootStore.store}>
        <PersistGate persistor={rootStore.persistor} loading={<Spin/>}>
             <App />
        </PersistGate>
</Provider>