redux-persist whitelist not working with rtk

[orioch]

I am using the createSlice function from the rtk library to create multiple reducers in my Redux store. I am also trying to use redux-persist to save certain slices to local storage.
this store.js code is working well:

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import betSlice from "./features/betSlice";
import configSlice from "./features/configSlice";
import eventSlice from "./features/eventSlice";
import userDataSlice from "./features/userDataSlice";
import wsSlice from "./features/wsSlice";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
import modalsSlice from "./features/modalsSlice";

const persistConfig = {
  key: "root",
  storage,
};

const presistedReducers = combineReducers({
  wsSlice: persistReducer(persistConfig, wsSlice),
  eventSlice: persistReducer(persistConfig, eventSlice),
  betSlice: persistReducer(persistConfig, betSlice),
  configSlice: persistReducer(persistConfig, configSlice),
  userDataSlice: persistReducer(persistConfig, userDataSlice),
  modalsSlice: persistReducer(persistConfig, modalsSlice),
});
export const store = configureStore({
  reducer: presistedReducers,
  middleware: [thunk],
});

export const persistor = persistStore(store);

I am having trouble using the whitelist\blacklist options provided by redux-persist. when I try to use a whitelist to only persist the configSlice reducer like this:

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["configSlice"],
};

nothing is saved to local storage.

Similarly, when I try to use a blacklist, all of the reducers are saved to local storage.

All of the slices in my project are structured in the same way, using the createSlice function in this format:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {};
const nameSlice = createSlice({
name: 'nameSlice',
initialState,
reducers: {},
});

export const {} = nameSlice.actions;
export default nameSlice.reducer;

Can anyone explain why the whitelist and blacklist options are not working as expected, and how I can correctly configure redux-persist to only save certain slices to local storage?

[PiotrKujawa]

Is this exactly what your config looks like?

const persistConfig = { key: "root", storage, whiteList: ["configSlice"], };

It should be whitelist not whiteList

[orioch]

Is this exactly what your config looks like?

const persistConfig = { key: "root", storage, whiteList: ["configSlice"], };

It should be whitelist not whiteList

its not how my config looks like I didn't copy it good sorry my mistake...
its not working with "whitelist" also.

[PiotrKujawa]

I took a closer look at your config and I think this is a mistake you made:

configSlice: persistReducer(persistConfig, configSlice),
and your config looks like this
const persistConfig = { key: "root", storage, whitelist: ["configSlice"], };

That means you're trying to whitelist something which is expected to exist in

{
   configSlice: {
      configSlice // <- you're trying to persist this
   }
}

Your root is pointing at configSlice and you're trying to find/persist another configSlice inside of it.
You don't have to wrap each slice by persistReducer method, in your case, it doesn't have to be nested, you can wrap the entire root reducer (you named it as presistedReducers) unless you want to whitelist nested keys of configSlice and define different configs for each slice.
Building nested configuration is a bit confusing and may lead to issues like yours.