Почему мой интерфейс не принимается в Entity? - PullRequest
0 голосов
/ 28 марта 2020

Я создаю состояние для корзины, и в каждое действие я вставляю отдельный интерфейс.

Однако при вставке интерфейса ICartState в EntityAdapter<> и createEntityAdapter<> я получаю сообщение об ошибке в каждом payload на редукторе, говорящем, что данный интерфейс не имеет данного интерфейса.

Как например:

Argument of type 'ICartRequest' is not assignable to parameter of type 'ICartState'.
  Type 'ICartRequest' is missing the following properties from type 'ICartState': request, data, dataErrorts (2345)

Это не делает смысл, так как статус корзины состоит из:

  request: null,
  data: null,
  dataError: null,
  loading: false

ДЕЙСТВИЯ

import { Action } from '@ngrx/store';
import * as fromCart from '@shared/interfaces/cart.interface';

export enum ActionTypes {
  CREATE_CART = '[CREATE_CART] Create a new cart',
  CREATE_CART_SUCCESS = '[CREATE_CART_SUCCESS] Cart creation successfully',
  CREATE_CART_FAIL = '[CREATE_CART_FAIL] Cart creation failed',
  GET_CART = '[GET_CART] Get cart response'
}

// Aqui eu fiz três interface diferente p/ cada action

// Este aqui eu recebo as informações (request)
// p/ poder utilizar na requisição do effect
export class CreateCart implements Action {
  readonly type = ActionTypes.CREATE_CART;
  constructor(public payload: { request: fromCart.ICartRequest }) {}
}

// esse aqui recebe a resposta (caso for tudo ok) da requisição do effect
export class CreateCartSuccess implements Action {
  readonly type = ActionTypes.CREATE_CART_SUCCESS;
  constructor(public payload: { data: fromCart.ICartData }) {}
}

// esse aqui recebe a resposta (caso der falha) da requisição do effect
export class CreateCartFail implements Action {
  readonly type = ActionTypes.CREATE_CART_FAIL;
  constructor(public payload: { dataError: fromCart.ICartDataError }) {}
}

// esse aqui eu pego o valor do estado
export class GetCart implements Action {
  readonly type = ActionTypes.GET_CART;
}

export type Actions = CreateCart | CreateCartSuccess | CreateCartFail | GetCart;

REDUCER

import { EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { ICartEntityState, ICartState } from '@shared/interfaces/cart.interface';
import * as fromCart from './cart.actions';

/** @TODO : VERIFICAR UMA INTERFACE QUE SEJA COMPATÍVEL COM O ENTITY ADAPTER */
export const adapter: EntityAdapter<ICartState> = createEntityAdapter<ICartState>();
const INITIAL_STATE: ICartEntityState = adapter.getInitialState({
  request: null,
  data: null,
  dataError: null,
  loading: false,
});

export function reducer(state = INITIAL_STATE, action: fromCart.Actions ): ICartEntityState {
  switch (action.type) {
    case fromCart.ActionTypes.CREATE_CART:
      return adapter.addOne(action.payload.request, {
        ...state,
        loading: true
      });
    case fromCart.ActionTypes.CREATE_CART_SUCCESS:
      return adapter.addOne(action.payload.data, {
        ...state,
        loading: false
      });
    case fromCart.ActionTypes.CREATE_CART_FAIL:
      return adapter.addOne(action.payload.dataError, {
        ...state,
        loading: false
      });
    case fromCart.ActionTypes.GET_CART:
    default:
      return state;
  }
}

export const {
  selectAll,
  selectEntities,
  selectIds,
  selectTotal
} = adapter.getSelectors();

ИНТЕРФЕЙСЫ

import { EntityState } from '@ngrx/entity';
import { IAnalyticUTM } from './analytic.interface';

export interface ICartEntityState extends EntityState<ICartState> {
  request: ICartRequest | null;
  data: ICartData | null;
  dataError: ICartDataError | null;
  loading: boolean;
}

export interface ICartState {
  request: ICartRequest | null;
  data: ICartData | null;
  dataError: ICartDataError | null;
}

export interface ICartData {
  _uid: string;
  protocol: string;
  client: {
    name: string;
  };
  plan: {
    sku: string;
    modality: number;
  };
  paymentDueDays?: [{ // SÓ EXISTE NA REQUISIÇÃO P/ O CARRINHO DA CLARO
    dueDay: number;
    defaultDay: boolean;
  }];
}

export interface ICartDataError {
  protocol: string;
  message: string;
  validations: [{
    attribute: string;
    protocol: string;
  }] | null;
}

export interface ICartRequest {
  headers: ICartHeaders;
  body: ICartBody;
}

export interface ICartHeaders {
  'X-UserId': string;
  authorization: string;
  operatorCode: string;
}

export interface ICartBody {
  _uidSession: string;
  originCode: string;
  operatorCode: string;
  operatorUserSeller: string;
  utm: IAnalyticUTM;
  client: {
    cpf: string;
    name?: string;
    motherName?: string;
    birthdate?: string;
    email: string;
    phoneNumber: string;
    phoneNumberDDD: string;
  };
  plan: {
    sku: string;
    type: string;
    modality: number;
  };
}

1 Ответ

0 голосов
/ 29 марта 2020

Проблема в том, что интерфейсы не соответствуют друг другу:

export class CreateCart implements Action {
    readonly type: ActionTypes.CREATE_CART = ActionTypes.CREATE_CART;
    constructor(public payload: { request: ICartRequest }) {}
}

здесь мы имеем ICartRequest.

        case ActionTypes.CREATE_CART:
            return adapter.addOne(action.payload.request, {
                ...state,
                loading: true
            });

, где adapter.addOne ожидает ICartState.

и если вы отметите https://take.ms/Crj4S - вы можете заметить, как они отличаются друг от друга.

Чтобы соответствовать этому, код должен быть таким:

            return adapter.addOne({request: action.payload.request, data: null, dataError: null}, {
                ...state,
                loading: true
            });

или вы можете пометить поля как дополнительные:

export interface ICartState {
    request?: ICartRequest;
    data?: ICartData;
    dataError?: ICartDataError;
}

, тогда код может быть таким:

        case ActionTypes.CREATE_CART:
            return adapter.addOne(action.payload, {
                ...state,
                loading: true
            });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...