redux-persist - how do you blacklist/whitelist nested state

Question

So I have a credentials object which contains a password and a username

payload: Object
  credentials: Object
    password: ""
    username: ""

and I want to blacklist password in the reducer configuration, something like

const authPersistConfig = {
    key: 'AuthReducer',
    storage: storage,
    blacklist: ['credentials.password']
};

If I use this code, both the credential states end up being blacklisted. I want to persist the username but not the password.

It might be that redux-persist only persists top-level state or it might be a syntax error, or something else entirely - any ideas?

Many thanks

Preposition

Answer 1

You can use the NPM package called redux-persist-transform-filter as described in redux-persist issue #277 - Whitelist reducer subproperty only?

Mangan

Answer 2

Or if you want not completely remove the keys but just clear any of data in any nested state objects, here is example using createTransform from 'redux-persist'

How to make redux-persist blacklist for nested state?

Exospore

Answer 3

You can do nested persit config.

const rootPersistConfig: any = {
  key: "root",
  timeout: 500,
  storage: AsyncStorage,
  blacklist: ["credentials"],
};

const credentialsPersistConfig: any = {
  key: "credentials",
  storage: AsyncStorage,
  whitelist: ["username"],
};

const rootReducer = combineReducers({
  credentials: persistReducer(credentialsPersistConfig, CredentialReducer),
});

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);

Trio

Password should be blacklisted in this case, right? – Disfeature

I misunderstood it. but now I have edited the answer. – Trio

Answer 4

Instead of persist root key like this :

    const rootPersistConfig = {
  key: 'root',
  storage,
}

We can use different reducer key:

 const userPersistConfig = {
  key: 'userReducer',
  storage,
  whitelist: ['user', 'isLoading']
}
const cartPersistConfig = {
  key: 'cart',
  storage
}
const rootReducer = combineReducers({
  cart: persistReducer(cartPersistConfig, cart),
  filter,
  userReducer: persistReducer(userPersistConfig, userReducer),
  wishlist,
  
})

store.js file:

 const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware({
            serializableCheck: false,
        }).concat(apiSlice.middleware);
    },
});
const persistor = persistStore(store);

Counterblast

Answer 5

You can use either pick or omit to whitelist or blacklist any nested value of a particular one-level store entry. Here's an example:

let blacklistTransform = createTransform((inboundState, key) => {
    if (key === 'credentials') {
        return omit(inboundState, ['password']);
    } else {
        return inboundState;
    }
});

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blacklist: ['credentials'], // Avoid credentials entry
    transforms: [blacklistTransform],
};

Whitelist example:

// Just persist dropdown default values
const whitelistTransform = createTransform((inboundState, key) => {
    // Select values from the route reducer
    if (key === 'route') {
        return pick(inboundState, [
            'lastSelectedSchoolYear , lastSelectedSite',
            'lastSelectedState',
        ]);
    }
    return inboundState;
});

const persistConfig = {
    key: 'root',
    storage,
    transforms: [whitelistTransform],
};

Disfeature

Where is the omit coming from? – Impeller

Lodash: docs-lodash.com/v4/omit – Disfeature

Answer 6

I recently released an open-source package called Redux Deep Persist, which can be very helpful in creating Redux Persist config for nested state no matter how deep it is. It can help you in this specific situation.

This notation blacklist: ['credentials.password'] is only allowed when you use getPersistConfig method.

Here is what your config would look like:

    import { getPersistConfig } from 'redux-deep-persist';
    import storage from "redux-persist/es/storage/session";

    const config = getPersistConfig({
        key: 'root',
        storage,
        blacklist: [
            'credentials.password',
        ],
        rootReducer, // your root reducer must be also passed here
        ... // any other props from the original redux-persist config omitting the stateReconciler
    })

You can read more in the official documentation of redux-deep-persist https://github.com/PiotrKujawa/redux-deep-persist/blob/master/README.md

Calk