Here is the content of my store.ts file:
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import {
FLUSH,
PAUSE,
PERSIST,
persistReducer,
persistStore,
PURGE,
REGISTER,
REHYDRATE
} from 'redux-persist';
import { combineReducers } from 'redux';
import { configureStore, createAsyncThunk } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { authApi } from './services/authApi';
import adminReducer from './slices/adminSlice';
import { categoryApi } from './services/categoryApi';
import { PersistPartial } from 'redux-persist/es/persistReducer';
// Setting up a persist config
const persistConfig = {
key: 'root',
storage, // Using localStorage as the default storage
whitelist: ['admin'] // Defining slices to be persisted (e.g., 'admin')
};
// Combining reducers
const rootReducer = combineReducers({
[authApi.reducerPath]: authApi.reducer,
[categoryApi.reducerPath]: categoryApi.reducer,
admin: adminReducer
});
// Applying persistence to the root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false
}).concat([categoryApi.middleware, authApi.middleware]), // Merging both middlewares
devTools: true
});
// Enabling refetching on focus/refocus (optional but recommended)
setupListeners(store.dispatch);
export const persistor = persistStore(store);
// Enabling refetching on focus/refocus (optional but recommended)
setupListeners(store.dispatch);
// Store types definition
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Content of categoryApi.ts:
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Category } from 'src/models/category_type';
export const categoryApi = createApi({
reducerPath: 'category',
baseQuery: fetchBaseQuery({ baseUrl: 'base_url' }),
endpoints: (builder) => ({
getCategories: builder.query<{categories: Category[]}, void>({
query: () => '/categories'
})
})
});
export const {
useGetCategoriesQuery
} = categoryApi;
The structure of categoryApi is similar to authApi mentioned earlier.
I am facing difficulty in resolving an error and have tried several solutions without success.
Both authApi and categoryApi are created using createApi and fetchBaseQuery functions.
I attempted to merge rtk middleware authApi.middleware and categoryApi.middleware with default middleware and encountered type mismatch errors.
Please help me as I am feeling exhausted, and thank you in advance.