Redux + Typescript + typesafe-действия:

Question

Возникла проблема с использованием Typescript 3.2.2 с typesafe-actions 3.0.0. Я создал пример ниже, показывающий проблему.

По сути, в моем редукторе payload не определено на action, поскольку некоторые из моих действий относятся к типу EmptyAction, который не определяет свойство payload. Если я изменяю их, чтобы иметь пустую полезную нагрузку ({}), тогда payload определяется для всех действий, но теперь тип payload не определяется на основе type действия (в редукторе ).

Полагаю, я правильно следовал Могучему Учебнику .

Рабочий пример: https://github.com/JoshMcCullough/react-ts-test

остросюжетный types.ts

export default {
    GET_PROFILES_REQUEST: "GET_PROFILES_REQUEST",
    GET_PROFILES_SUCCESS: "GET_PROFILES_SUCCESS",
    GET_PROFILES_FAILURE: "GET_PROFILES_FAILURE",
};

actions.ts

import { action } from "typesafe-actions";
import { ApiErrorResponse } from "../../app/api/ApiErrorResponse";
import { Profile } from "../../app/models/Profile";
import ActionTypes from './action-types';

export const getProfilesRequest = () => action(ActionTypes.GET_PROFILES_REQUEST); // EmptyAction<string>
export const getProfilesSuccess = (profiles: Profile[]) => action(ActionTypes.GET_PROFILES_SUCCESS, { profiles }); // Action<string, { profiles: Profile[] }>
export const getProfilesFailure = (error: ApiErrorResponse) => action(ActionTypes.GET_PROFILES_FAILURE, { error }); // Action<string, { error: ApiErrorResponse }>

reducer.ts

import { ActionType, getType } from "typesafe-actions";
import * as Actions from './actions';
import { Profile } from "../../app/models/Profile";

// reducer
export type ProfileAction = ActionType<typeof Actions>;

export type State = {
    profiles: Profile[];
    errorMessage: string;
    loading: boolean;
};

const INITIAL_STATE = {
    profiles: [],
    errorMessage: null,
    loading: false,
};

export default (state: State = INITIAL_STATE, action: ProfileAction): State => {
    switch (action.type) {
        case getType(Actions.getProfilesRequest): return {
            ...state,
            loading: true,
        };

        case getType(Actions.getProfilesSuccess): return {
            ...state,
            profiles: action.payload.profiles,
            // ERROR: Property 'payload' does not exist on type 'EmptyAction<string> | PayloadAction<string, { profiles: Profile[]; }> | PayloadAction<string, { error: ApiErrorResponse; }>'.
            // Property 'payload' does not exist on type 'EmptyAction<string>'. [2339]
            loading: false,
        };

        case getType(Actions.getProfilesRequest): return {
            ...state,
            errorMessage: action.payload.error.message,
            // ERROR: Property 'payload' does not exist on type 'EmptyAction<string> | PayloadAction<string, { profiles: Profile[]; }> | PayloadAction<string, { error: ApiErrorResponse; }>'.
            // Property 'payload' does not exist on type 'EmptyAction<string>'. [2339]
            loading: false,
        };

        default: return state;
    }
};

Answer 1

Оказывается, мои типы действий не были определены как const! Я упустил это из виду, так как я обновляю существующую кодовую базу.

Решение состоит в том, чтобы убедиться, что они const s:

остросюжетный types.ts

export const GET_PROFILES_REQUEST = "GET_PROFILES_REQUEST";
export const GET_PROFILES_SUCCESS = "GET_PROFILES_SUCCESS";
export const GET_PROFILES_FAILURE = "GET_PROFILES_FAILURE";