Реагируйте на Redux с Typescript, свойство недоступно в Reducer из ActionType

Question

Я изучаю React с машинописью и в настоящее время сталкиваюсь с проблемой при реализации Reducer в Redux.

Это мои типы действий

import { LoginResponseInterface } from "../../interfaces/APIResponseInterface";

export const UserActionConst = {
  LOGIN_REQUEST: "USER_LOGIN_REQUEST",
  LOGIN_SUCCESS: "USER_LOGIN_REQUEST",
  LOGIN_FALIURE: "USER_LOGIN_REQUEST",

  LOGOUT: "USER_LOGOUT",
};

export interface LoginRequestAction {
  type: typeof UserActionConst.LOGIN_REQUEST;
}

export interface LoginSuccessAction {
  type: typeof UserActionConst.LOGIN_SUCCESS;
  payload: LoginResponseInterface;
}

export interface LoginFaliureAction {
  type: typeof UserActionConst.LOGIN_FALIURE;
}

export type UserActionsTypes =
  | LoginRequestAction
  | LoginSuccessAction
  | LoginFaliureAction;

А ниже приведен мой код редуктора

const initialState: IUserState = {
  isLoading: false,
  isLoggedIn: false,
  loggedInResponse: undefined,
};
export const userReducer = (
  state: IUserState = initialState,
  action: UserActionsTypes
): IUserState => {
  switch (action.type) {
    case UserActionConst.LOGIN_REQUEST:
      return { ...state, isLoading: true };
    case UserActionConst.LOGIN_SUCCESS:
      return {
        ...state,
        isLoading: false,
        isLoggedIn: true,
        loggedInResponse: action.payload,
      };
    default:
      return state;
  }
};

В этом редукторе мой тип действия - UserActionType, но когда я пытаюсь получить доступ к полезной нагрузке свойства, она не доступна в IntelliSense, и компилятор жалуется на это. Я прилагаю скриншот того же самого.

Если я попытаюсь использовать этот тип на константе, то полезная нагрузка будет доступна. Не могли бы вы помочь мне определить проблему с моим редуктором?

Answer 1

Все ваши константы действий имеют одинаковую строку, поэтому машинопись не может разделять интерфейсы.

Вам необходимо определить разные имена типов действий и добавить as const к объекту, содержащему константы

export const UserActionConst = {
  LOGIN_REQUEST: "USER_LOGIN_REQUEST",
  LOGIN_SUCCESS: "USER_LOGIN_REQUEST_SUCCESS",
  LOGIN_FALIURE: "USER_LOGIN_REQUEST_FAILURE",
} as const

Другой вариант - сделать его enum

export enum UserActionConst {
  LOGIN_REQUEST = "USER_LOGIN_REQUEST",
  LOGIN_SUCCESS = "USER_LOGIN_REQUEST_SUCCESS",
  LOGIN_FALIURE = "USER_LOGIN_REQUEST_FAILURE",
}

Answer 2

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

export const LoginRequest = () => ({
  type: UserActionConst.LOGIN_REQUEST,
})

export const LoginSuccess = (payload: LoginResponseInterface) => ({
  type: UserActionConst.LOGIN_SUCCESS,
  payload,
})

export const LoginFaliure = () => ({
  type: UserActionConst.LOGIN_FALIURE,
})

Я также рекомендую использовать React useContext вместо redux. Делает то же самое, но встроено в React.