Redux-persist使用

  redux-persist做用是將store中的數據緩存到瀏覽器中，減小數據請求，每當白名單中的數據發生變化，纔會進行一次更新緩存的操做，而且這個數據緩存是存在localStorage中的，不是會話級別的緩存。

  安裝方式兩種：npm install --save redux-persist / yarn add redux-persist

  實現方式主要是依靠兩個方法：persistStore和persistReducer，使用persistReducer時須要指定persistConfig，這一項就是你須要緩存的數據處理項，它有着黑白名單的處理方式，還須要一個storage的協助：

 1 import {persistStore, persistReducer} from 'redux-persist';
 2 
 3 import storage from 'redux-persist/lib/storage';
 4 
 5 // BLACKLIST
 6 const persistConfig = {
 7   key: 'root', // key是放入localStorage中的key
 8   storage: storage, // storage簡單就能夠理解成localStorage的功能封裝吧，不過有時候因爲版本問題，必要在後一個storage上加一個default屬性，能夠在console中打出來判斷是否須要加
 9   blacklist: ['navigation'] // navigation不會被存入緩存中，其餘會，適用於少部分數據須要實時更新
10 };
11  
12 // WHITELIST
13 const persistConfig = {
14   key: 'root',
15   storage: storage,
16   whitelist: ['navigation'] // navigation會存入緩存，其餘不會存，適用於大多數數據並不會實時從後臺拿數據
17 };

  而後在處理reducer時用到persistReducer，一種是直接使用，另外一種你可能會使用到combineReducers，接下來就是建立store了，可能會用到中間件，不過此時不要理睬中間件建立store的過程，期間和你以前的建立方式同樣，在store建立好的外邊，加一句話，而後export裏包含persistor就好：

1 const reducers = persistReducer(persistConfig, reducer);
2  
3 const reducers = combineReducers({
4    depReducer: persistReducer(persistConfig, depReducer)
5 });
6 const persistor = persistStore(store);

  最後在ReactDOM.render()的時候引入另外一個組件：

 1 import {PersistGate} from 'redux-persist/lib/integration/react';
 2 
 3 ReactDOM.render(
 4   <Provider store={store}>
 5     <PersistGate persistor={persistor}>
 6       <Dep />
 7     </PersistGate>
 8   </Provider>,
 9   document.getElementById('app')
10 );