关于redux持久化的配置记录

前提是安装好redux相关关于在ts中使用最新版redux的方法记录_奋斗在前端的实习小白的博客-CSDN博客

1.下载 npm install redux-persist 

git地址：GitHub - rt2zz/redux-persist: persist and rehydrate a redux store

在项目根目录中配置好PersistGate标签

//redux持久化
import { PersistGate } from "redux-persist/integration/react";


<Provider store={store}>
    <PersistGate loading={null} persistor={ persistor }>
        <HashRouter>
            <IndexRouter />
        </HashRouter>
    </PersistGate>
</Provider>

2.store中配置

/**
 * redux持久化引入
 * */
import { persistStore, persistReducer } from 'redux-persist'
// @ts-ignore
import storage from 'redux-persist/lib/storage';


const persistConfig = {
    key: `root`,
    version: 1,
    storage,
    blacklist: [], //黑名单配置
    whitelist: ['CollapsedReducer', 'LoadingReducer'], // 需要持久化的项
};



//合并多个reducers
const rootReducer = combineReducers({CollapsedReducer,LoadingReducer});

// 数据持久化
const persistedReducer = persistReducer(persistConfig, rootReducer);


const store = configureStore({
    reducer:persistedReducer
});

const persistor = persistStore(store)
export {
    store,
    persistor
};

组件中使用方法不变跟以往使用redux代码一样