React-Native blacklist some keys from a single reducer not working with rtk

[thechaudharysab]

I just have one reducer, managing one global state and I want to blacklist some of the keys. I used Redux Persist and added those keys in the blacklist array but I can still see them getting persisted.

Here is how I have setup the persist and store in App.js:

// ... other code
  const sagaMiddleware = createSagaMiddleware();
  const rootReducer = combineReducers({ mainReducer });

  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blacklist: ['alertMessage', 'isLoading']
  };

  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const middlewares = [sagaMiddleware];

  const store = configureStore({
    reducer: persistedReducer,
    middleware: middlewares
  });

  persistStore(store); // persistor

  sagaMiddleware.run(mainSaga);

// ... other code

Now I have one globalState from which I have two keys alertMessage and isLoading to be avoided and the rest of the store can be persisted.

The solutions I have found are catering nested persist and in my case, I have it's straightforward, one state and one reducer that updates the value. The problem is if say isLoading was true and I exit the app and open it again the state gets persisted so it stays true.

UPDATE:

I have tried giving key names as:

blacklist: ['mainReducer.alertMessage', 'mainReducer.isLoading']

Because my State tree is

{
▶_persist: {rehydrated: true, version: -1}
▶mainReducer: {alertMessage: null, isLoading: true, isUserLoggedIn: false, loginType: null…}
}

If I exit the app when isLoading is true it persists. That's what I'm not able to figure out how to blacklist.

[PiotrKujawa]

You need to nest your config to blacklist specific keys from your mainReducer. Take a look at this section of the readme file https://github.com/rt2zz/redux-persist#nested-persists. Or you can also use the package I created to get a nested config of redux-persist, using a dot notation as you mentioned blacklist: ['mainReducer.alertMessage', 'mainReducer.isLoading']. https://github.com/PiotrKujawa/redux-deep-persist

Ooops, now I feel like I'm spamming issues in this repo with my solution. That's not the first time but looks like it is helpful so far.

[thechaudharysab]

@PiotrKujawa I tried doing that

const sagaMiddleware = createSagaMiddleware();

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

  const blacklistPersistConfig = {
    key: 'blacklistItems',
    storage: AsyncStorage,
    blacklist: ['mainReducer.alertMessage', 'mainReducer.isLoading']
  }

  const rootReducer = combineReducers({
    blacklistItems: persistReducer(blacklistPersistConfig, mainReducer),
    mainData: mainReducer
  })

  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const middlewares = [sagaMiddleware];

  const store = configureStore({
    reducer: persistedReducer,
    middleware: middlewares
  });

  persistStore(store); // persistor

But then I get error in selectors as the state just becomes undefined in persist.

[PiotrKujawa]

Your configuration is incorrect. You made three mistakes. You defined a blacklist for a key and all its subsets which doesn't make sense. You use dot notation which is possible only with the redux deep persist package, and besides this, there's no mainReducer key. I would suggest using redux deep persist and you will see how easily you can define a blacklist for any nested properties.