Redux多应用场景下RTK Query中间件路径匹配问题求助

方案1：将RTK Query reducer纳入子应用的组合reducer中 #

把子应用自身的业务reducer和RTK Query生成的reducer组合成一个子应用根reducer，再注入到store的对应子节点下，确保状态路径和中间件预期一致。

// 子应用reducer文件
import { combineReducers } from '@reduxjs/toolkit';
import { schedulerData } from './schedulerApi';

// 组合子应用内所有reducer（业务reducer + RTK Query reducer）
const planningAppReducer = combineReducers({
  // 子应用其他业务reducer
  // exampleFeature: exampleFeatureReducer,
  schedulerData: schedulerData.reducer
});

// 注入子应用reducer时，key为子应用标识，reducer为组合后的根reducer
injectReducer(store, { key: 'planningApp', reducer: planningAppReducer });

这样store的状态结构会是store.planningApp.schedulerData，完全匹配中间件需要的访问路径。

方案2：自定义RTK Query的状态获取逻辑 #

通过createApi的getStateForApi配置，告诉中间件从子应用节点下读取RTK Query的状态，无需修改reducer结构。

export const schedulerData = createApi({
  reducerPath: 'schedulerData',
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.REACT_APP_API_ENDPOINT + '/api/production/planning/',
  }),
  // 指定从子应用节点获取API状态
  getStateForApi: (state) => state.planningApp,
  endpoints: (builder) => ({
    getSchedulerEvents: builder.query({
      query: () => `get-scheduler`,
      transformResponse: (response) => {
        return {
          resources: response.resources,
        };
      },
    }),
  }),
});

这个配置会让RTK Query中间件自动从state.planningApp下查找schedulerData对应的状态，解决路径不匹配问题。

注意事项 #

确保store配置时已正确添加RTK Query的中间件：

import { configureStore } from '@reduxjs/toolkit';
import { schedulerData } from './schedulerApi';

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

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