NgRx Selectors
Modul #F7 - Angular NgRx - Selectors
Ziele
- Du weisst, was NgRx Selectors sind und kannst diese anwenden.
- Du weisst, was der AppState ist.
AppState
In einer typischen NgRx-Anwendung kann die AppState-Datei verwendet werden, um den gesamten Anwendungsstatus zu definieren und zu typisieren. Sie enthält normalerweise eine Schnittstelle oder ein Interface, das alle Teilzustände oder Slices des Anwendungsstatus definiert und zu einem Gesamtzustand kombiniert.
Diesen findet man im index.ts, wo man auch Erweiterungen umsetzen kann.
1
2
3
4
5
6
7
| export interface AbilityState {
abilities: string[];
}
export interface AppState {
ability: AbilityState;
}
|
NgRx Selectors
Selectors sind Funktionen, die dazu dienen, bestimmte Teile des Zustands aus dem Store abzurufen. Sie ermöglichen es, den Zustand zu filtern, zu transformieren und zu kombinieren, um spezifische Daten abzurufen, die von den Components verwendet werden.
In unserem Beispiel vereinfachen wir das Beispiel aus den Actions, da man dort nur mühsam zu den abilities gekommen ist.
1
2
3
4
5
6
7
8
9
| import { createSelector } from "@ngrx/store";
import { AppState } from "../reducer/index.ts";
export const selectAbilityState = (state: AppState) => state.ability;
export const getAbilities = createSelector(
selectAbilityState,
(state) => state.abilities,
);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import { Component, OnInit } from "@angular/core";
import { Store, select } from "@ngrx/store";
import { addAbility, deleteAbility } from "src/app/actions/ability.actions";
import { AppState } from "src/app/reducer/index.ts";
import { getAbilities } from "src/app/selectors/ability.selectors";
@Component({
// ..
})
export class AbilityComponent implements OnInit {
abilities$: Observable<string[]> = new Observable<string[]>();
private store = inject(Store<{ ability: { abilities: string[] } }>);
constructor() {}
ngOnInit(): void {
this.abilities$ = this.store.select(getAbilities);
}
// ..
}
|