1、功能
能实现redux数据的持久化
2、安装
npm install redux-persist
3、使用
将persistReducer和persistStore添加到我们的Store
// configureStore.js import { createStore } from 'redux' import { persistStore , persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' // 默认为localStorage for web // commonReducers ={auth,tag,socketIO} import commonReducers from './reducer'; const reducers = combineReducers({ ...commonReducers, }); const persistConfig = { key : 'root' , storage , } const persistedReducer = persistReducer ( persistConfig , rootReducer ) export default ( ) => { let store = createStore ( persistedReducer ) let persistor = persistStore ( store ) return { store , persistor } }
1. persistReducer(config, reducer):
参数:
config:
- 所需配置: key, storage(storage默认为localStorage)
- 值得注意的其他配置: whitelist, blacklist, version, stateReconciler, debug
reducer:任何reducer都可以使用,通常是返回顶级的reducer--combineReducers
返回值:
一个经过处理的reducer
2. persistStore(store, [config, callback])
参数:
store:redux store,将做持久化存储
config: 如果要避免在调用后立即开始持久化persistStore,请设置选项 manualPersist。示例:{ manualPersist: true }然后可以在任何时候使用persistor.persist(). 如果在进行persistStore呼叫时您的存储尚未准备好,您通常希望这样做。
callback:回调函数
返回值:
- 返回持久化对象
3 .persistor
- 持久化对象由 persistStore 使用以下方法返回:
- .purge()
- 从磁盘清除状态并返回一个承诺
- .flush()
- 立即将所有挂起状态写入磁盘并返回一个承诺
- .pause()
- 暂停持久性
- .persist()
- 恢复坚持
可以设置黑白名单
// BLACKLIST const persistConfig = { key : 'root' , storage : storage , blacklist : [ 'tag' ] // 不会被持久化 } ; // WHITELIST const persistConfig = { key : 'root' , storage : storage , whitelist : [ 'auth' ] // 会被持久化 } ;
黑白名单仅作用1层,例如 whitelist : [ 'tag.name' ]是不会起作用的,只能作用到tag层
在应用中引入
const App = ( ) => { return ( < Provider store = { store } > < PersistGate loading = { null } persistor = { persistor } > < RootComponent / > < / PersistGate > < / Provider > ) ; } ;
该PersistGate组件是延迟渲染,直到持久化完成,在loading = { null }中,可以替换为我们自己的loading组件:loading={<Loading />}
处理到这一步就可以在实现redux的持久化存储了,在localStorage中可以看到记录:
{ "auth": "{"user":{"token":"776ac3fd-fbf6-4fec-82b0-6e3a5abdced8","userId":"6167a3cd239b8f3bc5dbc36c","isAdmin":true,"nickname":"zhangm9","username":"zhm","role":"admin"}}", "socketIO": "{"socketIO":null}", "tag": "{"loadTagsStatus":"notStart","tags":[]}", "_persist": "{"version":-1,"rehydrated":true}" }
从persist中的数据可以看出,当状态对象被持久化时,它会被序列化JSON.stringify()。如果状态对象的某些部分无法映射到 JSON 对象,则序列化过程可能会以意想不到的方式转换状态的这些部分。例如,JSON 中不存在javascript Set类型。当您尝试通过 序列化 Set 时JSON.stringify(),它会转换为空对象。可能不是你想要的。官方提供了Transform 来解决这种问题