React Redux Actions Typesafety

Question

У меня есть простой пример счетчика, с помощью которого я объясню свою путаницу.

Counter.Types

export interface DecrementAction {
  type: typeof Types.DECREMENT;
  decrementBy: number
}

Types

export const Types = {
  DECREMENT :Symbol("DECREMENT")
}

Counter.Action

export const decrementAction = (decrementBy: number): DecrementAction => ({
  type: Types.DECREMENT,
  decrementBy: decrementBy
});

export type CounterActionTypes = DecrementAction;

Counter.Reducer

const counter = (state = INITIAL_STATE, action : CounterActionTypes) => {

  switch (action.type) {
    case Types.DECREMENT:
      return {
        count: state.count - action.decrementBy // this dosen't work ts complains decrementBy present in action

      };
    default:
      return state;
  }

};

Если я изменю строку в этом случае на count: state.count - (action as DecrementAction).question Машинопись перестает жаловаться.

Я пришел из мира ngrx, где мы можемсразу добавьте payload.<ref>. Что мне здесь не хватает? Как мы можем не добавлять <action as ..> и напрямую ссылаться на переменные действия.

Answer 1

Я не думаю, что TypeScript не поддерживает символы как объединяющие дискриминаторы. Вы можете просто использовать строки:

export const Types = {
  DECREMENT: "DECREMENT",
  INCREMENT: "INCREMENT"
} as const

export interface DecrementAction {
  type: typeof Types.DECREMENT;
  decrementBy: number
}

export interface IncrementAction {
  type: typeof Types.INCREMENT;
  incrementBy: number
}

export const decrementAction = (decrementBy: number): DecrementAction => ({
  type: Types.DECREMENT,
  decrementBy: decrementBy
});

export type CounterActionTypes = DecrementAction | IncrementAction;

const INITIAL_STATE = { count: 0 };

const counter = (state = INITIAL_STATE, action: CounterActionTypes) => {
  switch (action.type) {
    case Types.DECREMENT:
      return {
        count: state.count - action.decrementBy
      };
    default:
      return state;
  }
};

площадка TypeScript

Также Types может быть перечислением:

export enum Types {
  DECREMENT = "DECREMENT",
  INCREMENT = "INCREMENT"
}

Тогда выtypeof в type: typeof Types.DECREMENT;.

игровая площадка