为什么我会收到错误消息 "Property 'then' does not exist on type 'AsyncThunkAction'"？

Question

我似乎无法从 Redux-toolkit 的 createAsyncThunk 函数中接收到 Promise 我是 Typescript 的新手，我正在努力弄清楚为什么它会给我 Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>' 错误，即使我删除输入时承诺确实会返回。这是我的 createAsyncThunk f-n

export const getStudentByIdRequest = createAsyncThunk<Student, number>(
  'student/getStudentByIdRequest',
  async (id, { rejectWithValue }) => {
    try {
      const { data } = await instance.get(`student/${id}/`)
      return data
    } catch (err) {
      let error: AxiosError = err
      if (error) {
        return rejectWithValue({
          message: `Error. Error code ${error.response?.status}`,
        })
      }
      throw err
    }
  }
)

这就是我从 React 组件

发送它的方式

dispatch(getStudentByIdRequest(userId)).then((res) => console.log(res))

我尝试在 thunk

上调用 then 时出现错误

Answer 1

您的 dispatch 没有考虑 thunk 的类型，因此输入的 return 类型不正确。请使用 the documentation:

中描述的商店中的实际 Dispatch 类型

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

const store = configureStore({
  reducer: rootReducer
})

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types

然后在您的组件中使用 useAppDispatch 而不是 useDispatch。

Answer 2

另一个可能的解决方案是使用 ThunkDispatch 类型而不是普通 Dispatch，因为普通 Dispatch 并不意味着处理异步内容。

在 store.ts 中定义可重复使用的 useAppThunkDispatch 挂钩：

import { Action, ThunkDispatch, configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
    reducer: {
        blog: blogSlice,
    },
});

export type RootState = ReturnType<typeof store.getState>;

export type ThunkAppDispatch = ThunkDispatch<RootState, void, Action>;

export const useAppThunkDispatch = () => useDispatch<ThunkAppDispatch>();

然后您可以在您的应用中使用 useAppThunkDispatch 挂钩，就像 useAppDispatch 或 useDispatch 挂钩一样。

为什么我会收到错误消息 "Property 'then' does not exist on type 'AsyncThunkAction'"？

Why am I getting the error message "Property 'then' does not exist on type 'AsyncThunkAction'"?

reactjs

redux

redux-thunk

redux-toolkit