Как создать свой middleware для работы async запроса и redux?

Помогите понять в чём проблема, когда я пишу mapDispatchToProps так:

const mapDispatchToProps = (dispatch: any) => {
    return {
        getPostByIdAction: (post: any) => dispatch({type: GET_ID, payload: post})
    }
};

всё работает нормально. Но когда я пытаюсь диспатчить функцию таким образом:

const mapDispatchToProps = (dispatch: any) => {
    return {
        getPostByIdAction: (post: any) => dispatch(getPostById(post))
    }
};

я получаю Error: Actions must be plain objects. Use custom middleware for async actions. Что могло пойти не так?

мои actions:

export const getPostById = async (id: any) => {
    const myResponse = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    const myJson = await myResponse.json();
    const post = myJson.body
}

мой reducer:

import {combineReducers} from 'redux'
import {pageReducer} from './page'


export const rootReducer = combineReducers({
  page: pageReducer
})
import {GET_ID} from '../actions/PageActions'

const initialState = {
    post: "Click on article to read it"
}

export function pageReducer(state = initialState, action: any) {
    switch (action.type) {
        case GET_ID:
            return {...state, post: action.payload};
        default:
            return state
    }
}