redux-persist v6 持久化数据 & 页面刷新缓存初始化问题

一、 项目安装 redux-persist

npm i redux-persist -S

二、 在导出store的文件中配置加入代码(redux/store.js)

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import reducer from './reducer';
// WHITELIST: 白名单
const persistConfig = {
  key: 'root',
  storage: storage
  whitelist: ['user'] // 需要缓存的白名单,不设置则全部缓存
};
const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(persistedReducer);
export const persistor = persistStore(store);

export default store;

三、在react入口文件进行最终的配置（index.js）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import store, { persistor } from './redux/store';
import App from './App';
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router>
        <Routes>
          <Route path="/*" element={<App />}></Route>
        </Routes>
      </Router>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

更新完数据查看缓存里有 persist:root 字段 就说明配置成功并生效了

但是，当我刷新浏览器的时候，缓存的数据被初始化了

原因

改为

const userReducer = (state = userState, action) => {
  const { type, payload = {} } = action;
  switch (type) {
    case LOGIN:
      return { ...state, ...payload };
    default:
      return state;
  }
};

这次刷新浏览器数据也不会丢失了