Argument of type is not assignable to parameter of type?

Question

typescript

Hello dear, I have a problem and I'm too stupid to understand and solve it, please help.

I'm trying to get a list of movies through the API, but the following error occurs:

Compiling...
Failed to compile.

C:/Users/Wondermarin/Desktop/tstfe/frontend/src/index.tsx
TypeScript error in C:/Users/Wondermarin/Desktop/tstfe/frontend/src/index.tsx(12,16):
Argument of type '(dispatch: Dispatch<FilmsActionsTypes>) => Promise<IFilmsActionFetchSuccess | IFilmsActionFetchError>' is not assignable to parameter of type 'FilmsActionsTypes'.
  Type '(dispatch: Dispatch<FilmsActionsTypes>) => Promise<IFilmsActionFetchSuccess | IFilmsActionFetchError>' is missing the following properties from type 'IFilmsActionFetchError': type, error  TS2345

    10 | const aa = new FilmsActions;
    11 |
  > 12 | store.dispatch(aa.getFilmsList());
       |                ^
    13 |
    14 | const app = (
    15 |   <Provider store={store}>

The code for all this "miracle":
actions.ts:

import api from '../../../api';
import { AxiosError, AxiosResponse } from 'axios';
import { Dispatch } from 'redux';

import {
  IFilmsActionFetchRequest,
  IFilmsActionFetchSuccess,
  IFilmsActionFetchError,
  IFilms,
  FilmsActionTypes,
  FilmsActionsTypes,
} from './FilmsActions.types';

export const FilmsActionFetchRequest = (): IFilmsActionFetchRequest => ({
  type: FilmsActionTypes.REQUEST,
});

export const FilmsActionFetchSuccess = (data: IFilms[]): IFilmsActionFetchSuccess => ({
  type: FilmsActionTypes.SUCCESS,
  data,
});

export const FilmsActionFetchError = (error: AxiosError): IFilmsActionFetchError => ({
  type: FilmsActionTypes.ERROR,
  error,
});

export class FilmsActions {
  public getFilmsList(searchParams?: string) {
    return (dispatch: Dispatch<FilmsActionsTypes>) => {
      dispatch(FilmsActionFetchRequest());
      return api.get(`${searchParams ? `films/${searchParams}/` : `films/`}`)
        .then((res: AxiosResponse) => dispatch(FilmsActionFetchSuccess(res.data)))
        .catch((err: AxiosError) => dispatch(FilmsActionFetchError(err)));
    }
  }
}

reducer.ts:

import { IFilmsState, FilmsActionTypes, FilmsActionsTypes } from "../../actions/Films/FilmsActions.types";

const initialState: IFilmsState = {
  data: [],
  loading: false,
}

export const FilmsReducer = (state = initialState, action: FilmsActionsTypes) => {
  switch(action.type) {
    case FilmsActionTypes.REQUEST:
      return {
        ...state,
        loading: true,
      }
    case FilmsActionTypes.SUCCESS:
      return {
        ...state,
        data: action.data,
        loading: false,
        error: false,
      }
    case FilmsActionTypes.ERROR:
      return {
        ...state,
        loading: false,
        error: action.error,
      }
    default:
      return state;
  }
}

types.ts:

import { AxiosError } from "axios";

export interface IFilms {
  id: number;
  title: string;
  title_en: string;
  slug: string;
  description: string;
  poster: string;
  status: string;
  rating: string;
  type: string;
  release: string;
  series: number;
  next_series: string;
  last_series: string;
  genres: object;
  studios: object;
  producers: object;
}

export enum FilmsActionTypes {
  REQUEST = '@@Films/REQUEST',
  SUCCESS = '@@Films/REQUEST_SUCCESS',
  ERROR = '@@Films/REQUEST_ERROR',
}

export interface IFilmsActionFetchRequest {
  type: FilmsActionTypes.REQUEST;
}

export interface IFilmsActionFetchSuccess {
  type: FilmsActionTypes.SUCCESS;
  data: IFilms[];
}

export interface IFilmsActionFetchError {
  type: FilmsActionTypes.ERROR;
  error: AxiosError | boolean;
}

export type FilmsActionsTypes = IFilmsActionFetchRequest | IFilmsActionFetchSuccess| IFilmsActionFetchError;

export interface IFilmsState {
  readonly data: IFilms[];
  readonly loading: boolean;
}

At the same time, the state is updated in ReduxDevTools and the movies go to data. What is the problem and how to solve it? Or if there are alternative ways, I will also be grateful.