ARCHITECTURES WITH STORES & EFFECTS 

FABIAN GOSEBRINK 

Component Component Component Component Component 

Component Component Component REST Component Component 

REST Component Component Component Component Component 

No content

No content

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

Component Component Component REST Component Component 

Component Component Component REST Component Component 

S T A T E F U L 

Component Component Component REST Component Component 

Component Component Component REST Component Component 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 doneItems: Todo[]; export class ContentComponent implements OnInit { 1 private readonly service = inject(Service); 2 3 items: Todo[]; 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 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 doneItems: Todo[]; export class ContentComponent implements OnInit { 1 private readonly service = inject(Service); 2 3 items: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 doneItems: Todo[]; export class ContentComponent implements OnInit { 1 private readonly service = inject(Service); 2 3 items: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 doneItems: Todo[]; export class ContentComponent implements OnInit { 1 private readonly service = inject(Service); 2 3 items: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 

export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 doneItems: Todo[]; export class ContentComponent implements OnInit { 1 private readonly service = inject(Service); 2 3 items: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 private readonly service = inject(Service); 2 3 items: Todo[]; 4 doneItems: Todo[]; 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 

1 2 3 4 5 6 7 8 9 10 11 

1 2 3 4 5 6 7 8 9 10 11 11 

1 2 3 4 5 6 7 8 9 10 11 11 11 

Component Component Component REST Component Component 

S T A T E L E S S 

Component Component Component REST Component Component 

export class TodoListComponent { items = input([]) doneItems = input([]) markAsDone = output(); moveToDone(item: Todo) { this.markAsDone.emit(item); } } 1 2 3 4 5 6 7 8 9 10 

export class TodoListComponent { items = input([]) doneItems = input([]) markAsDone = output(); moveToDone(item: Todo) { this.markAsDone.emit(item); } } 1 2 3 4 5 6 7 8 9 10 items = input([]) doneItems = input([]) export class TodoListComponent { 1 2 3 4 markAsDone = output(); 5 6 moveToDone(item: Todo) { 7 this.markAsDone.emit(item); 8 } 9 } 10 

export class TodoListComponent { items = input([]) doneItems = input([]) markAsDone = output(); moveToDone(item: Todo) { this.markAsDone.emit(item); } } 1 2 3 4 5 6 7 8 9 10 items = input([]) doneItems = input([]) export class TodoListComponent { 1 2 3 4 markAsDone = output(); 5 6 moveToDone(item: Todo) { 7 this.markAsDone.emit(item); 8 } 9 } 10 markAsDone = output(); this.markAsDone.emit(item); export class TodoListComponent { 1 items = input([]) 2 doneItems = input([]) 3 4 5 6 moveToDone(item: Todo) { 7 8 } 9 } 10 

Component Component Component REST Component Component 

Component Component Component REST Component Component MULTIPLE TIMES 

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

S T A T E 

ARCHITECTURES WITH STORES & EFFECTS 

Component REST Service 

Component REST State ... 

S T O R E 

S T O R E V S S T A T E 

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

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

Component Store 

S T A T E 

S T A T E 

S T A T E 

S T A T E 

S T A T E 

S T A T E 

Component Store State 

S T A T E import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; @Component({ /*...*/ }) export class ContentComponent { private readonly Store = inject(Store); items$ = this.store.select(state => state.items); loading$ = this.store.select(state => state.loading); } 1 2 3 4 5 6 7 8 9 10 

S T A T E 1 2 3 4 5 6 7 8 9 10 11 

S T A T E 1 2 3 4 5 6 7 8 9 10 11 [items]="items$ | async" 11 

STATE MANIPULATION? 

A C T I O N S 

A C T I O N S export const TodoActions = createActionGroup({ ... }); 1 2 3 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { // ... }, }); 1 2 3 4 5 6 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 'Add Todo': props<{ value: string }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 'Add Todo': props<{ value: string }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Add Todo Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 'Add Todo': props<{ value: string }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Add Todo Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 7 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 'Add Todo': props<{ value: string }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Add Todo Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 7 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 10 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 

A C T I O N S export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 'Add Todo': props<{ value: string }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Add Todo Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 7 8 9 'Set As Done': props<{ todo: Todo }>(), 10 'Set As Done Finished': props<{ todo: Todo }>(), 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), export const TodoActions = createActionGroup({ 1 source: 'Todo', 2 events: { 3 'Add Todo': props<{ value: string }>(), 4 'Add Todo Finished': props<{ todo: Todo }>(), 5 6 'Load All Todos': emptyProps(), 7 'Load All Todos Finished': props<{ todos: Todo[] }>(), 8 9 10 11 12 'Delete Todo': props<{ todo: Todo }>(), 13 'Delete Todo Finished': props<{ todo: Todo }>(), 14 }, 15 }); 16 export const TodoActions = createActionGroup({ source: 'Todo', events: { 'Add Todo': props<{ value: string }>(), 'Add Todo Finished': props<{ todo: Todo }>(), 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ todos: Todo[] }>(), 'Set As Done': props<{ todo: Todo }>(), 'Set As Done Finished': props<{ todo: Todo }>(), 'Delete Todo': props<{ todo: Todo }>(), 'Delete Todo Finished': props<{ todo: Todo }>(), }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

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

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

R E D U C E R export interface TodoState { items: Todo[]; selectedItem: Todo; loading: boolean; } export const initialState: TodoState = { items: [], selectedItem: null, loading: false }; 1 2 3 4 5 6 7 8 9 10 11 

R E D U C E R export interface TodoState { ... } export const initialState: TodoState = { ... }; 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 

Component Store State Reducer Actions 

Component Store State Reducer Actions 

Component Store State Reducer Actions 

Component Store State Reducer Actions 

Component Store State Reducer Actions 

Component Store State Reducer Actions 

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

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

S Y N C 

S Y N C V S A S Y N C 

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 

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 

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 

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 

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 

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 

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 

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 

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 on(TodoActions.loadAllTodosFinished, (state, { payload }) => { return { ...state, loading: false, items: [...payload], }; }), const todoReducer = createReducer( 1 initialState, 2 on(TodoActions.loadAllTodos, 3 (state) => ({ 4 ...state, 5 loading: true, 6 }) 7 ), 8 9 10 11 12 13 14 15 16 17 ); 18 

Component Store State Reducer Actions 

Component Store State Reducer Effects Actions 

No content

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 items$ = this.store.pipe(select(/*...*/)); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 items$ = this.store.pipe(select(/*...*/)); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.loadAllTodos()); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 items$ = this.store.pipe(select(/*...*/)); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.loadAllTodos()); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 items$ = this.store.pipe(select(/*...*/)); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.loadAllTodos()); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.addTodo({ payload: item })); } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 12 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 

@Component({/* ... */ }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.pipe(select(/*...*/)); ngOnInit() { 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 items$ = this.store.pipe(select(/*...*/)); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.loadAllTodos()); @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.addTodo({ payload: item })); } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 12 13 14 markAsDone(item: Todo) { 15 this.store.dispatch(TodoActions.setAsDone({ payload: item })); 16 } 17 } 18 this.store.dispatch(TodoActions.setAsDone({ payload: item })); } } @Component({/* ... */ }) 1 export class ContentComponent implements OnInit { 2 private readonly store = inject(Store); 3 4 items$ = this.store.pipe(select(/*...*/)); 5 6 ngOnInit() { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 10 addTodo(item: string) { 11 this.store.dispatch(TodoActions.addTodo({ payload: item })); 12 } 13 14 markAsDone(item: Todo) { 15 16 17 18 

Todo App

1 2 3 4 5 6 7 8 9 

Todo App

1 2 3 4 5 6 7 8 9 [items]="items$ | async"

Todo App

1 2 3 4 5 9 

export const appConfig = { providers: [ provideRouter(APP_ROUTES), provideHttpClient(), importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), ], }; 1 2 3 4 5 6 7 8 9 10 

export const appConfig = { providers: [ provideRouter(APP_ROUTES), provideHttpClient(), importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), ], }; 1 2 3 4 5 6 7 8 9 10 importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), export const appConfig = { 1 providers: [ 2 provideRouter(APP_ROUTES), 3 provideHttpClient(), 4 5 6 7 8 ], 9 }; 10 

