0

введите сюда описание изображенияПытаюсь разобраться с TS. Но что-то сложная задача для меня((. Помогите пожалуйста.

Редьюсер:

import { MoviesActionTypes, MoviesState, SearchAction } from '../types/movies';

const initialState: MoviesState = {
  movies: [],
};

export function moviesReducer(state = initialState, action: SearchAction): MoviesState {
  return action.type === MoviesActionTypes.SEARCH
    ? { ...state, movies: [...action.payload.films] }
    : state;
}

Типы

export interface MoviesState {
  movies: {}[];
}

export enum MoviesActionTypes {
  SEARCH = 'SEARCH',
}

export interface SearchAction {
  type: MoviesActionTypes.SEARCH;
  payload: {};
}

Если я правильно понимаю, то мне нужно правильно указать тип в payload SearchAction...но как его указать? Туда будет приходить сложный объект. По ключу films я буду вытаскивать массив объектов и записывать их в стейт.

1
  • надо написать интерфейс Movie и использовать его вместо пустого объекта movies: {}[] 15 авг 2021 в 16:40

1 ответ 1

1

Ответ на ваш вопрос подразумевает типизацию не state, а actions

Конкретно в вашем примере, вам нужно указать тип payload для searchAction

export interface SearchAction {
  type: MoviesActionTypes.SEARCH;
  payload: {
        files: укажите тип files
     };
}

более подробный пример на несколько разных action пример в codeSandBox

очень полезный видеоматериал по типизации, в том числе по редюсерам.

Полезная статья по выведению action type

type MoviesState = {
  movies: string[]; //стринг, чтобы обозначить, что у нас просто массив названий фильмов, в целом, это пока не важно.
};

const initialState: MoviesState = {
  movies: []
};

enum actionsName {
  byActor,
  byMovie,
  byYear
}

type SearchByActor = {
  type: actionsName.byActor;
  payload: { actorName: string };
};

type SearchByYear = {
  type: actionsName.byYear;
  payload: { year: number };
};

type SearchByMovie = {
  type: actionsName.byMovie;
  payload: { movieName: string };
};

type SearchActions = SearchByActor | SearchByYear | SearchByMovie;

function moviesReducer(state = initialState, action: SearchActions) {
  //редюсер ничего не делает, просто возвращает стейт
  switch (action.type) {
    case actionsName.byActor:
      action.payload.actorName;
      return state;
    case actionsName.byYear:
      action.payload.year;
      return state;
    case actionsName.byMovie:
      action.payload.movieName;
      return state;
    default:
      return state;
  }
}
1
  • Огромное спасибо!
    – qweezz
    19 авг 2021 в 9:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.