React中如何为dispatch函数内的Axios响应指定类型？

1. 定义后端返回数据的类型接口 #

先根据后端实际返回结构，定义成功响应和错误响应的TypeScript接口：

// 成功获取商机详情的返回数据结构（根据后端实际字段调整）
interface OpportunityDetail {
  id: string;
  title: string;
  description?: string;
  createdAt: string;
  // 补充其他必填/可选字段
}

// 请求失败时的错误响应结构（根据后端实际错误格式调整）
interface ErrorResponse {
  status: number;
  data: {
    message: string;
    code?: string;
  };
}

2. 修改Action函数的类型定义 #

给异步Action指定明确的返回类型（成功返回OpportunityDetail，失败返回ErrorResponse），同时给Axios请求绑定响应数据类型：

import { Dispatch } from 'redux';
// 导入你的全局Action类型（比如AppAction，需根据项目实际定义）
import { AppAction } from './path-to-your-action-types';

export const getOpportunityDetail =
  (opportunityId: string, userId?: string) => 
  async (dispatch: Dispatch<AppAction>): Promise<OpportunityDetail | ErrorResponse> => {
    try {
      // 用Axios泛型方法指定响应数据类型
      const response = await axios.get<OpportunityDetail>(
        `${URL}${RoutingLinks.OPPORTUNITIES_DETAIL}/${opportunityId}?currentUserId=${userId}`,
        {
          headers: {
            Authorization: `${localStorage.getItem("token")}`,
          },
        }
      );
      return response.data;
    } catch (err: any) {
      dispatch(handleError(err)); // 确保handleError返回的是AppAction类型
      return err.response as ErrorResponse;
    }
  };

3. 调用时使用自动推断的类型 #

现在调用dispatch时，TypeScript会自动推断result的类型为OpportunityDetail | ErrorResponse，无需再用any，还可以通过类型守卫区分成功/失败场景：

const result = await dispatch(
  getOpportunityDetail(locationState as string, userData._id)
);

// 类型守卫：判断是否为成功响应
if ('id' in result) {
  // 此处result被推断为OpportunityDetail类型
  console.log('商机标题:', result.title);
} else {
  // 此处result被推断为ErrorResponse类型
  console.error('请求失败:', result.data.message);
}

额外优化：使用Redux Toolkit简化类型处理 #

如果你的项目使用@reduxjs/toolkit，可以用createAsyncThunk自动处理类型，代码更简洁：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const getOpportunityDetail = createAsyncThunk<
  OpportunityDetail,       // 成功返回类型
  { opportunityId: string; userId?: string }, // 入参类型
  { rejectValue: ErrorResponse } // 失败返回类型
>(
  'opportunities/getDetail',
  async ({ opportunityId, userId }, { rejectWithValue }) => {
    try {
      const response = await axios.get<OpportunityDetail>(
        `${URL}${RoutingLinks.OPPORTUNITIES_DETAIL}/${opportunityId}?currentUserId=${userId}`,
        { headers: { Authorization: `${localStorage.getItem("token")}` } }
      );
      return response.data;
    } catch (err: any) {
      return rejectWithValue(err.response as ErrorResponse);
    }
  }
);

调用时同样可以自动推断返回类型，无需额外手动指定。

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