reactjstypescriptreact-reduxredux-toolkitredux-persist

unable to import modules from redux-persist with react 18


I'm trying to import persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, from redux-persist. But these modules are not being loaded in the file. Because when I click on one of these it do not take me to node_modules. And I am getting this error:

Error: No data found at state.baseApi. Did you forget to add the reducer to the store?

Here is code of my file

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query/react';
import { baseApi } from './base-api';
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import { announcementSlice } from '../../components/molecules/Announcement/state/announcement.slice';

export const store = configureStore({
  reducer: {
    announcements: announcementSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(baseApi.middleware),
});

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

setupListeners(store.dispatch);

I am using the following versions:

"react": "^18.2.0",
"react-redux": "^8.1.2",
"redux-persist": "^6.0.0",
"@reduxjs/toolkit": "^1.8.5",
"typescript": "^5.1.6",

Solution

  • Finally, after debugging I found out that I was missing the base API reducer path in the reducer object. After changing following piece of code it worked.

    export const store = configureStore({
      reducer: {
        [baseApi.reducerPath]: baseApi.reducer,
        announcements: announcementSlice.reducer,
      },
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: {
            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
          },
        }).concat(baseApi.middleware),
    });