如何在Redux Toolkit的createAsyncThunk中使用返回可辨识联合的负载创建器

问题根因 #

createAsyncThunk 默认的类型规则是：payloadCreator 函数返回的非rejectWithValue包裹的值，都会被识别为异步执行成功的 payload 类型。你直接返回Result<Agent[], ApiError>可辨识联合类型时，TS 会将联合中的Err<ApiError>类型判定为不符合成功 payload 的类型约束，因此抛出类型错误。

解决方案 #

你可以根据自己的业务需求选择以下两种方案，都可以保留现有的Result<T, E>类型定义：

方案一：对齐 RTK 异步状态流（推荐） #

将Result的成功/失败分支和 RTK 的fulfilled/rejected状态对应，失败场景调用rejectWithValue返回错误信息，同时为createAsyncThunk明确泛型约束：

// 泛型参数依次为：成功payload类型、thunk入参类型、reject返回值类型
const fetchAgents = createAsyncThunk<Agent[], void, { rejectValue: ApiError }>(
  "agents/fetchAgents",
  async (_, { rejectWithValue }) => {
    const result = await new AgentsClient().getAll();
    if (result.isOk) {
      // 成功分支返回响应数据，对应fulfilled状态
      return result.response;
    } else {
      // 失败分支用rejectWithValue包裹错误，对应rejected状态
      return rejectWithValue(result.error);
    }
  }
);

这种方案的优势是可以直接复用 RTK 的异步状态管理逻辑，在 extraReducers 或者组件中判断fetchAgents.rejected状态时，action.payload会自动推断为ApiError类型，不需要额外做联合类型判断。

方案二：直接返回完整Result对象 #

如果你希望不管接口成功失败都走fulfilled状态，自己在后续业务逻辑中判断Result的状态，可以直接为createAsyncThunk指定返回的 payload 类型为完整的Result联合类型：

// 直接指定返回值为Result类型，跳过默认的类型校验
const fetchAgents = createAsyncThunk<Result<Agent[], ApiError>, void>(
  "agents/fetchAgents",
  async () => {
    return await new AgentsClient().getAll();
  }
);

使用这种方案时，所有请求都会进入fulfilled分支，你需要在处理 payload 时自行判断isOk字段区分成功失败场景。

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