redux-resist 防止在刷新时丢失数据答案

【问题标题】：redux-resist losing data on refreshredux-resist 防止在刷新时丢失数据
【发布时间】：2021-07-07 05:23:42
【问题描述】：

我的App Component

我的Store

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { rootReducer } from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };

localStorage

刷新/重新加载后cartItems 变为空

package info

反应：“^17.0.2”，

react-redux: "^7.2.3",

redux-persist: "^6.0.0",

我可以看到数据存储在localStorage，但在页面刷新时，我丢失了数据

【问题讨论】：

当你在 createStore(persistedReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) 的位置添加 redux 开发工具配置时会发生什么。

标签： reactjs redux redux-persist

【解决方案1】：

通过传递“auth”将whitelist 添加到您的persistConfig 变量中，只有auth reducer 会被持久化。您可以在要保留的白名单中定义尽可能多的 reducer。这应该可以解决您的问题。

const persistConfig = {
     key: 'root',
     storage,
     whitelist: ["auth"] //
    };

阅读此 npm 自述文件以获得更多说明：https://www.npmjs.com/package/redux-persist#blacklist--whitelist

【讨论】：