Redux Toolkit中配置configureStore添加多个RTK Query中间件出现警告的问题咨询

这个警告的原因很明确：你没有正确将getmoviedetails的中间件添加到Redux Store中，问题出在你写的middleware配置函数里。

看一下你代码里的这段：

middleware: (getdefaultMiddleware) => {return getdefaultMiddleware().concat(getmoviesdetails.middleware) ,getdefaultMiddleware().concat(authService.middleware)}

这里你用了JavaScript的逗号运算符，它的作用是依次执行多个表达式，但只会返回最后一个表达式的结果。也就是说，你实际上只把authService.middleware添加到了中间件数组里，而getmoviesdetails.middleware被丢弃了，这就导致Redux Store找不到对应getmoviedetails的中间件，从而触发警告。

正确的多RTK Query中间件配置方式 #

你只需要把两个中间件都合并到同一个默认中间件数组里，有两种简洁的写法：

方式1：链式调用concat

middleware: (getDefaultMiddleware) => 
  getDefaultMiddleware()
    .concat(getmoviesdetails.middleware)
    .concat(authService.middleware)

方式2：一次性传入多个中间件组成的数组

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

修改后的完整代码 #

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) => 
    getDefaultMiddleware()
      .concat(getmoviesdetails.middleware)
      .concat(authService.middleware)
})

setupListeners(store.dispatch)

额外提醒 #

每个RTK Query生成的API slice（比如你的getmoviesdetails和authService）都需要满足两个条件才能正常工作：

1. 将它的reducer挂载到Store的reducer对象中，对应[api.reducerPath]: api.reducer的写法
2. 将它的middleware添加到Store的中间件数组中

只要这两步都做对，RTK Query的缓存自动清理、自动重取等核心功能就能正常生效了。

内容的提问来源于stack exchange，提问作者Gagan Rihal