React 数据持久化 store.js

// 刷新页面的时候 持久化的数据有重新存储到 reducer中
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import promise from 'redux-promise'
import thunk from 'redux-thunk'
// 数据持久化
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
import * as rdc from '@/reduce'

// console.log('====================================');
// console.log(rdc);
// console.log('====================================');

//我要对那些state做数据持久化
const rootPersistConfig = {
    key: 'root',
    storage: storage, 
    stateReconciler: autoMergeLevel2   // 多层
}

//单独为 某个 reduce 做数据持久化
const myPersistReducer = combineReducers({
    home: rdc.home,
    login: persistReducer(
        rootPersistConfig,
        rdc.login
    )
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

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

export { store }


// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import 'antd-mobile/dist/antd-mobile.less'
import './rem.js';
import './reset.css';
import './styles/iconfont.css'   // 字体图标
import './styles.less'


import Route from './route'  // 路由
import { store } from './store'  //store
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'   //数据持久化
import { PersistGate } from 'redux-persist/lib/integration/react'


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

还可以 单独的抽离一个只存持久化数据的文件 persist.js

//我要对那些state做数据持久化
const rootPersistConfig = {
    key: 'root',
    storage: storage, 
    stateReconciler: autoMergeLevel2,   // 多层
	whitelist: ['persist'], // 要持久化的数据
}

//单独为 某个 reduce 做数据持久化
const myPersistReducer = persistReducer(
	rootPersistConfig,
	combineReducers({
	    persist: rdc.persist,   
	})
)