如何在Redux Toolkit(RTK)的createApi中添加请求参数？

看起来你在把createAsyncThunk的请求逻辑迁移到Redux Toolkit的createApi时遇到了参数或请求配置的问题，我们来一步步排查并修正：

首先对比你的原createAsyncThunk代码和当前的createApi代码，核心有几个不匹配的地方，我们逐一调整：

1. 请求地址的一致性问题 #

原代码直接请求的是GLOBALVIEWS_API这个完整地址，但当前createApi使用了BASE_URL + '/titlestest'的组合。如果这两个地址不一致，会直接导致请求到错误的接口，自然无法满足参数要求。

2. 响应数据的提取逻辑缺失 #

原代码返回的是response.data.Item，但默认的createApi会返回整个响应对象，这会导致后续使用数据时和原逻辑不一致。

修正后的完整代码 #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 先确保BASE_URL + 接口路径等于原GLOBALVIEWS_API地址
// 比如原GLOBALVIEWS_API是"https://api.example.com/titlestest"，则拆分如下
const BASE_URL = 'https://api.example.com';
const MEDIA_ENDPOINT = '/titlestest';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders: (headers) => {
      // 原代码没有用到getState，这里可以简化
      headers.set('Content-Type', 'application/json');
      headers.set('X-API-KEY', HBO_KEY);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getMedia: builder.query({
      // 确保query函数正确接收id参数并映射到titleId
      query: (id) => ({
        url: MEDIA_ENDPOINT,
        params: { titleId: id },
      }),
      // 还原原逻辑，只返回需要的Item数据
      transformResponse: (response) => response.data.Item,
    }),
  }),
});

// 导出自动生成的Hook，用于组件中调用
export const { useGetMediaQuery } = apiSlice;

关键验证点 #

• 确认地址匹配：检查BASE_URL + MEDIA_ENDPOINT是否完全等于原代码中的GLOBALVIEWS_API，如果原地址是完整URL，拆分后才能保证请求正确。
• 参数传递正确性：在组件中调用Hook时，必须传入正确的id参数，比如：

  const { data, isLoading, error } = useGetMediaQuery(yourActualTitleId);
  

• 查看请求详情：打开浏览器网络面板，确认请求的URL是否带有?titleId=xxx的参数，以及请求头是否包含X-API-KEY和正确的Content-Type。

如果还是有问题，可以在query函数里加console.log(id)，确认参数是否被正确接收，这能快速定位是传参问题还是配置问题。

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