如何配置RTK查询中的多个中间件

Question

redux-toolkit given original doc——

import { configureStore } from '@reduxjs/toolkit'
// Or from '@reduxjs/toolkit/query/react'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'
export const store = configureStore({
reducer: {
// Add the generated reducer as a specific top-level slice
[pokemonApi.reducerPath]: pokemonApi.reducer,
},
// Adding the api middleware enables caching, invalidation, polling,
// and other useful features of `rtk-query`.
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(pokemonApi.middleware),
})
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)

我的代码

import { configureStore } from '@reduxjs/toolkit'
import newletterReducer from '../slicers/newletter/newsletterSlicer'
import { setupListeners } from '@reduxjs/toolkit/query'
import { getmoviesdetails } from '../slicers/service/getmoviedetails'
import { authService } from '../slicers/service/auth/authService'
export const store = configureStore({
reducer: {
newsletter: newletterReducer,
[getmoviesdetails.reducerPath]: getmoviesdetails.reducer,
[authService.reducerPath]: authService.reducer,
},
middleware:
(getdefaultMiddleware) =>
{return getdefaultMiddleware().concat(getmoviesdetails.middleware)
,getdefaultMiddleware().concat(authService.middleware)}


})
setupListeners(store.dispatch)

他们给出了错误buildInitiate。ts:248 Warning:Middleware在reducerPath "getmoviedetails"尚未添加到商店。自动缓存收集、自动重新抓取等功能将不可用。

Answer 1

你可以这样做:

middleware:
(getdefaultMiddleware) =>
getdefaultMiddleware()
.concat([
getmoviesdetails.middleware, 
authService.middleware
])

基本上你可以通过一个数组传递你所有的中间件。

Answer 2

getdefaultMiddleware().concat(getmoviesdetails.middleware).concat(authService.middleware)

但是你真的应该只有一个api，除非这些api是完全独立的，永远不会有任何重叠的数据。

引用自文档:

通常，应用程序需要与之通信的每个基本URL应该只有一个API片。例如，如果您的站点同时从/api/posts和/api/users获取数据，那么您将使用/api/作为基础URL的单个api切片，并为posts和用户单独定义端点。这允许您通过定义跨端点的标记关系来有效地利用自动重新抓取。

出于可维护性的目的，您可能希望在多个文件中拆分端点定义，同时仍然维护包含所有这些端点的单个API片。请参阅代码分割，了解如何使用injectEndpoints属性将其他文件中的API端点注入到单个API片定义中。