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",
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),
});