react中数据持久化缓存redux-persist

一、安装redux-persist：

　　npm install redux-persist --save

二、.babelrc中增加redux-persist配置：

"plugins": [
        ["import",
            { 
                "libraryName": "redux-persist", 
                "libraryDirectory": "es"
            }
        ],
  ]

三、在生成store的文件加入redux-persist配置：

import createMiddleware from './../redux/middleware/index';
import createReducer from './../redux';
import  { persistReducer } from 'redux-persist';
import storage from 'redux-persist/es/storage'
import { applyMiddleware, createStore as _createStore } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const [__DEVELOPMENT__, __CLIENT__, __DEVTOOLS__] = [true, true, true];

const storageConfig = {
  key: 'root',
  storage,  // storage is now required
  blacklist: [], // reducer 里不持久化的数据
　whitelist: ['subject']  //reducer里持久化的数据
}

export default function createStore(history) {
    // Sync dispatched route actions to the history

    const middleware = [createMiddleware(), routerMiddleware(history)];

    let finalCreateStore;
    if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
        finalCreateStore = composeWithDevTools(
            applyMiddleware(...middleware),
        )(_createStore);
    } else {
        finalCreateStore = applyMiddleware(...middleware)(_createStore);
    }

    const store = finalCreateStore(persistReducer(storageConfig, createReducer));

    return store;
}

　　集中的middleware文件是自己写的中间件：

import fetch from 'axios';
import { Dispatch } from 'react-redux';

export default function clientMiddleware() {
    return ({ dispatch, getState }) => (next) => (action) => {
        if (typeof action === 'function') {
            return action(dispatch, getState);
        }

        const { url, types, data = {}, method = 'get' , ...rest } = action;
        if (!url) {
            return next(action);
        }

        const [REQUEST, SUCCESS, FAILURE] = types;
        next({ ...rest, type: REQUEST });
        const header = {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        };
        const actionPromise = fetch({
            url,
            method,
            headers: header,
            data
        });
        actionPromise
            .then(
                result => next({ ...rest, data: result.data, type: SUCCESS }),
                error => next({ ...rest, error, type: FAILURE })
            )
            .catch(error => {
                console.error('MIDDLEWARE ERROR:', error);
                next({ ...rest, error, type: FAILURE });
            });

        return actionPromise;
    };
}

四、最后在index.js根文件夹下加入redux-persist：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import routes from './router/routes';
import StoreConfig from './redux/store';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';
import { renderRoutes } from 'react-router-config';
import { ConnectedRouter } from 'react-router-redux';
import { createHashHistory } from 'history';
import 'antd/dist/antd.css';

const history = createHashHistory();
const store = StoreConfig(history);
const persistor = persistStore(store);

ReactDOM.render(
  
    
      
          {renderRoutes(routes)}
      
    
  ,
  document.getElementById('root')
);
registerServiceWorker();

经过上面的几步，redux-persist持久化缓存配置就完成了，在浏览器的localstorage里面可以看到数据已经存进去了

 

 

本文参考博客：

https://blog.csdn.net/ling369523246/article/details/84786962