如何动态添加Redux中间件？rtk-query场景动态注入中间件方案咨询

首先明确问题根因：RTK Query的缓存、请求去重、自动重连等核心能力，不仅依赖对应API实例的reducer被正确注入，还要求配套中间件被注册到Redux的中间件链路中。只注入reducer的情况下，请求全链路逻辑不会被RTK Query拦截，自然无法触发缓存逻辑。

方案1：使用RTK官方内置的动态中间件能力（无需额外引入第三方库） #

Redux Toolkit 1.9+ 版本内置了createDynamicMiddleware工具，专门用于支持动态注入中间件的场景，使用方式如下：

1. 初始化store阶段预埋动态中间件代理

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

// 实例化动态中间件
export const dynamicMiddleware = createDynamicMiddleware()

export const store = configureStore({
  reducer: {},
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().prepend(dynamicMiddleware.middleware)
})

2. 注入RTK Query对应资源时同时注入reducer和中间件

import { userApi } from './services/userApi'
import { dynamicMiddleware, store } from './store'
import { injectReducer } from 'redux-injectors'

// 注入reducer（沿用现有逻辑）
injectReducer(userApi.reducerPath, userApi.reducer)
// 动态注入对应API的中间件
dynamicMiddleware.addMiddleware(userApi.middleware)

注意：必须保证中间件注入时机早于对应API的第一次调用，否则首次请求不会触发缓存逻辑

方案2：使用第三方库redux-dynamic-middlewares #

如果你使用的RTK版本低于1.9，无法使用内置能力，可以用该库实现需求：

1. 初始化store时注册动态中间件载体

import { configureStore } from '@reduxjs/toolkit'
import { dynamicMiddlewares } from 'redux-dynamic-middlewares'

export const store = configureStore({
  reducer: {},
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(dynamicMiddlewares)
})

2. 动态注入中间件

import { userApi } from './services/userApi'
import { store } from './store'
import { injectReducer } from 'redux-injectors'

injectReducer(userApi.reducerPath, userApi.reducer)
store.addMiddleware(userApi.middleware)

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