React 數據持久化

1.   安裝 npm i redux-persist

2.  引入

import { persistStore } from 'redux-persist'

import { PersistGate } from 'redux-persist/lib/integration/react'

 

3.

ReactDOM.render(

  <Provider store={store}>

  <PersistGate loading={null} persistor={persistStore(store)}>

    <Router />

    </PersistGate>

  </Provider>,

  document.getElementById('root')

)

 

4. store.js 文件

　　

import { persistReducer } from 'redux-persist' 

import storage from 'redux-persist/lib/storage' 

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

 

 

// 我要對哪些 reduce 的 state 做數據持久化

const rootPersistConfig = {

  key: 'root',

  storage,

  stateReconciler: autoMergeLevel2,

  // 白名單 [reducer 目錄內的 reduce 文件名]

  whitelist: ['list'],  

}

 

 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

// 抽離出一個需要持久化的公共 reduce

const myPersistReducer = persistReducer(

  rootPersistConfig,

  combineReducers({

    lx,

    form,

    list,

  }

))

// createStore(reduce, 中間件)

const store = createStore(

  myPersistReducer,

  composeEnhancers(applyMiddleware(thunk, promise))

)

export { store }