Correctly type an async action which goes through redux-promise-middleware

Question

I'm using redux-promise-middleware for my Redux store setup and I'm trying to correctly type this async action:

actions.ts

export const theAsyncAction = (): {
  type: "MY_ACTION_TYPE";
  payload: AxiosResponse<ApiResponse>; // [1]
} => {
  const url = "some url";
  return {
    type: "MY_ACTION_TYPE",
    payload: axios.get<ApiResponse>(url) // [2]
  };
};

export type Action = ReturnType<typeof theAsyncAction>;

And here's the switch block from the reducer:

reducer.ts

import { Action } from './Action';

export default (state: State, action: Action) {
    switch (action.type) {
        case 'MY_ACTION_TYPE' + '_FULFILLED': {
            const someProperty = action.payload.data; // [3]
            break;
        }
        ...
}

Obviously [1] and [2] are incompatible and I already know that. But since in reducer.ts I expect [3] to have the resolved payload object (not the Promise) I can't figure out how to do this.

Here's also my store setup:

store.ts

import thunkMiddleware from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';


const composedEnhancer = composeWithDevTools(applyMiddleware(promiseMiddleware, thunkMiddleware));
const store = createStore(rootReducer, composedEnhancer);

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