Как удалить данные из localstorage redux-persist?

Question

JekaHC @JekaHC

React
Redux

Как удалить данные из localstorage redux-persist?

У меня есть index.js с persist конфигурацией:

import {configureStore, combineReducers} from "@reduxjs/toolkit"
import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import userData from "./userData";
import userName from "./userName";
import loadingStatus from "./loadingStatus";

const rootReducer = combineReducers({
    data: userData,
    username: userName,
    loaded: loadingStatus
});


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


const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
  })

export const persistor = persistStore(store);
export default store;

И Slicer "userData.js"

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


const userData = createSlice({
    name: 'data',
    initialState: {
        data : [],
    },
    reducers: {
        getData(state, action) {
            return { data: action.payload}    
        },
        removeData(state) {
            return {data: []}
        }
    },
});


export const {getData, removeData} = userData.actions;

export default userData.reducer;

Итак, я хочу очистить свои данные в localStorage после нажатия на элемент в этом компоненте:

import { useSelector } from "react-redux";
import { removeData } from "../../store/userData.js";
import {
  Popup,
  Overlay,
  NavBarPopupHeader,
  NavBarPopupContainer,
  NavBarPopupImg,
  NavBarPopupClose,
  NavBarPopupContent,
  NavBarPopupTitle,
  NavBarPopupInfo,
  NavBarPopupContentImg,
  NavBarPopupFooter,
  NavBarPopupSignOut,
} from "./styled.js";

function NavBarPopup(props) {
  const { popupOpen, isPopupOpen } = props;

  const username = useSelector((state) => state.username.username);

  return (
    <>
      <Overlay onClick={() => isPopupOpen(false)} active={popupOpen}></Overlay>
      <Popup active={popupOpen}>
        <NavBarPopupHeader>
          <NavBarPopupClose
            src="./assets/close_white.svg"
            alt="close"
            onClick={() => {
              isPopupOpen(false);
            }}
          />
          <NavBarPopupContainer>
            <NavBarPopupImg />
          </NavBarPopupContainer>
        </NavBarPopupHeader>
        <NavBarPopupContent>
          <NavBarPopupTitle>You are logged as</NavBarPopupTitle>
          <NavBarPopupInfo>{username}</NavBarPopupInfo>
          <NavBarPopupContentImg src="./assets/popup_img.png" />
        </NavBarPopupContent>
        <NavBarPopupFooter>
          <NavBarPopupSignOut onClick={() => removeData()}>
            Sign Out...
          </NavBarPopupSignOut>
        </NavBarPopupFooter>
      </Popup>
    </>
  );
}

export default NavBarPopup;

Как это можно сделать (removeData сейчас не работает)?