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(

  <Provider store={store}>

    <PersistGate persistor={persistor}>

      <ConnectedRouter history={history} store={store}>

          {renderRoutes(routes)}

      </ConnectedRouter>

    </PersistGate>

  </Provider>,

  document.getElementById('root')

);

registerServiceWorker();

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

本文参考博客：

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