NgRx Selectors

Modul #F7 - Angular NgRx - Selectors

Ziele

Du weisst, was NgRx Selectors sind und kannst diese anwenden.
Du weisst, was das 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. Dies findet man im index.ts und kann sie dort erweitern.

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);
    }
    
    // ..
}

Last modified March 27, 2024: feature(ngrx): first version of the ngrx v17 docs (8cf37fdf)