如何在RTK查询中配置具有不同基本URL的不同api切片缩减器的存储

Question

我想用RTK查询创建不同的API切片，使用不同的API端点基本URL。例如：

第一个API切片(apiSlice.js(：

const baseURL = "https://example.com/api";
const baseQuery = fetchBaseQuery({
baseUrl: baseURL,
...
});
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: baseQuery,
endpoints: builder => ({
...
});
});

第二个API切片(webApiSlice.js(：

const baseURL = "https://example.com/webapi";
const baseQuery = fetchBaseQuery({
baseUrl: baseURL,
...
});
export const webApiSlice = createApi({
reducerPath: 'webapi',
baseQuery: baseQuery,
endpoints: builder => ({
...
});
});

这是我的商店配置(store.js(：

import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';
import { webApiSlice } from './api/webApiSlice';
import { apiSlice } from './api/apiSlice';
const store = configureStore({
reducer: {
[webApiSlice.reducerPath]: webApiSlice.reducer,
[apiSlice.reducerPath]: apiSlice.reducer,
auth: authReducer,
... // other reducers
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(webApiSlice.middleware)
});
export default store;

我必须提到，webApiSlice.js用于获取具有/webapi地址的身份验证端点，而apiSlice.js用于具有/api地址的正常端点。

我在控制台上收到了这个警告：

警告：reducerPath上的RTK-Query API中间件；api"；尚未添加到存储中。自动缓存收集、自动重新蚀刻等功能将不可用。

如何在商店中使用不同的路由正确配置apiSlice和webApiSlice？

Answer 1

我认为你应该这样做：

import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';
import { webApiSlice } from './api/webApiSlice';
import { apiSlice } from './api/apiSlice';
const store = configureStore({
reducer: {
[webApiSlice.reducerPath]: webApiSlice.reducer,
[apiSlice.reducerPath]: apiSlice.reducer,
auth: authReducer,
... // other reducers
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware()
.concat(webApiSlice.middleware)
.concat(apiSlice.middleware)
});
export default store;