“AsyncThunkAction”Redux-toolkit 类型上不存在属性“then”

Posted 2023-02-22

【中文标题】“AsyncThunkAction”Redux-toolkit 类型上不存在属性“then”

【英文标题】：Property 'then' does not exist on type 'AsyncThunkAction' Redux-toolkit

【发布时间】：2020-12-27 20:55:53

【问题描述】：

我似乎无法从createAsyncThunk 接收来自Redux-toolkit 的Promise 函数 我对 Typescript 还很陌生，我正在努力弄清楚为什么它给了我 Property 'then' does not exist on type 'AsyncThunkAction<Student, number, >' 错误，即使如果我删除输入，承诺确实会返回。 这是我的createAsyncThunkf-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 时出现错误

【参考方案1】：

另一个可能的解决方案是使用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 挂钩一样。

【讨论】：

你应该帮忙吗：***.com/questions/69396912/…

【参考方案2】：

您的 dispatch 没有考虑 thunk 的类型，因此返回类型输入错误。请使用商店中的实际Dispatch 类型，如the documentation 中所述：

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。

【讨论】：

我这样做了，而且我还必须在 configureStore 函数中将 middleware: [thunk] as const 更改为 middleware: getDefaultMiddleware()，现在我收到一个错误消息：`ReferenceError: Cannot access 'userReducer' before initialization` 这个错误是正是我放弃使用useAppDispatch 的原因

没关系，我通过将我的 Axios 拦截器函数从 apiConfig.ts 文件移动到 index.ts 来解决它，正如这里所建议的 github.com/reduxjs/redux-toolkit/issues/… 谢谢你的帮助！

@phry 你能帮忙吗：***.com/questions/69396912/…