Grundlæggende NgRx Store

• Centraliseret tilstandshåndtering
• Et tydeligt og forudsigeligt dataflow
• Enklere fejlfinding og test

NgRx omfatter nogle centrale begreber:

• Store: Indeholder applikationens tilstand
• Handlinger: Beskriver hændelser
• Reduceringsfunktioner: Håndterer tilstandsovergange
• Selektorer: Henter data fra tilstanden

Installer NgRx med npm:

npm install @ngrx/store --save

Definer Store i dit applikationsmodul:

StoreModule.forRoot({ appState: appReducer })

Handlinger definerer hændelser i din applikation:

export const loadData = createAction('[App] Load Data');

Reduceringsfunktioner håndterer ændringer i tilstanden ved at reagere på handlinger og producere en ny tilstand:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Opsummering

Du har lært det grundlæggende i at bruge NgRx Store til effektivt at håndtere tilstanden i din app. Godt gået!