How to whitelist nested state field?

[sos1ck]

I want to save in storage one full reducer, and only one field from other reducer. How can I do this? I found e.g. this gh issue, but all attempts (from gh link and other sources) turned out to be a failure.

const persistConfig = { key: "root", storage, whitelist: ["first"], transforms: [createWhitelistFilter("second", ["counter"])] };

codesandbox example

It works for first reducer, nothing happens with the second, when I want to storage only counter field from reducer.

Any Ideas?

[peterdu98]

For those who are looking for the solution, you can have a look at this website. This solution works well in my case (react-redux v6).

Basically, there are three additions in your code, especially the storeConfig.js file.

1. Add reducer(s) that you want to store some fields of it in the blacklist of rootPersistConfig. (e.g. loginReducer)
2. Create a variable storing the persistConfig for that reducer. (e.g. loginPersistConfig)
3. Add persistReducer(loginPersistConfig, loginReducer) into rootReducer

[PiotrKujawa]

Here is what you can do using my package redux-deep-persist

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

const config = getPersistConfig({
    key: 'root',
    storage: LocalStorage, // whatever storage you use
    whitelist: [
        '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
})