redux-persist 黑名单不起作用
Posted
技术标签:
【中文标题】redux-persist 黑名单不起作用【英文标题】:redux-persist blacklist not working 【发布时间】:2018-03-28 16:31:34 【问题描述】:我想将我的一些减速器列入黑名单,因为我的状态树越来越大,我收到了这个错误:
无法将调试会话写入localStorage:DOMException:无法在“Storage”上执行“setItem”:设置“redux-persist”的值超出了配额。(...)“
我找到的解决方案是将一些不需要持久化的 reducer 列入黑名单。所以我的App.js
中有这段代码
import React, Component from 'react';
import Provider from 'react-redux';
import BrowserRouter as Router, Route, Switch from 'react-router-dom';
import persistStore from 'redux-persist'
import Initializer from './components';
import store from './store';
class App extends Component
constructor()
super()
this.state = rehydrated: false
componentWillMount()
persistStore(store, blacklist: ['project', 'comment', 'project', 'jobOrder'], () =>
this.setState( rehydrated: true )
)
render()
if(!this.state.rehydrated)
return <Initializer />;
return (
<Provider store=store>
<Router>
<div>
<Switch>
... some Routes
</Switch>
</div>
</Router>
</Provider>
);
export default App;
我有这个rootReducer
:
import reducer as formReducer from 'redux-form'
import combineReducers from 'redux';
import userAuthReducer from './userAuthReducer';
import jobOrderReducer from './jobOrderReducer';
import clientReducer from './clientReducer';
import userReducer from './userReducer';
import persistReducer from './persistReducer';
import commentReducer from './commentReducer';
import projectReducer from './projectReducer';
import teamReducer from './teamReducer';
export default combineReducers(
userAuth: userAuthReducer,
jobOrder: jobOrderReducer,
job_order: jobOrderReducer,
client: clientReducer,
user: userReducer,
form: formReducer,
persist: persistReducer,
comment: commentReducer,
project: projectReducer,
team: teamReducer
);
我的persistReducer.js
import PERSIST from '../actions/types';
export default (state = [], action) =>
switch(action.type)
case PERSIST:
return ...state, ...action.payload
default:
return state;
;
还有我的store.js
import compose, createStore, applyMiddleware from 'redux';
import autoRehydrate from 'redux-persist';
import thunk from 'redux-thunk';
//import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
,
compose(
applyMiddleware(thunk, /*logger*/),
autoRehydrate())
);
//persistStore(store);
export default store;
但是运行应用程序,我仍然会得到列入黑名单的持久状态,如您在此处看到的:
我尝试将黑名单键更改为:
persistStore(store, blacklist: ['reduxPersist:project', 'reduxPersist:comment', 'reduxPersist:project', 'reduxPersist:jobOrder'], () =>
this.setState( rehydrated: true )
)
但是密钥仍然存在...如何正确执行此操作?
【问题讨论】:
改代码后你清除浏览器中的localStorage
了吗?
是的,但是在再次清除并重新加载页面后它仍然存在..
这很奇怪...
【参考方案1】:
我在这里读到了article,作者提出了一个很好的观点,黑名单不是在你的 redux 存储中寻找属性的名称,而是在你的状态中。我也有同样的困惑。
仔细检查开发工具中实际保存在本地存储中的内容。确保您将正确的名称列入黑名单。
【讨论】:
【参考方案2】:您需要在两个配置对象(父对象和子对象)中定义blacklist
数组。
const rootPersistConfig =
key: 'root',
storage: AsyncStorage,
blacklist: ['appReducer'], // 2: Need to add child reducer key here too.
;
const appPersistConfig =
key: 'appReducer',
storage: AsyncStorage,
// 1: Below are the keys to blacklist
blacklist: ['snackbar', 'dayThought', 'updatingBohoId', 'snackbar_notif'],
;
【讨论】:
以上是关于redux-persist 黑名单不起作用的主要内容,如果未能解决你的问题,请参考以下文章
TailwindCSS / PurgeCSS 白名单不起作用
使用 quick.db 的 Discord.js V12 黑名单命令不起作用