AsyncThunkAction 不适合 AnyAction？答案

【问题标题】：AsyncThunkAction does not fit to AnyAction?AsyncThunkAction 不适合 AnyAction？
【发布时间】：2020-09-30 17:44:10
【问题描述】：

codesandbox 在这里https://codesandbox.io/s/rtk-github-issues-example-03-final-async-su4hz?file=/src/features/issuesList/IssuesListPage.tsx

我使用了 AppDispatch 建议 https://react-redux.js.org/using-react-redux/static-typing#typing-the-usedispatch-hook 和这个问题 How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)? 但转译失败。

No overload matches this call.
  Overload 1 of 3, '(action: AnyAction): AnyAction', gave the following error.
    Argument of type 'AsyncThunkAction<RepoDetails, { org: string; repo: string; }, { dispatch: ThunkDispatch<CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>, null, AnyAction> & ThunkDispatch<...> & Dispatch<...>; state: RepoDetailsState; rejectValue: MyK...' is not assignable to parameter of type 'AnyAction'.
      Property 'type' is missing in type 'AsyncThunkAction<RepoDetails, { org: string; repo: string; }, { dispatch: ThunkDispatch<CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>, null, AnyAction> & ThunkDispatch<...> & Dispatch<...>; state: RepoDetailsState; rejectValue: MyK...' but required in type 'AnyAction'.
  Overload 2 of 3, '(asyncAction: ThunkAction<Promise<PayloadAction<RepoDetails, string, { arg: { org: string; repo: string; }; requestId: string; }, never> | PayloadAction<MyKnownError | undefined, string, { ...; }, SerializedError>> & { ...; }, CombinedState<...>, null, AnyAction>): Promise<...> & { ...; }', gave the following error.
    Argument of type 'AsyncThunkAction<RepoDetails, { org: string; repo: string; }, { dispatch: ThunkDispatch<CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>, null, AnyAction> & ThunkDispatch<...> & Dispatch<...>; state: RepoDetailsState; rejectValue: MyK...' is not assignable to parameter of type 'ThunkAction<Promise<PayloadAction<RepoDetails, string, { arg: { org: string; repo: string; }; requestId: string; }, never> | PayloadAction<MyKnownError | undefined, string, { ...; }, SerializedError>> & { ...; }, CombinedState<...>, null, AnyAction>'.
      Types of parameters 'getState' and 'getState' are incompatible.
        Type 'CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>' is missing the following properties from type 'RepoDetailsState': openIssuesCount, error
  Overload 3 of 3, '(asyncAction: ThunkAction<Promise<PayloadAction<RepoDetails, string, { arg: { org: string; repo: string; }; requestId: string; }, never> | PayloadAction<MyKnownError | undefined, string, { ...; }, SerializedError>> & { ...; }, CombinedState<...>, undefined, AnyAction>): Promise<...> & { ...; }', gave the following error.
    Argument of type 'AsyncThunkAction<RepoDetails, { org: string; repo: string; }, { dispatch: ThunkDispatch<CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>, null, AnyAction> & ThunkDispatch<...> & Dispatch<...>; state: RepoDetailsState; rejectValue: MyK...' is not assignable to parameter of type 
ThunkAction<Promise<PayloadAction<RepoDetails, string, { arg: { org: string; repo: string; }; requestId: string; }, never> | PayloadAction<MyKnownError | undefined, string, { ...; }, SerializedError>> & { ...; }, CombinedState<...>, undefined, AnyAction>'.
      Types of parameters 'getState' and 'getState' are incompatible.
        Type 'CombinedState<{ issuesDisplay: CurrentDisplayState; repoDetails: RepoDetailsState; issues: IssuesState; comments: CommentsState; }>' is not assignable to type 'RepoDetailsState'.ts(2769)

【问题讨论】：

标签： redux redux-thunk redux-toolkit

【解决方案1】：

对于 createAsyncThunk 函数中的 thunkAPI 参数类型，我必须使用 RootState。

  {
    dispatch: AppDispatch
    state: RootState
    rejectValue: MyKnownError
  }

【讨论】：

【解决方案2】：

就我而言，我收到此错误是因为我使用了错误的类型进行调度。我将 AppDispatch 用于 thunkAPI 参数类型，但在尝试使用 thunk 的地方，我明确声明了错误的调度类型。反过来肯定也是可能的。在此处阅读有关 AppDispatch 的信息：https://redux-toolkit.js.org/usage/usage-with-typescript#getting-the-dispatch-type

像 Hiroyuki Shirakawa 所说的那样为 RootState 使用正确的类型也是一件好事。

在此处阅读有关 TypeScript 中 createAsyncThunk 的信息：https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk

【讨论】：