在现有React Redux Toolkit项目集成RTK Query及解决类型错误

1. 明确类型定义 #

首先要确保你的Product和ProductsState类型正确，尤其是ProductsState需要包含字符串索引签名，这样TypeScript才允许你用产品ID作为键：

// 定义单个产品类型
interface Product {
  id: string; // 如果你的ID是数字类型，替换为number
  name: string;
  price: number;
  // 其他产品字段...
}

// 定义以产品ID为键的对象类型
type ProductsState = Record<string, Product>;

2. 修正transformResponse的类型匹配问题 #

在RTK Query的builder.query中，需要显式指定返回类型为ProductsState，而不是默认的响应类型Product[]。同时在transformResponse里明确输入和输出的类型：

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

// 上面的类型定义放在这里...

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getProducts: builder.query<ProductsState, void>({
      // 第一个泛型是返回类型，第二个是查询参数类型（这里无参数，用void）
      query: () => '/products',
      transformResponse: (response: Product[]): ProductsState => {
        // 明确输入是接口返回的Product数组，输出是ProductsState
        return response.reduce((acc, curr) => {
          acc[curr.id] = curr;
          return acc;
        }, {} as ProductsState); // 给初始值断言为ProductsState，解决索引错误
      },
    }),
  }),
});

export const { useGetProductsQuery } = productsApi;

3. 错误原因解析 #

• 类型不匹配错误：默认情况下builder.query会把返回类型推断为接口响应的Product[]，但你需要返回ProductsState，所以必须通过泛型<ProductsState, void>明确指定返回类型。
• 索引不支持错误：reduce的初始值{}默认类型是空对象，没有索引签名，TypeScript不允许你动态添加字符串键。通过{} as ProductsState断言类型，告诉TS这个对象可以用产品ID作为键。

4. 初始状态处理 #

RTK Query会自动管理缓存的状态，不需要手动设置初始状态：

• 首次调用useGetProductsQuery()时，状态会处于isLoading: true，data: undefined。
• 如果需要在组件中使用默认的空对象，可以通过解构赋值处理：

  const { data = {}, isLoading } = useGetProductsQuery();
  

• 如果你需要额外的本地状态（比如编辑状态），可以结合Redux Toolkit的createSlice，但这部分不属于RTK Query的缓存管理范畴。

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