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 白名单不起作用

将 react-native 模块列入黑名单不起作用

使用 quick.db 的 Discord.js V12 黑名单命令不起作用

Phonegap 和 Android 4.4.2 白名单不起作用

Django CORS 标头白名单不起作用

Android Phonegap 3 webapp白名单不起作用