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

Answer 1

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

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?

Answer 3

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