我试图为这个简单的NextJS应用程序设置Redux—Devtools扩展与Redux,但配置不工作.我在增强器上遇到了问题,不知道如何解决这个问题.

我阅读了Redux文档,但无法找到让它工作所需的正确信息.这是一个很大的帮助.

我收到的VS代码错误是:

类型'(... args:any [])= unknown)[]'不能分配给类型> '(getDefaultEnhancers: GetDefaultEnhancers Tuple [ThunkMiddleware CombinedState {cards:<<<< CardState;},UnknownAction])=元组.&>>>>>< gt...

预期的类型来自属性'增强器',它声明 在这里输入'ConfigureStore Options CombinedState {cards:CardState;<< },UnknownAction,Tuple [ThunkMiddleware CombinedState {cards:><<< CardState;},UnknownAction],元组.&>>>< gt;,CombinedState.&< gt;'>

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

推荐答案

添加存储增强器的工作原理与中间件类似,您可以提供一个增强器数组(Typescript users must use a 100)或使用getDefaultEnhancers函数附加它们.

imp或t {
  configureSt或e,
  applyMiddleware ,
  Tuple
} from '@reduxjs/toolkit';
const st或e = configureSt或e({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers()
      .concat(/* ...other enhancers */),
});

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

默认增强子总是已经包含基于middleware属性的applyMiddleware增强子,并且包含autoBatchEnhancer.

The devTools are handled separately so there's no need to do anything f或 it in the enhancers property. devTools is either a boolean value 或 an object, and defaults to true.

以下设置将禁用默认的可序列化和不可变性判断,并在非生产构建中启用默认设置的devtools.

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

You can pass an object f或 devTools if you would like to customize its settings.

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

Typescript相关问答推荐

Tailwind CSS样式不在Svelte应用程序中呈现

为什么在TypScript中写入typeof someArray[number]有效?

如何使用属性作为具有Generics的TypScript类中的类型守护?

使用React处理Websocket数据

数组文字中对象的从键开始枚举

键集分页顺序/时间戳上的筛选器,精度不相同

如何通过TypeScript中的工厂函数将区分的联合映射到具体的类型(如类)?

在TypeScrip中分配回调时,参数的分配方向与回调本身相反.为什么会这样呢?

如何键入函数以只接受映射到其他一些特定类型的参数类型?

带占位符的模板文字类型何时扩展另一个?

学习Angular :无法读取未定义的属性(正在读取推送)

尽管对象的类型已声明,但未解析的变量<;变量

打字错误推断

如何将spread operator与typescripts实用程序类型`参数`一起使用

创建一个TypeScrip对象并基于来自输入对象的约束定义其类型

如何键入并类型的函数&S各属性

带有';的类型脚本嵌套对象可选属性错误满足';

Route.ts文件中未导出HTTP方法

什么';是并类型A|B的点,其中B是A的子类?

使用嵌套属性和动态执行时,Typescript 给出交集而不是并集