I’m using redux persist to store my data. When i open my page there is no data and i see the indexedDB is empty in localforage of browser. But then i add a data it creates a persist:root to keep that data, but when i deleted that data , persist:root is still in there . I want to remove it too when it is empty and useless.

Here is my store for more information :

'use client';

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import {
  useDispatch as useDispatchBase,
  useSelector as useSelectorBase,
} from 'react-redux';
import { setupListeners } from '@reduxjs/toolkit/query';
import {
  persistReducer,
  persistStore,
  PERSIST,
  REHYDRATE,
} from 'redux-persist';
import localForage from 'localforage';

import organizationSlice from './slices/organizationSlice';
import { campaignApi } from './rtkApi/campaignApi';
import globalSlice from './slices/globalSlice';
import entrepreneurSlice from './slices/entrepreneurSlice';
import physicalPartnerSlice from './slices/physicalPartnerSlice';
import legalPartnerSlice from './slices/legalPartnerSlice';
import { phoneNumberApi } from './rtkApi/phoneNumbersApi';
import { organizationSectorApi } from './rtkApi/organizationSectorApi';
import { activityTypeApi } from './rtkApi/activityTypeApi';
import { partnerStatusApi } from './rtkApi/partnerStatusApi';
import { voenOrganizationApi } from './rtkApi/voenOrganizationApi';
import { curatorApi } from './rtkApi/curatorApi';
import { fileApi } from './rtkApi/fileApi';
import limitContractSlice from './slices/limitContractSlice';
import filterLimitContractsSlice from './slices/filterLimitContractsSlice';

const persistConfig = {
  key: 'root',
  storage: localForage,
  version: 1,
  timeout: 0,
  whiteList: [
    'organization',
    'legalPartner',
    'physicalPartner',
    'entrepreneur',
    'limitContracts',
    'filterFields',
  ],
};

const rootReducer = combineReducers({
  organization: organizationSlice,
  limitContracts: limitContractSlice,
  physicalPartner: physicalPartnerSlice,
  legalPartner: legalPartnerSlice,
  global: globalSlice,
  entrepreneur: entrepreneurSlice,
  filterFields: filterLimitContractsSlice,
  [campaignApi.reducerPath]: campaignApi.reducer,
  [phoneNumberApi.reducerPath]: phoneNumberApi.reducer,
  [organizationSectorApi.reducerPath]: organizationSectorApi.reducer,
  [activityTypeApi.reducerPath]: activityTypeApi.reducer,
  [partnerStatusApi.reducerPath]: partnerStatusApi.reducer,
  [voenOrganizationApi.reducerPath]: voenOrganizationApi.reducer,
  [curatorApi.reducerPath]: curatorApi.reducer, // Add the phoneNumberApi reducer
  [fileApi.reducerPath]: fileApi.reducer, // Add the phoneNumberApi reducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware: any) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [PERSIST, REHYDRATE],
      },
    }).concat(
      campaignApi.middleware,
      phoneNumberApi.middleware,
      organizationSectorApi.middleware,
      activityTypeApi.middleware,
      partnerStatusApi.middleware,
      voenOrganizationApi.middleware,
      curatorApi.middleware,
      fileApi.middleware
    ), // Add the phoneNumberApi middleware
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;

// Inferred type: { customers: customersState}
export type AppDispatch = typeof store.dispatch;

// Utilize `useDispatch` for TypeScript
export const useDispatch = () => useDispatchBase<AppDispatch>();

// And utilize `useSelector`
export const useSelector = <TSelected = unknown>(
  selector: (state: RootState) => TSelected
): TSelected => useSelectorBase<RootState, TSelected>(selector);

setupListeners(store.dispatch);

export const persistor = persistStore(store);