Property does not exist on type - redux-thunk await dispatch

Question

I have this exact issue described here https://github.com/reduxjs/redux-toolkit/issues/485#issuecomment-610654378

so I imported ThunkDispatch directly and am using that. I can't get any keys from the response of dispatch without it throwing property does not exist error

@reduxjs/toolkit@1.5.1 

const response = await dispatch(deactivateSubscription(args))

const response: PayloadAction<ApiResponse<EmptyBodyResponse>, string, {
    arg: DeactivateSubscriptionArgs;
    requestId: string;
    requestStatus: "fulfilled";
}, never> | PayloadAction<...>

export interface ApiResponse<T = unknown> {
  body: T
  error: Error
  success: boolean
  message?: string
}

TS2339: Property 'error' does not exist on type 'PayloadAction<ApiResponse<EmptyBodyResponse>, string, { arg: DeactivateSubscriptionArgs; requestId: string; requestStatus: "fulfilled"; }, never> | PayloadAction<...>'.
  Property 'error' does not exist on type 'PayloadAction<ApiResponse<EmptyBodyResponse>, string, { arg: DeactivateSubscriptionArgs; requestId: string; requestStatus: "fulfilled"; }, never>'.
    149 |
  > 150 |                     if (!response.error) {
        |                                   ^^^^^
    151 |                       setIsEditing(false)
    152 |                     }
    153 |                   }}

Answer 1

Per the createAsyncThunk docs, createAsyncThunk does not return the actual "response". Instead, it returns the "final action object that was dispatched", in order to avoid "uncaught rejected Promise" errors in your code.

You can unwrap the result action to get the actual data back in the component.

Also, make sure that you are using a Dispatch type that correctly understands thunks.