redux持久化

redux的数据会随着浏览器刷新、关闭丢失，有些数据，我们希望能够持久化存储，redux-persist插件就能够很好的支持，而且还有白名单功能，可以很灵活的配置redux数据

参考文档：https://www.npmjs.com/package/redux-persist

1、安装持久化插件

npm i redux-persist -S

2、配置redux-persist

import { createStore } from 'redux';
// 持久化插件
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
// 导入redux数据
import reducer from './reducer';

// 配置持久化插件（blacklist和whitelist二选一，不要同时配置；都不配置，默认所有数据都持久化）
const persistConfig = {
  key: 'root',
  storage,
  // blacklist: ['ao'], // 黑名单，例：ao不会被持久化
  whitelist: ['ao'] // 白名单，例：只有ao会被持久化
}

const persistedReducer = persistReducer(persistConfig, reducer)

// 创建数据存储仓库
const store = createStore(persistedReducer,
  // 使用谷歌浏览器redux DevTools插件
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

persistStore(store)

export default store;

3、浏览器localStorage会存储redux数据，并且刷新浏览器数据不会丢失

可查看redux DevTools，检查redux数据变化