Question

我想将我的一些缩减器列入黑名单，因为我的状态树越来越大，我得到了这个错误：

无法将调试会话写入localStorage：DOMException：无法在'Storage'上执行'setItem'：设置'redux-persist'的值超出配额。（...）“

我找到的解决方案是将一些不需要持久化的减速器列入黑名单。所以我在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 })
    })

但关键还是坚持......如何正确地做到这一点？

Answer 1

我在这里阅读了这个article，作者提出了一个很好的观点，黑名单并不是在你的redux商店中寻找属性的名称，而是在你的州。我也有同样的困惑。

在dev工具中仔细检查本地存储中实际保存的内容。确保将正确的名称列入黑名单。

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

2 个答案: