I'm unable to concat custom middle ware with default middlewares in store configuration with redux persist and rtk query

Question

its 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';

// Create a persist config
const persistConfig = {
  key: 'root',
  storage, // Use localStorage as the default storage
  whitelist: ['admin'] // Add slices that you want to persist (e.g., 'admin')
};

// Combine reducers
const rootReducer = combineReducers({
  [authApi.reducerPath]: authApi.reducer,
  [categoryApi.reducerPath]: categoryApi.reducer,
  admin: adminReducer
});

// Persist the root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
  reducer: persistedReducer,

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    }).concat([categoryApi.middleware, authApi.middleware]), // Concatenate both middlewares

  devTools: true
});

// Optional, but recommended to enable refetching on focus/refocus
setupListeners(store.dispatch);

export const persistor = persistStore(store);

// Optional, but recommended to enable refetching on focus/refocus
setupListeners(store.dispatch);

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

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;

categoryApi look like above and same authApi

I'm unable to find a solution why this error occur, i tried multiple solution but its not work

authApi and categoryApi created with createApi, fetchBaseQuery.

i try to concat rtk middleware authApi.middleware and categoryApi.middleware with default middleware its give some type mismatch errorerror

pls help me i am very tired and thank in advance.

Matti Sig · Accepted Answer · 2024-10-11 09:03:59Z

0

If categoryApi and authApi use the same "baseQuery" it is recommended to only have one apiSlice, and injecting the various endpoints into that one API. See documentation https://redux-toolkit.js.org/rtk-query/usage/code-splitting

If however you need different API slices you can try this

middleware: (getDefaultMiddleware) => getDefaultMiddleware()
     .concat(authApi.middleware)
     .concat(categoryApi.middleware)

answered Oct 11, 2024 at 9:03

Matti Sig

4962 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nasirkhan Pathan Over a year ago

thanks for reply i try this solution but its give same error error: Tuple<[ThunkMiddleware<Partial<some description>>] is not assignable to type 'Tuple<Middlewares<Partial<some description>>]

Drew Reese · Accepted Answer · 2024-10-11 15:50:36Z

Based on the comment in the code where you are adding the middlewares the code doesn't do what you think it does.

export const store = configureStore({
  reducer: persistedReducer,

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    }).concat([categoryApi.middleware, authApi.middleware]), // Concatenate both middlewares

  devTools: true
});

You are not concatenating two middlewares, you are concatenating one array of two middlewares. Pass the middlewares directly.

Example:

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    })
      .concat(
        categoryApi.middleware,
        authApi.middleware
      ),
  devTools: true
});

For more complete details for using getDefaultMiddleware and Typescript see the Official Documentation.

Collectives™ on Stack Overflow

I'm unable to concat custom middle ware with default middlewares in store configuration with redux persist and rtk query

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related