Redux Typescript中的中间件在尝试创建新存储时出现问题

2nc8po8w  于 5个月前  发布在  TypeScript
关注(0)|答案(2)|浏览(56)
import { configureStore } from "@reduxjs/toolkit";
import { userAPI } from "./api/userAPI";

export const server = import.meta.env.VITE_SERVER;

export const store = configureStore({
    reducer: {
        [userAPI.reducerPath]: userAPI.reducer,
    },
    middleware: (mid) => [ <---
        ...mid(),
        userAPI.middleware
    ]
});

字符串
当我尝试使用Typescript创建新的redux存储与中间件时,出现错误消息。我不明白为什么middleware以红色突出显示,即使它的格式是正确的。有人可以帮助或解释这个问题吗?

cygmwpex

cygmwpex1#

在Redux Toolkit中,您需要使用getDefaultMiddleware函数来获取默认中间件,并将其与自定义中间件合并组合。
试试这个

middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(userAPI.middleware)

字符串

5ssjco0h

5ssjco0h2#

在不知道实际错误消息是什么的情况下,我可以肯定地说,您的代码没有使用正确的语法在Typescript中添加额外的中间件。
参见中间件

中间件

一个回调函数,它将接收getDefaultMiddleware作为参数,并返回一个中间件数组。
如果提供了这个选项,它应该返回您想要添加到存储中的所有中间件函数。configureStore将自动将这些函数传递给applyMiddleware
如果没有提供,configureStore将调用getDefaultMiddleware并使用它返回的中间件函数数组。
有关middleware参数如何工作以及默认添加的中间件列表的更多详细信息,请参阅getDefaultMiddleware docs page

Tuple

Typescript用户需要使用Tuple示例(如果不使用getDefaultMiddleware结果,则已经是Tuple),以获得更好的推断。

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

configureStore({
  reducer: rootReducer,
  middleware: () => new Tuple(additionalMiddleware, logger),
})

字符串
纯JavaScript用户可以自由使用纯数组。
如果只是添加自己的中间件,则返回Tuple

import { configureStore } from "@reduxjs/toolkit";
import { userAPI } from "./api/userAPI";

export const store = configureStore({
  reducer: {
    [userAPI.reducerPath]: userAPI.reducer,
  },
  middleware: () => new Tuple(userAPI.middleware),
});


如果您还想使用默认的中间件,请使用getDefaultMiddleware函数中的concatprepend方法。

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(userAPI.middleware),


如果你有多个中间件要添加,你仍然只是使用相同的concatprepend方法。

middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware()
    .concat(
      analytics,
      logger,
      userAPI.middleware,
      // etc
    ),

相关问题