Bevezetés az NgRx-be

Bevezetés az NgRx-be – Állapotkezelés Angularban

Az NgRx egy Redux-alapú állapotkezelő könyvtár Angular alkalmazásokhoz. Segít az alkalmazás állapotát egy központi helyen tárolni, ezáltal könnyebben kezelhetővé és előrejelezhetővé válik az állapotváltozás.

Az NgRx főbb elemei

1. Store (Állapottár)

A Store egy központi adattár, amely az alkalmazás állapotát tartalmazza. Az állapot csak egy módon módosulhat: actionökön (akciókon) keresztül.

import { createFeature, createReducer, on } from '@ngrx/store';
import { loadItemsSuccess } from './items.actions';

export interface ItemsState {
  items: string[];
}

const initialState: ItemsState = {
  items: [],
};

export const itemsFeature = createFeature({
  name: 'items',
  reducer: createReducer(
    initialState,
    on(loadItemsSuccess, (state, { items }) => ({ ...state, items }))
  ),
});

2. Actions (Akciók)

Az actionök olyan objektumok, amelyek egy adott műveletet írnak le. Ezek hatására módosulhat az állapot a reducerben.

import { createAction, props } from '@ngrx/store';

export const loadItems = createAction('[Items] Load Items');
export const loadItemsSuccess = createAction(
  '[Items] Load Items Success',
  props<{ items: string[] }>()
);

3. Reducer (Állapotmódosító függvény)

A reducer egy tiszta függvény, amely az aktuális állapot és egy akció alapján új állapotot hoz létre.

import { createReducer, on } from '@ngrx/store';
import { loadItemsSuccess } from './items.actions';

const initialState: ItemsState = { items: [] };

export const itemsReducer = createReducer(
  initialState,
  on(loadItemsSuccess, (state, { items }) => ({ ...state, items }))
);

4. Selectors (Lekérdezők)

A selectorok segítségével az állapot egy részét kérdezhetjük le.

import { createSelector } from '@ngrx/store';
import { ItemsState } from './items.reducer';

export const selectItems = createSelector(
  (state: { items: ItemsState }) => state.items,
  (itemsState) => itemsState.items
);

5. Effects (Mellékhatások kezelése)

Az effects az aszinkron műveletek (pl. HTTP hívások) kezelésére szolgálnak.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { loadItems, loadItemsSuccess } from './items.actions';
import { map, mergeMap } from 'rxjs/operators';
import { ItemsService } from '../services/items.service';

@Injectable()
export class ItemsEffects {
  loadItems$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadItems),
      mergeMap(() =>
        this.itemsService.getItems().pipe(
          map((items) => loadItemsSuccess({ items }))
        )
      )
    )
  );

  constructor(private actions$: Actions, private itemsService: ItemsService) {}
}

Összegzés

Az NgRx egy hatékony megoldás Angular alkalmazások állapotkezelésére. Az actionök segítenek az állapotváltozások leírásában, a reducer módosítja az állapotot, a selectorok segítenek annak lekérdezésében, és az effects aszinkron műveletek kezelésére szolgálnak.

Ha egy nagyobb, komplex alkalmazást építesz, az NgRx megkönnyítheti az állapot kezelését és az adatfolyam átláthatóságát! 🚀