redux数据持久化

安装
npm init react-app my-app
npm i redux  react-redux redux-thunk redux-logger redux-promise  -S
npm install redux-persist -S

//创建store.js文件

import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
import promise from 'redux-promise' // 可以让 action 以异步的方式去写
import thunk from 'redux-thunk' // action 函数方式写
import { persistReducer } from 'redux-persist' // 合并 reduce
import storage from 'redux-persist/lib/storage' // 创建 store
// 多层对象 做数据持久化
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
import lx from '@/reducer/lx'
import form from '@/reducer/form'
import list from '@/reducer/list'

// 我要对哪些 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 }

routre.js文件：

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

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