如何在RTK查询中配置存储多个中间件

Question

redux-toolkit 给出原始文档--

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 警告： reducerPath“getmoviedetails”处 RTK 查询 API 的中间件尚未添加到商店中。自动缓存收集、自动重新获取等功能将不可用。

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 切片，以及帖子和用户的单独端点定义。这使您可以通过定义跨端点的标签关系来有效地利用自动重新获取。

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