如何正确为Redux中dispatch返回结果设置TypeScript类型？

代码场景 #

fetchSomething 的定义 #

export const fetchSomething = createAsyncThunk(
  'something',
  async () => {
    return Promise.resolve({name: 'jack'})
  }
)

React 组件内代码 #

const dispatch = useAppDispatch()

const getMessages = async () => {
  const result = await dispatch(fetchSomething())
  return result.payload
}

遇到的类型问题 #

result 的类型为联合类型：

const result: PayloadAction<{name: string}, string, {arg: void, requestId: string, requestStatus: "fulfilled"}, never> | PayloadAction<unknown, string, {arg: void, requestId: string, requestStatus: "rejected", aborted: boolean, condition: boolean}, SerializedError>

尽管 result 本身类型正确，但 result.payload 被推断为 unknown——这是因为联合类型中包含了请求失败的分支，该分支的 payload 类型为 unknown。目标是让 getMessages 能正确返回 Promise<{name: string}>。

已尝试的修改 #

曾按照文档提示给 createAsyncThunk 添加泛型参数，但问题未解决：

export const fetchSomething = createAsyncThunk<{name: string}>(
  'something',
  async () => {
    return Promise.resolve({name: 'jack'})
  }
)

解决方案 #

1. 使用 unwrapResult 提取成功 payload #

Redux Toolkit 提供了 unwrapResult 工具函数，可自动处理请求成功/失败的分支：若请求成功则返回 payload，若失败则抛出对应错误，TypeScript 会自动推断返回值类型。

修改组件代码：

import { unwrapResult } from '@reduxjs/toolkit'
import { fetchSomething } from './path/to/your/thunk'
import { useAppDispatch } from './path/to/your/store'

const getMessages = async () => {
  const result = await dispatch(fetchSomething())
  const payload = unwrapResult(result)
  return payload // 类型自动推断为 {name: string}
}

2. 显式判断请求状态 #

也可手动判断 action 的状态，缩小类型范围：

const getMessages = async () => {
  const result = await dispatch(fetchSomething())
  if (result.meta.requestStatus === 'fulfilled') {
    return result.payload // 此处 payload 类型为 {name: string}
  } else {
    // 处理错误场景，比如抛出错误或返回默认值
    throw result.error
  }
}

3. 确保 useAppDispatch 类型正确 #

检查 store 配置，保证 useAppDispatch 基于项目实际的 store 类型生成，而非默认的 Dispatch：

在 store 文件中：

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'

export const store = configureStore({
  reducer: {
    // 注册你的 reducer
  }
})

// 导出自定义的 Dispatch 类型
export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>()

此配置能让 dispatch 正确推断 createAsyncThunk 返回的 action 类型。

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