typescript - Next JS Redux Devtools-tillägg fungerar inte

Jag försöker ställa in Redux-Devtools-tillägget för denna enkla NextJS-app med Redux, men konfigurationen fungerar inte. Jag har problem med enhancer och har ingen aning om hur jag ska lösa detta problem.

Jag läste igenom Redux-dokumentationen men kunde inte hitta den information som behövs för att få det att fungera. Någon vägledning kring detta skulle vara till stor hjälp.

VS code-fel jag får är:

Typen '((...args: any[]) => unknown)[]' kan inte tilldelas typen '(getDefaultEnhancers: GetDefaultEnhancers, UnknownAction>]>>) => Tuple<...>'.

Den förväntade typen kommer från egenskapen 'enhancers' som deklareras här på typen 'ConfigureStoreOptions, UnknownAction, Tuple<[ThunkMiddleware, UnknownAction>]>, Tuple<...>, CombinedState<...>>'

Store.ts

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 TypeScript
export type RootState = ReturnType<typeof rootReducer>;

// Define the type for dispatching actions from the store
export 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 convenience
const { dispatch } = store;

const useSelector: TypedUseSelectorHook<RootState> = useAppSelector;

// Create a custom useDispatch hook with typed dispatch
const useDispatch = () => useAppDispatch<AppDispatch>();

// Export the Redux store, dispatch, useSelector, 
// and useDispatch for use in components
export { store, dispatch, useSelector, useDispatch };

Svar #1

Att lägga till store-förbättrare fungerar på samma sätt som middleware, du kan tillhandahålla en array av förbättrare (Typescript-användare måste använda ett Tuple) eller använda getDefaultEnhancers-funktionen för att lägga till dem.

import {
  configureStore,
  applyMiddleware ,
  Tuple
} from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers()
      .concat(/* ...other enhancers */),
});

eller

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
  enhancers: () => new Tuple(applyMiddleware, /* ...other enhancers */),
});

Standardförstärkarna inkluderar alltid redan applyMiddleware-förstärkaren baserat på middleware-egenskapen och inkluderar autoBatchEnhancer.

DevTools hanteras separat, så det finns inget behov av att göra något för det i enhancers-egenskapen. devTools är antingen ett booleskt värde eller ett objekt, och standardvärdet är true.

Följande inställning kommer att inaktivera standardkontroller för serialiserbarhet och oföränderlighet, och aktivera utvecklingsverktygen med standardinställningar i icke-produktionsbyggnader.

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
});

Du kan skicka ett objekt för devTools om du vill anpassa dess inställningar.

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production' && {
    maxAge: 100, // default 50
    trace: true, // default false
    ...etc
  },
});