Angular Architectures with NgRx Stores & Effects

Angular offers many possibilities in the frontend, but also some challenges. If an application grows, sooner or later you have to deal with the issue of the state of the application. But what do "stateful" and "stateless" mean anyway? What are "Container Components" and "Presentation Components"? And how do I get a clean grip on the state of my application in the frontend? Tools like ngrx can help us to design our application cleanly and especially for large applications they help to keep track of the state. In this talk by Fabian Gosebrink, you will learn how these tools can be used and help you to manage even large applications with Angular.

Transcript

1. ARCHITECTURES
   WITH
   STORES &
   EFFECTS
   

   View Slide

2. Component
   Component
   Component
   Component
   Component
   

   View Slide

3. Component
   Component
   Component
   REST
   Component
   Component
   

   View Slide

4. REST
   Component
   Component
   Component
   Component
   Component
   

   View Slide

5. View Slide

6. View Slide

7. O N E
   W A Y
   D A T A F L O W
   

   View Slide

8. Component
   Component
   Component
   REST
   Component
   Component
   

   View Slide

9. Component
   Component
   Component
   REST
   Component
   Component
   

   View Slide

10. S T A T E F U L
    

    View Slide

11. Component
    Component
    Component
    REST
    Component
    Component
    

    View Slide

12. Component
    Component
    Component
    REST
    Component
    Component
    

    View Slide

13. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    

    View Slide

14. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    constructor(private service: Service) {}
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    

    View Slide

15. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    constructor(private service: Service) {}
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.getData()
    .subscribe(data => this.items = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    8
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    

    View Slide

16. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    constructor(private service: Service) {}
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.getData()
    .subscribe(data => this.items = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    8
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    11
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    

    View Slide

17. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    constructor(private service: Service) {}
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.getData()
    .subscribe(data => this.items = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    8
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    11
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    addTodo(item: string) {
    // ...
    }
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    15
    16
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    

    View Slide

18. export class ContentComponent implements OnInit {
    items: Todo[];
    doneItems: Todo[];
    constructor(private service: Service) {}
    ngOnInit() {
    this.service.getData()
    .subscribe(data => this.items = data);
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    }
    addTodo(item: string) {
    // ...
    }
    markAsDone(item: Todo) {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    constructor(private service: Service) {}
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.getData()
    .subscribe(data => this.items = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    8
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    this.service.detDoneItems()
    .subscribe(data => this.doneItems = data);
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    11
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    addTodo(item: string) {
    // ...
    }
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    15
    16
    17
    18
    markAsDone(item: Todo) {
    19
    // ...
    20
    }
    21
    }
    22
    markAsDone(item: Todo) {
    // ...
    }
    export class ContentComponent implements OnInit {
    1
    items: Todo[];
    2
    doneItems: Todo[];
    3
    4
    constructor(private service: Service) {}
    5
    6
    ngOnInit() {
    7
    this.service.getData()
    8
    .subscribe(data => this.items = data);
    9
    10
    this.service.detDoneItems()
    11
    .subscribe(data => this.doneItems = data);
    12
    }
    13
    14
    addTodo(item: string) {
    15
    // ...
    16
    }
    17
    18
    19
    20
    21
    }
    22
    

    View Slide

19. 
    (todoAdded)="addTodo($event)">
    
    [items]="items"
    [doneItems]="doneItems"
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    

    View Slide

20. 
    (todoAdded)="addTodo($event)">
    
    [items]="items"
    [doneItems]="doneItems"
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    (todoAdded)="addTodo($event)">
    
    
    1
    2
    3
    4
    5
    6
    [items]="items"
    7
    [doneItems]="doneItems"
    8
    (markAsDone)="markAsDone($event)"
    9
    >
    10
    
    11
    

    View Slide

21. 
    (todoAdded)="addTodo($event)">
    
    [items]="items"
    [doneItems]="doneItems"
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    (todoAdded)="addTodo($event)">
    
    
    1
    2
    3
    4
    5
    6
    [items]="items"
    7
    [doneItems]="doneItems"
    8
    (markAsDone)="markAsDone($event)"
    9
    >
    10
    
    11
    [items]="items"
    [doneItems]="doneItems"
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    (todoAdded)="addTodo($event)">
    3
    
    4
    5
    6
    7
    8
    9
    10
    
    11
    

    View Slide

22. Component
    Component
    Component
    REST
    Component
    Component
    

    View Slide

23. S T A T E L E S S
    

    View Slide

24. Component
    Component
    Component
    REST
    Component
    Component
    

    View Slide

25. export class TodoListComponent {
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    @Output() markAsDone = new EventEmitter();
    moveToDone(item: Todo) {
    this.markAsDone.emit(item);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    

    View Slide

26. export class TodoListComponent {
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    @Output() markAsDone = new EventEmitter();
    moveToDone(item: Todo) {
    this.markAsDone.emit(item);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    export class TodoListComponent {
    1
    2
    3
    4
    @Output() markAsDone = new EventEmitter();
    5
    6
    moveToDone(item: Todo) {
    7
    this.markAsDone.emit(item);
    8
    }
    9
    }
    10
    

    View Slide

27. export class TodoListComponent {
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    @Output() markAsDone = new EventEmitter();
    moveToDone(item: Todo) {
    this.markAsDone.emit(item);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    export class TodoListComponent {
    1
    2
    3
    4
    @Output() markAsDone = new EventEmitter();
    5
    6
    moveToDone(item: Todo) {
    7
    this.markAsDone.emit(item);
    8
    }
    9
    }
    10
    @Output() markAsDone = new EventEmitter();
    this.markAsDone.emit(item);
    export class TodoListComponent {
    1
    @Input() items: Todo[] = [];
    2
    @Input() doneItems: Todo[] = [];
    3
    4
    5
    6
    moveToDone(item: Todo) {
    7
    8
    }
    9
    }
    10
    

    View Slide

28. export class TodoListComponent {
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    @Output() markAsDone = new EventEmitter();
    moveToDone(item: Todo) {
    this.markAsDone.emit(item);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    export class TodoListComponent {
    1
    2
    3
    4
    @Output() markAsDone = new EventEmitter();
    5
    6
    moveToDone(item: Todo) {
    7
    this.markAsDone.emit(item);
    8
    }
    9
    }
    10
    @Output() markAsDone = new EventEmitter();
    this.markAsDone.emit(item);
    export class TodoListComponent {
    1
    @Input() items: Todo[] = [];
    2
    @Input() doneItems: Todo[] = [];
    3
    4
    5
    6
    moveToDone(item: Todo) {
    7
    8
    }
    9
    }
    10
    export class TodoListComponent {
    @Input() items: Todo[] = [];
    @Input() doneItems: Todo[] = [];
    @Output() markAsDone = new EventEmitter();
    moveToDone(item: Todo) {
    this.markAsDone.emit(item);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    

    View Slide

29. Component
    Component
    Component
    REST
    Component
    Component
    

    View Slide

30. Component
    Component
    Component
    REST
    Component
    Component
    MULTIPLE
    TIMES
    

    View Slide

31. S I N G L E
    S O U R C E
    O F T R U T H
    

    View Slide

32. S T A T E
    

    View Slide

33. ARCHITECTURES
    WITH
    STORES &
    EFFECTS
    

    View Slide

34. Component REST
    Service
    

    View Slide

35. Component REST
    State ...
    

    View Slide

36. S T O R E
    

    View Slide

37. S T O R E
    V S
    S T A T E
    

    View Slide

38. S T O R E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent {
    constructor(private store: Store) {}
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    

    View Slide

39. S T O R E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent {
    constructor(private store: Store) {}
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    import { Store } from '@ngrx/store';
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent {
    5
    6
    7
    8
    }
    9
    

    View Slide

40. Component
    Store
    

    View Slide

41. S T A T E
    

    View Slide

42. S T A T E
    

    View Slide

43. S T A T E
    

    View Slide

44. S T A T E
    

    View Slide

45. S T A T E
    

    View Slide

46. S T A T E
    

    View Slide

47. Component
    Store
    State
    

    View Slide

48. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    

    View Slide

49. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    

    View Slide

50. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.items$ = this.store.select(state => state.items);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    

    View Slide

51. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.items$ = this.store.select(state => state.items);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.loading$ = this.store.select(state => state.loading);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    13
    }
    14
    }
    15
    

    View Slide

52. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.items$ = this.store.select(state => state.items);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.loading$ = this.store.select(state => state.loading);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    13
    }
    14
    }
    15
    items$: Observable;
    loading$: Observable;
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    6
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    

    View Slide

53. S T A T E
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    constructor(private store: Store) {}
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.items$ = this.store.select(state => state.items);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    this.loading$ = this.store.select(state => state.loading);
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    items$: Observable;
    6
    loading$: Observable;
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    13
    }
    14
    }
    15
    items$: Observable;
    loading$: Observable;
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    @Component({ /*...*/ })
    4
    export class ContentComponent implements OnInit {
    5
    6
    7
    8
    constructor(private store: Store) {}
    9
    10
    ngOnInit() {
    11
    this.items$ = this.store.select(state => state.items);
    12
    this.loading$ = this.store.select(state => state.loading);
    13
    }
    14
    }
    15
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    loading$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state.items);
    this.loading$ = this.store.select(state => state.loading);
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    

    View Slide

54. S T A T E
    
    (todoAdded)="addTodo($event)">
    
    [items]="items$ | async"
    ...
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    

    View Slide

55. S T A T E
    
    (todoAdded)="addTodo($event)">
    
    [items]="items$ | async"
    ...
    (markAsDone)="markAsDone($event)"
    >
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [items]="items$ | async"
    
    1
    2
    (todoAdded)="addTodo($event)">
    3
    
    4
    5
    6
    7
    ...
    8
    (markAsDone)="markAsDone($event)"
    9
    >
    10
    
    11
    

    View Slide

56. STATE
    MANIPULATION?
    

    View Slide

57. A C T I O N S
    

    View Slide

58. A C T I O N S
    import { createAction } from '@ngrx/store';
    createAction(...);
    1
    2
    3
    

    View Slide

59. A C T I O N S
    import { createAction } from '@ngrx/store';
    createAction('[Todo] Load Todos');
    1
    2
    3
    

    View Slide

60. A C T I O N S
    import { createAction } from '@ngrx/store';
    export const loadAllTodos = createAction('[Todo] Load Todos');
    1
    2
    3
    

    View Slide

61. A C T I O N S
    import { createAction } from '@ngrx/store';
    export const loadAllTodos = createAction('[Todo] Load Todos');
    export const loadAllTodosFinished = createAction(
    '[Todo] Load Todos Finished'
    );
    1
    2
    3
    4
    5
    6
    7
    

    View Slide

62. A C T I O N S
    import { createAction, props } from '@ngrx/store';
    export const loadAllTodos = createAction('[Todo] Load Todos');
    export const loadAllTodosFinished = createAction(
    '[Todo] Load Todos Finished',
    props<{ payload: Todo[] }>()
    );
    1
    2
    3
    4
    5
    6
    7
    8
    

    View Slide

63. A C T I O N S
    import { createAction, props } from '@ngrx/store';
    export const loadAllTodos = createAction('[Todo] Load Todos');
    export const loadAllTodosFinished = createAction(
    '[Todo] Load Todos Finished',
    props<{ payload: Todo[] }>()
    );
    export const addTodo = createAction(
    '[Todo] Add Todo',
    props<{ payload: string }>()
    );
    export const addTodoFinished = createAction(
    '[Todo] Add Todo Finished',
    props<{ payload: Todo }>()
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    

    View Slide

64. A C T I O N S
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    import * as todoActions from '../../store/todo.actions';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state...);
    this.store.dispatch(todoActions.loadAllTodos());
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    

    View Slide

65. A C T I O N S
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    import * as todoActions from '../../store/todo.actions';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state...);
    this.store.dispatch(todoActions.loadAllTodos());
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import * as todoActions from '../../store/todo.actions';
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    4
    @Component({ /*...*/ })
    5
    export class ContentComponent implements OnInit {
    6
    7
    constructor(private store: Store) {}
    8
    9
    ngOnInit() {
    10
    this.items$ = this.store.select(state => state...);
    11
    12
    this.store.dispatch(todoActions.loadAllTodos());
    13
    }
    14
    }
    15
    

    View Slide

66. A C T I O N S
    import { Component, OnInit } from '@angular/core';
    import { Store } from '@ngrx/store';
    import * as todoActions from '../../store/todo.actions';
    @Component({ /*...*/ })
    export class ContentComponent implements OnInit {
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.select(state => state...);
    this.store.dispatch(todoActions.loadAllTodos());
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import * as todoActions from '../../store/todo.actions';
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    3
    4
    @Component({ /*...*/ })
    5
    export class ContentComponent implements OnInit {
    6
    7
    constructor(private store: Store) {}
    8
    9
    ngOnInit() {
    10
    this.items$ = this.store.select(state => state...);
    11
    12
    this.store.dispatch(todoActions.loadAllTodos());
    13
    }
    14
    }
    15
    this.store.dispatch(todoActions.loadAllTodos());
    import { Component, OnInit } from '@angular/core';
    1
    import { Store } from '@ngrx/store';
    2
    import * as todoActions from '../../store/todo.actions';
    3
    4
    @Component({ /*...*/ })
    5
    export class ContentComponent implements OnInit {
    6
    7
    constructor(private store: Store) {}
    8
    9
    ngOnInit() {
    10
    this.items$ = this.store.select(state => state...);
    11
    12
    13
    }
    14
    }
    15
    

    View Slide

67. R E D U C E R
    (oldState, action) => newState
    1
    

    View Slide

68. R E D U C E R
    import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    export interface ReducerTodoState {
    items: Todo[];
    selectedItem: Todo;
    loading: boolean;
    }
    export const initialState: ReducerTodoState = {
    items: [],
    selectedItem: null,
    loading: false
    };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    

    View Slide

69. R E D U C E R
    import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    export interface ReducerTodoState { ... }
    export const initialState: ReducerTodoState = { ... };
    const todoReducer = createReducer(
    initialState,
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

70. R E D U C E R
    import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    export interface ReducerTodoState { ... }
    export const initialState: ReducerTodoState = { ... };
    const todoReducer = createReducer(
    initialState,
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    export const initialState: ReducerTodoState = { ... };
    const todoReducer = createReducer(
    initialState,
    import { Action, createReducer, on } from '@ngrx/store';
    1
    import * as todoActions from './todo.actions';
    2
    3
    export interface ReducerTodoState { ... }
    4
    5
    6
    7
    8
    9
    on(todoActions.loadAllTodos,
    10
    (state) => ({
    11
    ...state,
    12
    loading: true,
    13
    })
    14
    ),
    15
    );
    16
    

    View Slide

71. R E D U C E R
    import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    export interface ReducerTodoState { ... }
    export const initialState: ReducerTodoState = { ... };
    const todoReducer = createReducer(
    initialState,
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    export const initialState: ReducerTodoState = { ... };
    const todoReducer = createReducer(
    initialState,
    import { Action, createReducer, on } from '@ngrx/store';
    1
    import * as todoActions from './todo.actions';
    2
    3
    export interface ReducerTodoState { ... }
    4
    5
    6
    7
    8
    9
    on(todoActions.loadAllTodos,
    10
    (state) => ({
    11
    ...state,
    12
    loading: true,
    13
    })
    14
    ),
    15
    );
    16
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    import { Action, createReducer, on } from '@ngrx/store';
    1
    import * as todoActions from './todo.actions';
    2
    3
    export interface ReducerTodoState { ... }
    4
    5
    export const initialState: ReducerTodoState = { ... };
    6
    7
    const todoReducer = createReducer(
    8
    initialState,
    9
    10
    11
    12
    13
    14
    15
    );
    16
    

    View Slide

72. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

73. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

74. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

75. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

76. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

77. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

78. CONTAINER
    store.select(...)
    store.dispatch(…)
    

    View Slide

79. CONTAINER
    store.select(...)
    store.dispatch(…)
    PRESENTATIONAL
    @Input(…)
    @Output(…)
    

    View Slide

80. S Y N C
    

    View Slide

81. S Y N C
    V S
    A S Y N C
    

    View Slide

82. E F F E C T S
    @Injectable()
    export class TodoEffects {
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

83. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

84. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    this.actions$.pipe(
    )
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

85. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    this.actions$.pipe(
    ofType(todoActions.loadAllTodos),
    switchMap(() =>
    )
    )
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

86. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    this.actions$.pipe(
    ofType(todoActions.loadAllTodos),
    switchMap(() =>
    this.todoService
    .getItems()
    )
    )
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

87. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    this.actions$.pipe(
    ofType(todoActions.loadAllTodos),
    switchMap(() =>
    this.todoService
    .getItems()
    .pipe(
    map((todos) =>
    todoActions.loadAllTodosFinished({ payload: todos }))
    )
    )
    )
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    View Slide

88. E F F E C T S
    @Injectable()
    export class TodoEffects {
    loadTodos$ = createEffect(() =>
    this.actions$.pipe(
    ofType(todoActions.loadAllTodos),
    switchMap(() =>
    this.todoService
    .getItems()
    .pipe(
    map((todos) =>
    todoActions.loadAllTodosFinished({ payload: todos }))
    )
    )
    )
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    todoActions.loadAllTodosFinished({ payload: todos }))
    @Injectable()
    1
    export class TodoEffects {
    2
    loadTodos$ = createEffect(() =>
    3
    this.actions$.pipe(
    4
    ofType(todoActions.loadAllTodos),
    5
    switchMap(() =>
    6
    this.todoService
    7
    .getItems()
    8
    .pipe(
    9
    map((todos) =>
    10
    11
    )
    12
    )
    13
    )
    14
    );
    15
    }
    16
    

    View Slide

89. import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    const todoReducer = createReducer(
    initialState,
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    on(todoActions.loadAllTodosFinished,
    (state, { payload }) => {
    return {
    ...state,
    loading: false,
    items: [...payload],
    };
    }),
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    

    View Slide

90. import { Action, createReducer, on } from '@ngrx/store';
    import * as todoActions from './todo.actions';
    const todoReducer = createReducer(
    initialState,
    on(todoActions.loadAllTodos,
    (state) => ({
    ...state,
    loading: true,
    })
    ),
    on(todoActions.loadAllTodosFinished,
    (state, { payload }) => {
    return {
    ...state,
    loading: false,
    items: [...payload],
    };
    }),
    );
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    on(todoActions.loadAllTodosFinished,
    (state, { payload }) => {
    return {
    ...state,
    loading: false,
    items: [...payload],
    };
    }),
    import { Action, createReducer, on } from '@ngrx/store';
    1
    import * as todoActions from './todo.actions';
    2
    3
    const todoReducer = createReducer(
    4
    initialState,
    5
    on(todoActions.loadAllTodos,
    6
    (state) => ({
    7
    ...state,
    8
    loading: true,
    9
    })
    10
    ),
    11
    12
    13
    14
    15
    16
    17
    18
    19
    );
    20
    

    View Slide

91. Component
    Store
    State
    Reducer
    Actions
    

    View Slide

92. Component
    Store
    State
    Reducer
    Effects
    Actions
    

    View Slide

93. View Slide

94. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    

    View Slide

95. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    constructor(private store: Store) {}
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    

    View Slide

96. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    constructor(private store: Store) {}
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.items$ = this.store.pipe(select(/*...*/));
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    

    View Slide

97. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    constructor(private store: Store) {}
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.items$ = this.store.pipe(select(/*...*/));
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.store.dispatch(todoActions.loadAllTodos());
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    

    View Slide

98. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    constructor(private store: Store) {}
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.items$ = this.store.pipe(select(/*...*/));
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.store.dispatch(todoActions.loadAllTodos());
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    12
    13
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    

    View Slide

99. @Component({/* ... */ })
    export class ContentComponent implements OnInit {
    items$: Observable;
    constructor(private store: Store) {}
    ngOnInit() {
    this.items$ = this.store.pipe(select(/*...*/));
    this.store.dispatch(todoActions.loadAllTodos());
    }
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    constructor(private store: Store) {}
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.items$ = this.store.pipe(select(/*...*/));
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    this.store.dispatch(todoActions.loadAllTodos());
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    addTodo(item: string) {
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    }
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    12
    13
    14
    15
    markAsDone(item: Todo) {
    16
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    17
    }
    18
    }
    19
    markAsDone(item: Todo) {
    this.store.dispatch(todoActions.setAsDone({ payload: item }));
    }
    @Component({/* ... */ })
    1
    export class ContentComponent implements OnInit {
    2
    items$: Observable;
    3
    4
    constructor(private store: Store) {}
    5
    6
    ngOnInit() {
    7
    this.items$ = this.store.pipe(select(/*...*/));
    8
    this.store.dispatch(todoActions.loadAllTodos());
    9
    }
    10
    11
    addTodo(item: string) {
    12
    this.store.dispatch(todoActions.addTodo({ payload: item }));
    13
    }
    14
    15
    16
    17
    18
    }
    19
    

    View Slide

100. Todo App
     
     
     [items]="items$ | async"
     (markAsDone)="markAsDone($event)"
     >
     1
     2
     3
     4
     5
     6
     7
     8
     9
     

     View Slide

101. Todo App
     
     
     [items]="items$ | async"
     (markAsDone)="markAsDone($event)"
     >
     1
     2
     3
     4
     5
     6
     7
     8
     9
     [items]="items$ | async"
     Todo App
     1
     2
     
     3
     
     4
     5
     6
     7
     (markAsDone)="markAsDone($event)"
     8
     >
     9
     

     View Slide

102. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forRoot({})
     ]
     })
     export class AppModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     

     View Slide

103. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forRoot({})
     ]
     })
     export class AppModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     }
     1
     2
     3
     

     View Slide

104. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature(...)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     

     View Slide

105. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     

     View Slide

106. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     StoreModule.forFeature("todo", todoReducer)
     import { StoreModule } from '@ngrx/store';
     1
     2
     @NgModule({
     3
     imports: [
     4
     5
     ]
     6
     })
     7
     export class TodoModule {}
     8
     

     View Slide

107. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     todo: {
     // ...
     }
     }
     1
     2
     3
     4
     5
     

     View Slide

108. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     todo: {
     // ...
     }
     }
     1
     2
     3
     4
     5
     

     View Slide

109. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     todo: {
     items: [],
     selectedItem: null,
     loading: false
     }
     }
     1
     2
     3
     4
     5
     6
     7
     

     View Slide

110. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     todo: {
     items: [],
     selectedItem: null,
     loading: false
     }
     }
     1
     2
     3
     4
     5
     6
     7
     

     View Slide

111. import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     import { StoreModule } from '@ngrx/store';
     @NgModule({
     imports: [
     StoreModule.forFeature("todo", todoReducer)
     ]
     })
     export class TodoModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     {
     todo: {
     items: [],
     selectedItem: null,
     loading: false
     }
     }
     1
     2
     3
     4
     5
     6
     7
     

     View Slide

112. SELECTORS
     import { Component, OnInit } from '@angular/core';
     import { Store } from '@ngrx/store';
     @Component({ /*...*/ })
     export class ContentComponent implements OnInit {
     constructor(private store: Store) {}
     ngOnInit() {
     const items$ = this.store.pipe(
     select((state) => state )
     );
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     

     View Slide

113. SELECTORS
     import { Component, OnInit } from '@angular/core';
     import { Store } from '@ngrx/store';
     @Component({ /*...*/ })
     export class ContentComponent implements OnInit {
     constructor(private store: Store) {}
     ngOnInit() {
     const items$ = this.store.pipe(
     select((state) => state )
     );
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     const items$ = this.store.pipe(
     select((state) => state )
     );
     import { Component, OnInit } from '@angular/core';
     1
     import { Store } from '@ngrx/store';
     2
     3
     @Component({ /*...*/ })
     4
     export class ContentComponent implements OnInit {
     5
     6
     constructor(private store: Store) {}
     7
     8
     ngOnInit() {
     9
     10
     11
     12
     13
     14
     15
     16
     }
     17
     }
     18
     

     View Slide

114. SELECTORS
     const items$ = this.store.pipe(
     select((state) => state.todo ))
     );
     import { Component, OnInit } from '@angular/core';
     1
     import { Store } from '@ngrx/store';
     2
     3
     @Component({ /*...*/ })
     4
     export class ContentComponent implements OnInit {
     5
     6
     constructor(private store: Store) {}
     7
     8
     ngOnInit() {
     9
     10
     11
     12
     13
     14
     15
     16
     }
     17
     }
     18
     

     View Slide

115. SELECTORS
     const items$ = this.store.pipe(
     select((state) => state.todo.items ))
     );
     import { Component, OnInit } from '@angular/core';
     1
     import { Store } from '@ngrx/store';
     2
     3
     @Component({ /*...*/ })
     4
     export class ContentComponent implements OnInit {
     5
     6
     constructor(private store: Store) {}
     7
     8
     ngOnInit() {
     9
     10
     11
     12
     13
     14
     15
     16
     }
     17
     }
     18
     

     View Slide

116. SELECTORS
     const items$ = this.store.pipe(
     select((state) => state.todo.items.filter((x) => !x.done))
     );
     import { Component, OnInit } from '@angular/core';
     1
     import { Store } from '@ngrx/store';
     2
     3
     @Component({ /*...*/ })
     4
     export class ContentComponent implements OnInit {
     5
     6
     constructor(private store: Store) {}
     7
     8
     ngOnInit() {
     9
     10
     11
     12
     13
     14
     15
     16
     }
     17
     }
     18
     

     View Slide

117. SELECTORS
     const doneItems$ = this.store.pipe(
     select((state) => state.todo.items.filter((x) => x.done))
     );
     import { Component, OnInit } from '@angular/core';
     1
     import { Store } from '@ngrx/store';
     2
     3
     @Component({ /*...*/ })
     4
     export class ContentComponent implements OnInit {
     5
     6
     constructor(private store: Store) {}
     7
     8
     ngOnInit() {
     9
     const items$ = this.store.pipe(
     10
     select((state) => state.todo.items.filter((x) => !x.done))
     11
     );
     12
     13
     14
     15
     16
     }
     17
     }
     18
     

     View Slide

118. SELECTORS
     export const getTodoState = createFeatureSelector("todo");
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     

     View Slide

119. SELECTORS
     export const getTodoState = createFeatureSelector("todo");
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     

     View Slide

120. SELECTORS
     export const getTodoState = createFeatureSelector("todo");
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     3
     4
     5
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     

     View Slide

121. SELECTORS
     export const getTodoState = createFeatureSelector("todo");
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     3
     4
     5
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     8
     9
     10
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     

     View Slide

122. SELECTORS
     export const getTodoState = createFeatureSelector("todo");
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getAllUndoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => !x.done)
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     3
     4
     5
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getAllDoneItems = createSelector(
     getTodoState,
     (state: TodoState) => state.items.filter((x) => x.done)
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     8
     9
     10
     11
     12
     export const getSelectedItem = createSelector(
     13
     getTodoState,
     14
     (state: TodoState) => state.selectedItem
     15
     );
     16
     export const getSelectedItem = createSelector(
     getTodoState,
     (state: TodoState) => state.selectedItem
     );
     export const getTodoState = createFeatureSelector("todo");
     1
     2
     export const getAllUndoneItems = createSelector(
     3
     getTodoState,
     4
     (state: TodoState) => state.items.filter((x) => !x.done)
     5
     );
     6
     7
     export const getAllDoneItems = createSelector(
     8
     getTodoState,
     9
     (state: TodoState) => state.items.filter((x) => x.done)
     10
     );
     11
     12
     13
     14
     15
     16
     

     View Slide

123. SELECTORS
     export class ContentComponent implements OnInit {
     items: Todo[];
     doneItems: Todo[];
     constructor(private service: Service) {}
     ngOnInit() {
     this.service.getData()
     .subscribe((data) => {
     this.items = data
     });
     this.service.detDoneItems()
     .subscribe((data) => {
     this.items = data
     });
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     

     View Slide

124. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     

     View Slide

125. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     constructor(private store: Store) {}
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     

     View Slide

126. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     constructor(private store: Store) {}
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     

     View Slide

127. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     constructor(private store: Store) {}
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     

     View Slide

128. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     constructor(private store: Store) {}
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.store.dispatch(todoActions.loadAllTodos());
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     11
     }
     12
     }
     13
     

     View Slide

129. SELECTORS
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     constructor(private store: Store) {}
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     9
     10
     this.store.dispatch(todoActions.loadAllTodos());
     11
     }
     12
     }
     13
     this.store.dispatch(todoActions.loadAllTodos());
     export class ContentComponent implements OnInit {
     1
     items$: Observable;
     2
     doneItems$: Observable;
     3
     4
     constructor(private store: Store) {}
     5
     6
     ngOnInit() {
     7
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     8
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     9
     10
     11
     }
     12
     }
     13
     export class ContentComponent implements OnInit {
     items$: Observable;
     doneItems$: Observable;
     constructor(private store: Store) {}
     ngOnInit() {
     this.items$ = this.store.pipe(select(getAllUndoneItems));
     this.doneItems$ = this.store.pipe(select(getAllDoneItems));
     this.store.dispatch(todoActions.loadAllTodos());
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     

     View Slide

130. @NGRX/DATA
     

     View Slide

131. @NGRX/DATA
     import { EntityMetadataMap } from '@ngrx/data';
     const entityMetadata: EntityMetadataMap = {
     Hero: {},
     };
     export const entityConfig = {
     entityMetadata
     };
     1
     2
     3
     4
     5
     6
     7
     8
     9
     

     View Slide

132. @NGRX/DATA
     import ...
     import { EntityDataModule } from '@ngrx/data';
     import { entityConfig } from './entity-metadata';
     @NgModule({
     imports: [
     HttpClientModule,
     StoreModule.forRoot({}),
     EffectsModule.forRoot([]),
     EntityDataModule.forRoot(entityConfig)
     ]
     })
     export class AppModule {}
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     

     View Slide

133. @NGRX/DATA
     import { Injectable } from '@angular/core';
     import {
     EntityCollectionServiceBase,
     EntityCollectionServiceElementsFactory
     } from '@ngrx/data';
     import { Hero } from '../core';
     @Injectable({ providedIn: 'root' })
     export class HeroService extends EntityCollectionServiceBase {
     constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
     super('Hero', serviceElementsFactory);
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     

     View Slide

134. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     

     View Slide

135. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     

     View Slide

136. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     loading$: Observable;
     heroes$: Observable;
     export class HeroesComponent implements OnInit {
     1
     2
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     

     View Slide

137. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     loading$: Observable;
     heroes$: Observable;
     export class HeroesComponent implements OnInit {
     1
     2
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     14
     15
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     this.heroService.getAll();
     23
     }
     24
     25
     update(hero: Hero) {
     26
     

     View Slide

138. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     loading$: Observable;
     heroes$: Observable;
     export class HeroesComponent implements OnInit {
     1
     2
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     14
     15
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     this.loading$ heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     18
     19
     20
     21
     getHeroes() {
     22
     this.heroService.getAll();
     23
     }
     24
     25
     update(hero: Hero) {
     26
     this.heroService.update(hero);
     27
     }
     28
     }
     29
     

     View Slide

139. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     loading$: Observable;
     heroes$: Observable;
     export class HeroesComponent implements OnInit {
     1
     2
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     14
     15
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     18
     19
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     getHeroes() {
     this.heroService.getAll();
     }
     this.loading$ heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     22
     23
     24
     25
     update(hero: Hero) {
     26
     this.heroService.update(hero);
     27
     }
     28
     }
     29
     

     View Slide

140. @NGRX/DATA
     export class HeroesComponent implements OnInit {
     loading$: Observable;
     heroes$: Observable;
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     ngOnInit() {
     this.getHeroes();
     }
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     getHeroes() {
     hi h i ll
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     constructor(private heroService: HeroService) {
     this.heroes$ = heroService.entities$;
     this.loading$ = heroService.loading$;
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     5
     6
     7
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     loading$: Observable;
     heroes$: Observable;
     export class HeroesComponent implements OnInit {
     1
     2
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     add(hero: Hero) {
     this.heroService.add(hero);
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     14
     15
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     delete(hero: Hero) {
     this.heroService.delete(hero.id);
     }
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     18
     19
     20
     21
     getHeroes() {
     22
     hi h i ll
     23
     getHeroes() {
     hi h i ll
     export class HeroesComponent implements OnInit {
     1
     loading$: Observable;
     2
     heroes$: Observable;
     3
     4
     constructor(private heroService: HeroService) {
     5
     this.heroes$ = heroService.entities$;
     6
     this.loading$ = heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     22
     23
     update(hero: Hero) {
     this.heroService.update(hero);
     }
     this.loading$ heroService.loading$;
     7
     }
     8
     9
     ngOnInit() {
     10
     this.getHeroes();
     11
     }
     12
     13
     add(hero: Hero) {
     14
     this.heroService.add(hero);
     15
     }
     16
     17
     delete(hero: Hero) {
     18
     this.heroService.delete(hero.id);
     19
     }
     20
     21
     getHeroes() {
     22
     this.heroService.getAll();
     23
     }
     24
     25
     26
     27
     28
     }
     29
     

     View Slide

141. ARCHITECTURES
     WITH
     STORES &
     EFFECTS
     

     View Slide

142. FABIAN
     GOSEBRINK
     

     View Slide

143. TAKE CARE
     

     View Slide