Skip to content

Instantly share code, notes, and snippets.

@kuncevic
Last active October 16, 2020 06:43
Show Gist options
  • Save kuncevic/2494bca4d1bd59fc122403cd7127aead to your computer and use it in GitHub Desktop.
Save kuncevic/2494bca4d1bd59fc122403cd7127aead to your computer and use it in GitHub Desktop.
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) {}
}
<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>
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));
}
}
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;
}
}
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment