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áltozást tart meg visszalépéshez
      logOnly: !import.meta.env.DEV, // Production környezetben letiltja a teljes debuggert
    }),
  ],
};

Ha module-based megoldást használsz:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: !environment.production,
    }),
  ],
})
export class AppModule {}

---

🖥 Hogyan használhatod?

1. Telepítsd a Redux DevTools böngészőbővítményt:

   • Chrome

   • Firefox

2. Nyisd meg a DevTools konzolt (F12 → Redux fül).

3. Kövesd nyomon az állapotváltozásokat és próbálj ki visszatekerést, állapotmódosításokat!

---

🎯 Összegzés

Az @ngrx/store-devtools nélkülözhetetlen eszköz az NgRx fejlesztéshez, mivel vizuálisan nyomon követheted, hogy az alkalmazásod állapota hogyan változik az actionök hatására. Ha komolyabban dolgozol az NgRx-szel, érdemes bekapcsolni fejlesztés közben! 🚀