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

Posted 2023-02-19

【中文标题】redux-resist 防止在刷新时丢失数据

【英文标题】：redux-resist losing data on refresh

【发布时间】：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 开发工具配置时会发生什么。

【参考方案1】：

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

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

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