Next JS Redux Devtools 扩展不起作用

Question

我正在尝试使用 Redux 为这个简单的 NextJS 应用程序设置 Redux-Devtools 扩展，但配置不起作用。我在增强器中遇到问题，并且不知道如何解决此问题。

我通读了 Redux 文档，但无法找到使其工作所需的正确信息。对此的任何指导都会有很大帮助。

我收到的 VS 代码错误是：

类型 '((...args: any[]) =>known)[]' 不可分配给类型 '(获取默认增强器： GetDefaultEnhancers，UnknownAction>]>>) => 元组<...>'。

预期的类型来自声明的属性“enhancers” 此处类型 'ConfigureStoreOptions，UnknownAction，Tuple<[ThunkMiddleware，UnknownAction>]>，Tuple<...>，CombinedState<...>>'

商店.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 };

Answer 1

添加存储增强器的工作方式与中间件类似，您可以提供一组增强器（Typescript 用户必须使用

Tuple

）或使用

getDefaultEnhancers

函数来附加它们。

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

或

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

默认增强器始终已包含基于

applyMiddleware

属性的

middleware

增强器，并且包含

autoBatchEnhancer

。

devTools 是单独处理的，因此无需在

enhancers

属性中对其执行任何操作。

devTools

是布尔值或对象，默认为

true

。

以下设置将禁用默认的可序列化性和不变性检查，并在非生产版本中启用具有默认设置的开发工具。

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

如果您想

自定义

其设置，您可以为devTools传递一个对象。

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