I want to blacklist some of my reducers because my state tree is getting bigger and im getting this error:
Could not write debug session to localStorage: DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'redux-persist' exceeded the quota.(…)"
The solution I found is to blacklist some reducers that doesn't need to be persisted. So I have this code in my 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;
and I have this 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
});
My persistReducer.js
import { PERSIST } from '../actions/types';
export default (state = [], action) => {
switch(action.type) {
case PERSIST:
return { ...state, ...action.payload }
default:
return state;
}
};
And my 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;
But running the App, I still get the blacklisted persisted state as you can see here:
I tried changing the blacklist keys to:
persistStore(store, { blacklist: ['reduxPersist:project', 'reduxPersist:comment', 'reduxPersist:project', 'reduxPersist:jobOrder']}, () => {
this.setState({ rehydrated: true })
})
But the keys are still persisting... How to properly do this?
I read this article here and the author made a good point, the blacklist isn't looking for the name of the attributes in your redux store, rather in your state. I had the same confusion.
Double check in dev tools what is actually being saved in your local storage. make sure you are blacklisting the correct names.
You need to define blacklist
array in both config objects (parent and child).
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'],
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.