Posts

Showing posts with the label ngrx

NgRx - Devtools

Az @ngrx/store-devtools egy fejlesztői eszköz az NgRx Store -hoz, amely segít nyomon követni és debuggolni az állapotváltozásokat egy Angular alkalmazásban. 📌 Mit csinál az NgRx Store Devtools? Time-travel debugging 🕰️ – Vissza tudsz lépni korábbi állapotokra. Akciók monitorozása 🔍 – Megnézheted, milyen actionök futottak le és milyen adatokat tartalmaztak. Állapotváltozások vizualizálása 📊 – Láthatod, hogyan módosult az állapot az egyes akciók hatására. Exportálás/importálás 📂 – Elmentheted az állapotot és visszatöltheted később. 🚀 Hogyan telepítsd? Futtasd az alábbi parancsot a projektedben: npm install @ngrx/store-devtools ⚙ Hogyan konfiguráld? Nyisd meg az app.config.ts (vagy app.module.ts , ha még module-alapú az appod) fájlt, és egészítsd ki: import { provideStoreDevtools } from '@ngrx/store-devtools' ; export const appConfig : ApplicationConfig = { providers : [ provideStoreDevtools ({ maxAge : 25 , // Ennyi állapotvált...

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. E...