Typescript React Redux - Action 类型上不存在属性答案

【问题标题】：Typescript React Redux - property does not exist on Action typeTypescript React Redux - Action 类型上不存在属性
【发布时间】：2020-05-24 22:50:13
【问题描述】：

我是使用 React 和 Redux 打字的新手，我无法理解为什么会收到此错误。我今天开始在 react-redux 代码中添加类型，来自一个名为 How to use Typescript with Redux on Youtube 的视频

Property 'movies' does not exist on type 'UpcomingMovieActionTypes'.
Property 'movies' does not exist on type 'FetchUpcomingMoviesStartAction' TS2339
upcoming: {
  ...state.upcoming
  movies: action.movies,
  fetching: false
}};

减速机：

import { ACTION_TYPES } from '../../types/Actions.type';
import { Media } from '../../types/Media.type';
import { UpcomingMoviesActionTypes } from '../../types/Actions.type';

interface UpcomingMoviesState {
    upcoming: {
        movies: Media[];
        fetching: boolean;
        errorMessage: string;
    },
    key: string;
}

const INITIAL_STATE: UpcomingMoviesState = {
    upcoming: {
        movies: [],
        fetching: false,
        errorMessage: ''
    },
    key: '78dcec9ee90f01f2415dd96af2cebd76'
};

const movieReducer = (state = INITIAL_STATE, action: UpcomingMoviesActionTypes): UpcomingMoviesState => {
    switch (action.type) {
        case ACTION_TYPES.FETCH_UPCOMING_MOVIES_START:
            return {
                ...state,
                upcoming: {
                    ...state.upcoming,
                    movies: [ ...state.upcoming.movies ],
                    fetching: true
                }
            };
        case ACTION_TYPES.FETCH_UPCOMING_MOVIES_SUCCESS:
            return {
                ...state,
                upcoming: {
                    ...state.upcoming,
                    movies: action.movies,
                    fetching: false
                }
            };
        case ACTION_TYPES.FETCH_UPCOMING_MOVIES_FAILURE: return state;
        default: return state;
    }
};

export default movieReducer;

动作：

import { ACTION_TYPES, AppActions } from '../../types/Actions.type';
import { Media } from '../../types/Media.type';
import axios from 'axios';
import { Dispatch } from 'redux';

export const fetchUpcomingMoviesStart = (): AppActions => ({
    type: "FETCH_UPCOMING_MOVIES_START"
});

export const fetchUpcomingMoviesSuccess = (movies: Media[]): AppActions => ({
    type: ACTION_TYPES.FETCH_UPCOMING_MOVIES_SUCCESS,
    movies
});

export const fetchUpcomingMoviesFailure = (errorMessage: string): AppActions => ({
    type: ACTION_TYPES.FETCH_UPCOMING_MOVIES_FAILURE,
    errorMessage
});

export const fetchUpcomingMoviesAsync = () => { 
    return (dispatch: Dispatch<AppActions>) => { 
        dispatch(fetchUpcomingMoviesStart());
        axios.get('https://api.themoviedb.org/3/movie/upcoming?api_key=78dcec9ee90f01f2415dd96af2cebd76')
             .then((response: any) => dispatch(fetchUpcomingMoviesSuccess(response.data.results)))
             .catch((error: string) => dispatch(fetchUpcomingMoviesFailure(error)));
    }
};

动作类型：

import { Media } from './Media.type';

export const ACTION_TYPES = {
    FETCH_UPCOMING_MOVIES_START: 'FETCH_UPCOMING_MOVIES_START',
    FETCH_UPCOMING_MOVIES_SUCCESS: 'FETCH_UPCOMING_MOVIES_SUCCESS',
    FETCH_UPCOMING_MOVIES_FAILURE: 'FETCH_UPCOMING_MOVIES_FAILURE'
}

export interface FetchUpcomingMoviesStartAction {
    type: typeof ACTION_TYPES.FETCH_UPCOMING_MOVIES_START;
}

export interface FetchUpcomingMoviesSuccessAction {
    type: typeof ACTION_TYPES.FETCH_UPCOMING_MOVIES_SUCCESS;
    movies: Media[];
}

export interface FetchUpcomingMoviesFailureAction {
    type: typeof ACTION_TYPES.FETCH_UPCOMING_MOVIES_FAILURE;
    errorMessage: string;   
}

export type UpcomingMoviesActionTypes = FetchUpcomingMoviesStartAction | FetchUpcomingMoviesSuccessAction | FetchUpcomingMoviesFailureAction;

export type AppActions = UpcomingMoviesActionTypes;

如果我将减速器中的动作类型从 UpcomingMoviesActionTypes 更改为任何它工作正常。

【问题讨论】：

你遇到了什么错误？

标签： reactjs typescript react-redux

【解决方案1】：

问题是您的操作类型不是作为您的类型（例如FETCH_UPCOMING_MOVIES_START）输入的，而是作为字符串输入的。
您应该定义您的操作类型，例如：

export const ACTION_TYPES = {
  FETCH_UPCOMING_MOVIES_START: "FETCH_UPCOMING_MOVIES_START" as const,
  FETCH_UPCOMING_MOVIES_SUCCESS: "FETCH_UPCOMING_MOVIES_SUCCESS" as const,
  FETCH_UPCOMING_MOVIES_FAILURE: "FETCH_UPCOMING_MOVIES_FAILURE" as const
};

或作为枚举：

export enum ACTION_TYPES {
  FETCH_UPCOMING_MOVIES_START = "FETCH_UPCOMING_MOVIES_START",
  FETCH_UPCOMING_MOVIES_SUCCESS = "FETCH_UPCOMING_MOVIES_SUCCESS",
  FETCH_UPCOMING_MOVIES_FAILURE = "FETCH_UPCOMING_MOVIES_FAILURE"
}

或作为单一动作类型：

export const FETCH_UPCOMING_MOVIES_START = "FETCH_UPCOMING_MOVIES_START";
export const FETCH_UPCOMING_MOVIES_SUCCESS = "FETCH_UPCOMING_MOVIES_SUCCESS";
export const FETCH_UPCOMING_MOVIES_FAILURE = "FETCH_UPCOMING_MOVIES_FAILURE";

【讨论】：