export const appConfig = { providers: [ provideRouter(APP_ROUTES), provideHttpClient(), importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), ], }; 1 2 3 4 5 6 7 8 9 10 { } 1 2 3 

export const appConfig = { providers: [ provideRouter(APP_ROUTES), provideHttpClient(), importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), ], }; 1 2 3 4 5 6 7 8 9 10 importProvidersFrom( StoreModule.forRoot({}), EffectsModule.forRoot([]) ), export const appConfig = { 1 providers: [ 2 provideRouter(APP_ROUTES), 3 provideHttpClient(), 4 5 6 7 8 ], 9 }; 10 { } 1 2 3 

export const TODO_ROUTES: Routes = [ { path: '', component: TodoMainComponent, providers: [ importProvidersFrom( StoreModule.forFeature("todo", todoReducer), EffectsModule.forFeature([TodoEffects]) ), ], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 { todo: { // ... } } 1 2 3 4 5 

export const TODO_ROUTES: Routes = [ { path: '', component: TodoMainComponent, providers: [ importProvidersFrom( StoreModule.forFeature("todo", todoReducer), EffectsModule.forFeature([TodoEffects]) ), ], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 { todo: { // ... } } 1 2 3 4 5 

{ todo: { items: [], selectedItem: null, loading: false } } 1 2 3 4 5 6 7 export const TODO_ROUTES: Routes = [ { path: '', component: TodoMainComponent, providers: [ importProvidersFrom( StoreModule.forFeature("todo", todoReducer), EffectsModule.forFeature([TodoEffects]) ), ], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 

{ todo: { items: [], selectedItem: null, loading: false } } 1 2 3 4 5 6 7 export const TODO_ROUTES: Routes = [ { path: '', component: TodoMainComponent, providers: [ importProvidersFrom( StoreModule.forFeature("todo", todoReducer), EffectsModule.forFeature([TodoEffects]) ), ], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 

SELECTORS import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; @Component({ /*...*/ }) export class ContentComponent implements OnInit { private readonly store = inject(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 

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 private readonly store = inject(Store); 6 7 ngOnInit() { 8 9 10 11 12 13 14 15 } 16 } 17 

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 private readonly store = inject(Store); 6 7 ngOnInit() { 8 9 10 11 12 13 14 15 } 16 } 17 

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 private readonly store = inject(Store); 6 7 ngOnInit() { 8 9 10 11 12 13 14 15 } 16 } 17 

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

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

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 

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 

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 

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 

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 

SELECTORS export class ContentComponent implements OnInit { private readonly service = inject(Service); items: Todo[]; doneItems: Todo[]; 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 

SELECTORS export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 

SELECTORS export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 items$ = this.store.select(getAllUndoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 

SELECTORS export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 items$ = this.store.select(getAllUndoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 doneItems$ = this.store.select(getAllDoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 items$ = this.store.select(getAllUndoneItems); 4 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 

SELECTORS export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 items$ = this.store.select(getAllUndoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 doneItems$ = this.store.select(getAllDoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 items$ = this.store.select(getAllUndoneItems); 4 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 this.store.dispatch(todoActions.loadAllTodos()); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 items$ = this.store.select(getAllUndoneItems); 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 8 } 9 } 10 

SELECTORS export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 items$ = this.store.select(getAllUndoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 doneItems$ = this.store.select(getAllDoneItems); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 items$ = this.store.select(getAllUndoneItems); 4 5 6 ngOnInit() { 7 this.store.dispatch(todoActions.loadAllTodos()); 8 } 9 } 10 this.store.dispatch(todoActions.loadAllTodos()); export class ContentComponent implements OnInit { 1 private readonly store = inject(Store); 2 3 items$ = this.store.select(getAllUndoneItems); 4 doneItems$ = this.store.select(getAllDoneItems); 5 6 ngOnInit() { 7 8 } 9 } 10 export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 

TAKE CARE