Я создаю состояние для корзины, и в каждое действие я вставляю отдельный интерфейс.
Однако при вставке интерфейса 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;
};
}