react 持久化存储数据

1. 安装redux-persist

npm install --save redux-persist
yarn add redux-persist
复制代码

2. 配置项

import {persistStore, persistReducer} from 'redux-persist';
// 引入机制二选一
import storage from 'redux-persist/lib/storage'; // localeStorage 机制
import storageSession from 'redux-persist/lib/storage/session // sessionStorage机制

// 黑白名单二选一
// BLACKLIST: 黑名单
const persistConfig = {
  key: 'root', // key是storage的存储的key
  storage: storage / storageSession, // 
  blacklist: ['userInfo'] // 只有 userInfo 不会被存在缓存
};

// WHITELIST: 白名单
const persistConfig = {
  key: 'root',
  storage: storage / storageSession,
  whitelist: ['userInfo'] // 只有 userInfo 会被存在缓存
};

/**创建 reducer, 导出*/
const myPersistReducer = persistReducer(storageConfig, reducers);
const store = createStore(myPersistReducer);
export const persistor = persistStore(store);

export default store;
复制代码

3. 最外层文件引入 store

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';

import Index from '@/container/index';
import store, { persistor } from './redux/store';

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