Redux Persist使用

GitHub：https://github.com/rt2zz/redux-persist

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 来解决这种问题