NGXS 3.1.4 Хранить расчеты / операции

Question

Я создаю приложение Angular 6 и пытаюсь понять NGXS (3.1.4).

Мне уже удалось реализовать @Actions to ADD и REMOVE Cart Cart from / to store; те, на самом деле работают.

Я все еще пытаюсь сделать следующее:

1. Подсчитайте общее количество cartItems и отобразите его как значение в угловой компонент html
2. Очистить все элементы корзины в корзине

решаемые

@Action(EmptyCart) emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
const state = ctx.getState(); 
const current = { cartItems: [] }; 
ctx.setState({ ...state, ...current }); 
}

3. Обновить только количество CartItem в cartItems, если идентификатор уже существует
4. Рассчитать общую сумму корзины, рассчитав каждую цену cartItems * и добавив ее к промежуточной сумме для отображения в угловом html-компоненте

Я ценю, что задаю несколько вопросов, но они связаны с одной и той же проблемой.

Если есть видео или ссылка, описывающая проблему такого рода, это было бы замечательно. Я попытался выполнить поиск в google / youtube и просмотреть документы github для NGXS.

Ниже я использую:

export interface CartItem {
  tempID: number;
  id: number;
  name: string;
  price: number;
  quantity: number;

}

export class CartStateModel {
    cartItems: CartItem[];
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: {
    cartItems: []
  }
})

Спасибо за любые отзывы: -)

Answer 1

Вот подход, который я использую:

function emptyCartState() {
  return {
    cartItems: [],
  }
}

@State<CartStateModel>({
  name: 'cartItems',
  defaults: emptyCartState(),
})

..
..
..
Action(EmptyCart)
emptyCart(ctx: StateContext<CartStateModel>, action: EmptyCart) { 
  return of(ctx.setState(emptyCartState()));
}