How to make redux-persist blacklist for nested state?

[Luckygirlllll]

Here is my code for persistConfig and store, I want to add blacklist for tracking, but not for all tracking state, but only for tracking.checkingOut, tracking.checkingIn and ttracking.searching, how to do this correctly? I understand that if I want to remove tracking completely, I will need to write blacklist: ['tracking'] inside persistConfig, but I'm not sure what to do in case of nested states.

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
  }

const persistedReducer = persistReducer(persistConfig, reducers)

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export const store = createStoreWithMiddleware(persistedReducer);

export const persistor = persistStore(store);

if I will add blacklist like this: blacklist: ['tracking.checkingOut', 'tracking.checkingIn', 'tracking.searching'] will it work? or there should be different approach for this?

[JanithaR]

You need to follow the instructions under nested persists

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
blacklist: ['tracking']
  }

const trackingConfig = {
key: 'tracking',
storage: AsyncStorage,
blacklist: ['checkingOut', 'checkingIn', 'searching']
};

const rootReducer = combineReducers({
  tracking: persistReducer(trackingConfig, trackingReducer),
})

export default persistReducer(persistConfig, rootReducer)

[httpiga]

I've done what @JanithaR suggested and it works as it should, but now when I create the store with createStore(persistReducer, initialState), with initialState as below

type ApplicationState = {
  tracking: ReturnType<typeof trackingReducer>
}

const initialState = {
  tracking: {
    checkingOut: false,
    checkingIn: false,
    searching: false,
    persistedValue1: 'foo',
    persistedValue2: 'bar'
  } as trackingState,
}

Typescript throws an error saying that a property _persist is missing from initialState :

Types of property 'tracking' are incompatible.
Property '_persist' is missing in type 'trackingState' but required in type {...}
persistReducer.d.ts(6, 5): '_persist' is declared here.

Is this a bug in TS definitions or am I doing something wrong?

[geocine]

How do you do it for the 3rd level ? Root(0) -> Reducer(1) -> Property(2) -> Property(2)

[sebastien-lb]

@geocine I think the idea is to create several persist config and to chain them. I have a similar issue and I think it could be awesome to have the possibility to target nested object with something similar to the get function of Lodash: https://lodash.com/docs/4.17.15#get

[sebastien-lb]

If someone ever comes here, I managed to blacklist nested state using the transform feature: https://github.com/rt2zz/redux-persist#transforms.

[valeriik]

My variant is to use createTransform from 'redux-persist', full example provided here: https://stackoverflow.com/questions/58483934/how-to-make-redux-persist-blacklist-for-nested-state/63845127#63845127

[PiotrKujawa]

Here is what you can do using my package redux-deep-persist, which can be helpful in creating a redux-persist config.

import { getPersistConfig } from 'redux-deep-persist';

const config = getPersistConfig({
    key: 'root',
    storage: LocalStorage, // whatever storage you use
    blacklist: [
        'a1.b1.c1',  
        'a2.b2.c2',  
        'a3',
        'a4.b4.c4.no.matter.how.deep.you.go'
    ],
    rootReducer, // your root reducer must be also passed here
    ... // any other props from original redux-persist config, omitting the stateReconciler
});

[mtrabelsi]

transformer solution = boilerplate. we need a proper fix, not hacky boilerplate. otherwise it makes sense to do this in vanilla JS.