redux数据持久化

1.安装

cnpm i npm install redux-persist -S

2.store.js代码

import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
//promise可以让action实现异步
import promise from 'redux-promise'
//thunk可以让action以函数的方式书写
import thunk from 'redux-thunk'
import list from '@/reducer/list'
import operate from '@/reducer/operate'
import myUpdate from '@/reducer/myUpdate'

import { persistReducer } from 'redux-persist' // 合并 reduce
import storage from 'redux-persist/lib/storage' // 创建 store

// 多层对象 做数据持久化
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

// 我要对哪些 reduce 的 state 做数据持久化
const rootPersistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2,
  // 白名单 [reducer 目录内的 reduce 文件名]
  whitelist: ['page'],  
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

// 抽离出一个需要持久化的公共 reduce
const myPersistReducer = persistReducer(
  rootPersistConfig,
  combineReducers({
    list,
    operate,
    myUpdate
  }
))

const store = createStore(
  myPersistReducer,
  composeEnhancers(applyMiddleware(promise, thunk))
)

export { store }

3.index.js代码

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import './index.less'
import { Provider } from 'react-redux'
import { store } from './store'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/lib/integration/react'


ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistStore(store)}>
      <Router />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)