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

score 2 · Answer 1 · answered Aug 31 '18 at 18:00

2

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

answered Aug 31 '18 at 18:00

Wayne Bloss

5,370
7
50
81

score 1 · Answer 2 · answered Sep 11 '20 at 10:40

1

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?

answered Sep 11 '20 at 10:40

Stich

2,331
1
15
31

mohit arora · Answer 3 · 2021-08-06T08:38:10.817

1

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);

edited Aug 06 '21 at 08:38

answered Mar 16 '21 at 16:45

mohit arora

592
6
10

Password should be blacklisted in this case, right? – halbano Aug 03 '21 at 18:17
1

I misunderstood it. but now I have edited the answer. – mohit arora Aug 06 '21 at 08:39

halbano · Answer 4 · 2021-12-09T15:17:45.820

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],
};

Where is the `omit` coming from? – alansaldivar Dec 09 '21 at 08:43 — alansaldivar, Dec 09 '21 at 08:43
Lodash: https://docs-lodash.com/v4/omit/ – halbano Dec 09 '21 at 15:16 — halbano, Dec 09 '21 at 15:16

score 0 · Answer 5 · answered Apr 03 '22 at 11:58

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

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

5 Answers5

Linked