Angular Ошибки типов объединения действий NgRx - PullRequest
Новая
       53

Angular Ошибки типов объединения действий NgRx

1 голос
/ 02 августа 2020

У меня следующий код

shared.actions.ts 

import { Action } from '@ngrx/store';
import { Error } from '../error.interface';

export const types = {
  IS_LOADING: '[SHARED] IS_LOADING',
  TRIGGER_ERROR: '[SHARED] TRIGGER_ERROR'
}

export class IsLoading implements Action {
  readonly type = types.IS_LOADING;

  constructor(public payload: boolean){}
}

export class TriggerError implements Action {
  readonly type = types.TRIGGER_ERROR;

  constructor(public payload: Error[]){}
}

export type sharedActions = IsLoading | TriggerError;

shared.reducer.ts 

import * as sharedActions from './shared.actions';
import { Error } from '../error.interface';

export interface State {
  isLoading: boolean;
  errors: Error[];
}

const initialState: State = {
  isLoading: false,
  errors: null
}

export function sharedReducer(
  state: State = initialState,
  action: sharedActions.sharedActions
  ): State{
  switch(action.type){
    case sharedActions.types.IS_LOADING:
      return { ...state, isLoading: action.payload } // 1st Error here

    case sharedActions.types.TRIGGER_ERROR:
      return { isLoading: false, errors: action.payload } // 2nd error here

    default:
      return state;
  }
}

Я получаю эти ошибки:

1-я ошибка 

Type 'boolean | Error[]' is not assignable to type 'boolean'.
  Type 'Error[]' is not assignable to type 'boolean'

2-я ошибка 

Type 'boolean | Error[]' is not assignable to type 'Error[]'.
  Type 'false' is not assignable to type 'Error[]'.

Я пометил, откуда эти ошибки в коде, я действительно не могу сказать, что я здесь делаю не так.

Я использую Visual Studio Code, думаю, это ошибка самой IDE. Есть предположения? заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

Просто попробуйте as const как показано ниже: 

export const types = {
  IS_LOADING: '[SHARED] IS_LOADING',
  TRIGGER_ERROR: '[SHARED] TRIGGER_ERROR'
} as const;
0 голосов
/ 02 августа 2020

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

export enum ACTIONS {
  IS_LOADING = '[SHARED] IS_LOADING',
  TRIGGER_ERROR = '[SHARED] TRIGGER_ERROR'
}


export enum ACTIONS {
  IS_LOADING = '[SHARED] IS_LOADING',
  TRIGGER_ERROR = '[SHARED] TRIGGER_ERROR'
}

export class IsLoading implements Action {
  readonly type: ACTIONS.IS_LOADING = ACTIONS.IS_LOADING;

  constructor(public payload: boolean) {}
}

export class TriggerError implements Action {
  readonly type = ACTIONS.TRIGGER_ERROR;

  constructor(public payload: Error[]) {}
}

export type SharedActions = IsLoading | TriggerError;

export interface State {
  isLoading: boolean;
  errors: Error[];
}

const initialState: State = {
  isLoading: false,
  errors: null
};

export function sharedReducer(state: State = initialState, action: SharedActions): State {
  switch (action.type) {
    case ACTIONS.IS_LOADING:
      return { ...state, isLoading: action.payload }; // 1st Error here

    case ACTIONS.TRIGGER_ERROR:
      return { isLoading: false, errors: action.payload }; // 2nd error here

    default:
      return state;
  }
}
...