redux-persisit（持久化储存数据）配置 configureStore.js 文件本地储存 import s

在 React 实际项目开发中，我们常常会对一些数据进行存储缓存，防止用户刷新浏览器从而导致数据丢失问题。比如 token 、用户信息等......之前是通过手写一遍 localStorage 和 sessionStorage 储存，它们没有时间限制，但如果用localStorage来读写数据，工作量太大。so可直接引入 redux - persist库来储存数据（会把redux中store中的数据缓存到浏览器的 localStorage中）。

配置 configureStore.js 文件
本地储存 import storage from 'redux-persist/lib/storage'
会话储存 import storageSession from 'redux-persist/lib/storage/session'
其中 blacklist（黑名单） 来设置哪些数据不需要储存，因为项目中有些数据不需要储存。
而whitelist（白名单）声明需要储存的数据。

1 . 基本用法：

且需要用 PersistGate 包装根组件，这会延迟应用 UI 的呈现，直到您的持久状态被检索并保存到 redux 。防止数据没加载出来就切换组件。

注意： PersistGate加载道具可以为空，或任何反应实例，例如loading={<Loading />}

import { createStore,combineReducers,applyMiddleware,compose } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from "redux-persist/lib/storage"; //本地存储
import language from './language/languageReducer'

// 创建reducer对象
const allReducer = {
    language
}
// 缓存数据配置
const persistConfig = {
    key: "root",
    storage,
    whitelist: ["language"], //需要缓存的数据
    blacklist:[], //不需要缓存的数据
}
// 合并
const rootReducer  = combineReducers(allReducer)
const persistedReducer = persistReducer(persistConfig, rootReducer)
// 调试redux
const store = createStore(persistedReducer,compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()))

export const persistor = persistStore(store)
export default store

2 . 变换 createTransform（）

允许自定义持久化和重新水化的状态对象。

为了生效，需要将变换添加到 PersistReducer 的配置对象中。

const persistConfig = {
  key: 'root',
  storage: storage,
  transforms: [SetTransform]
};

redux-persisit（持久化储存数据）

1 . 基本用法 ：

2 . 变换 createTransform（ ）

1 . 基本用法：

2 . 变换 createTransform（）