如何在RTK Query中设置initialState初始状态？

你遇到的TypeScript错误是因为createApi的配置参数里根本不存在initialState这个选项——RTK Query的核心是自动管理API请求的缓存状态，它的内部状态结构是固定的，不需要手动初始化。

针对不同的需求，有两种正确的处理方式：

1. 预填充缓存数据（给API查询设置初始值） #

如果是想在应用启动时就给某个Query预填充缓存数据，比如默认加载皮卡丘的信息，有两种实现方式：

方式一：在Store初始化后手动更新缓存 #

通过RTK Query提供的util.updateQueryData方法，在store创建后直接修改缓存：

// 假设已导入你的store和pokemonApi
store.dispatch(pokemonApi.util.initializeCache());

// 预填充getPokemonByName查询的缓存（参数为'pikachu'）
store.dispatch(
  pokemonApi.util.updateQueryData('getPokemonByName', 'pikachu', () => ({
    id: 25,
    name: 'pikachu',
    height: 4,
    weight: 60,
    // 确保字段匹配你的Pokemon类型定义
  }))
);

方式二：在组件使用Query时指定初始数据 #

在调用自动生成的useGetPokemonByNameQuery hook时，通过initialData参数传入初始值：

const { data } = useGetPokemonByNameQuery('pikachu', {
  initialData: {
    id: 25,
    name: 'pikachu',
    height: 4,
    weight: 60,
  },
});

2. 管理非缓存的本地状态 #

如果是想存储和API缓存无关的本地状态（比如用户的选择、表单输入等），不要放到RTK Query的createApi配置里，应该单独创建一个Redux Slice：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 定义你的本地初始状态
const initialState = {
  selectedPokemon: 'pikachu',
  favoriteList: [] as string[],
};

const pokemonLocalSlice = createSlice({
  name: 'pokemonLocal',
  initialState,
  reducers: {
    setSelectedPokemon: (state, action: PayloadAction<string>) => {
      state.selectedPokemon = action.payload;
    },
    addToFavorite: (state, action: PayloadAction<string>) => {
      state.favoriteList.push(action.payload);
    },
  },
});

export const { setSelectedPokemon, addToFavorite } = pokemonLocalSlice.actions;
export default pokemonLocalSlice.reducer;

之后把这个slice的reducer添加到你的Redux Store配置中即可。

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