Здравствуйте, уважаемые, у меня возникла проблема и я слишком глуп чтобы понять и решить ее, пожалуйста, помогите.
Пытаюсь получить список фильмов через API, но, возникает такая ошибка:
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}>
Код всего этого "чуда":
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;
}
При этом в ReduxDevTools state обновляется и фильмы уходят в data. В чем проблема и как ее решить? Или если есть альтернативные способы, то тоже буду благодарен.