Wondermarin
@Wondermarin

Argument of type is not assignable to parameter of type?

Здравствуйте, уважаемые, у меня возникла проблема и я слишком глуп чтобы понять и решить ее, пожалуйста, помогите.

Пытаюсь получить список фильмов через 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. В чем проблема и как ее решить? Или если есть альтернативные способы, то тоже буду благодарен.
  • Вопрос задан
  • 8373 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы