I am trying to setup Redux Devtools extension for this simple NextJS app with Redux, but the configuration is not working. I am having issue in enhancer and have no clue how to resolve this issue.
I read through the redux documentation but unable to find the right information thats needed to get it to work. Any guidance to this will be of great help.
VS code Error I am receiving is
Type '((...args: any[]) => unknown)[]' is not assignable to type '(getDefaultEnhancers: GetDefaultEnhancers<Tuple<[ThunkMiddleware<CombinedState<{ cards: CardState; }>, UnknownAction>]>>) => Tuple<...>'. The expected type comes from property 'enhancers' which is declared here on type 'ConfigureStoreOptions<CombinedState<{ cards: CardState; }>, UnknownAction, Tuple<[ThunkMiddleware<CombinedState<{ cards: CardState; }>, UnknownAction>]>, Tuple<...>, CombinedState<...>>'This is my Store.ts file
import { configureStore } from "@reduxjs/toolkit";import { composeWithDevTools } from "@redux-devtools/extension";import { TypedUseSelectorHook, useDispatch as useAppDispatch, useSelector as useAppSelector,} from "react-redux";import { applyMiddleware, compose } from "redux";import rootReducer from "./rootReducer";// And use redux-batched-subscribe as an example of adding enhancers// ----------------------------------------------------------------------// Define the root state type using the ReturnType utility of TypeScriptexport type RootState = ReturnType<typeof rootReducer>;// Define the type for dispatching actions from the storeexport type AppDispatch = typeof store.dispatch;const composeEnhancers = compose( applyMiddleware, composeWithDevTools() );const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, immutableCheck: false, }), devTools: process.env.NODE_ENV !== 'production', enhancers: [composeEnhancers],});// Extract the dispatch function from the store for convenienceconst { dispatch } = store;const useSelector: TypedUseSelectorHook<RootState> = useAppSelector;// Create a custom useDispatch hook with typed dispatchconst useDispatch = () => useAppDispatch<AppDispatch>();// Export the Redux store, dispatch, useSelector, and useDispatch for use in componentsexport { store, dispatch, useSelector, useDispatch };