actions.ts

export class ResetCounter {
  public static type = '[Counter] Reset Count';
  constructor() {}
}

export class UpdateValue1 {
  public static type = '[Sum] Update Value1';
  constructor(public readonly amount: number) {}
}

export class UpdateValue2 {
  public static type = '[Sum] Update Value2';
  constructor(public readonly amount: number) {}
}

export class UpdateValue3 {
  public static type = '[Sum] Update Value3';
  constructor(public readonly amount: number) {}
}

child.component.html

<div class="wrapper">
    <div class="title">
      Child 👦
    </div>
    <div class="content">
      <div class="action">
        <button (click)="updateValue(-1)">-1</button>
        <span class="value"> {{ value$ | async }}</span>
        <button (click)="updateValue(1)">+1</button>
      </div>
    </div>
      <app-little-child></app-little-child>
  </div>

child.component.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { UpdateValue2 } from '../state/actions';
import { CounterQueries } from '../state/counter.queries';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChildComponent implements OnInit {
  @Select(CounterQueries.value2) value$: Observable<number>;

  constructor(private store: Store) {}

  ngOnInit(): void {}

  updateValue(value: number): void {
    this.store.dispatch(new UpdateValue2(value));
  }
}

counter.queries.ts

import { Selector } from '@ngxs/store';
import { Counter, CounterState } from './counter.state';

export class CounterQueries {

  @Selector([CounterState])
  public static sum(counter: Counter): number {
    return counter.value1 + counter.value2 + counter.value3;
  }

  @Selector([CounterState])
  public static value1(counter: Counter): number {
    return counter.value1;
  }

  @Selector([CounterState])
  public static value2(counter: Counter): number {
    return counter.value2;
  }

  @Selector([CounterState])
  public static value3(counter: Counter): number {
    return counter.value3;
  }
}

counter.state.ts

import { Injectable } from '@angular/core';
import { Action, State, StateContext } from '@ngxs/store';
import { patch } from '@ngxs/store/operators';
import { ResetCounter, UpdateValue1, UpdateValue2, UpdateValue3 } from './actions';

export interface Counter {
  value1: number;
  value2: number;
  value3: number;
}

const initialState: Counter = { value1: 0, value2: 0, value3: 0 };

@State<Counter>({
  name: 'counter',
  defaults: initialState,
})
@Injectable()
export class CounterState {

  @Action(UpdateValue1)
  updateValue1(ctx: StateContext<Counter>, { amount }: UpdateValue1): void {
    ctx.setState(patch({ value1: ctx.getState().value1 + amount }));
  }

  @Action(UpdateValue2)
  updateValue2(ctx: StateContext<Counter>, { amount }: UpdateValue2): void {
    ctx.setState(patch({ value2: ctx.getState().value2 + amount }));
  }

  @Action(UpdateValue3)
  updateValue3(ctx: StateContext<Counter>, { amount }: UpdateValue3): void {
    ctx.setState(patch({ value3: ctx.getState().value3 + amount }));
  }

  @Action(ResetCounter)
  resetCounter(ctx: StateContext<Counter>): void {
    ctx.setState(initialState);
  }
}