Почему payload здесь undefined?

Вот мой Action

import axios from "axios";
import { Action, Dispatch } from "redux";
import { GET_JOKE, ADD_TO_FAV, REMOVE_ALL, REMOVE_JOKE } from "./types";

export const getJoke = () => {
    return async (dispatch: Dispatch<Action>) => {
        try {
            const response = await axios.get('https://api.chucknorris.io/jokes/random');
            dispatch({ type: GET_JOKE, payload: response.data })
        } catch (e) {
            console.log(e);
        } 
    }
};

export const removeJoke = (id: number) => ({ type: REMOVE_JOKE, id });
export const removeAll = () => ({ type: REMOVE_ALL });
export const addToFav = (id: number) => ({ type: ADD_TO_FAV, id });

Вот мой Reducer

import { JokesReducer } from "../../types/interfaces"
import { GET_JOKE, REMOVE_ALL, REMOVE_JOKE } from "../types"

const initialState: JokesReducer = {
    jokes: [],
}

export const jokesReducer = (state = initialState, { type, id, payload }: { type: string, id: number, payload: any }) => {
    switch (type) {
        case GET_JOKE:
            return {
                jokes: [...state.jokes, payload],
            }
        case REMOVE_JOKE:
            return {
                jokes: [...state.jokes.filter((joke) => joke.id !== id)]
            }
        case REMOVE_ALL:
            return {
                jokes: [],
            }
        default:
            return state;
    }
}