// corso · 2026angular

State management con NGRX

Corso intensivo su Angular v.22 e NGRX v.22: state manager reattivo per architetture solide e scalabili.

Durata: 12h
Sessioni: 3 da 4h
Livello: Avanzato

[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

Introduzione

Angular fornisce gli strumenti fondamentali per sviluppare un’intera Single Page Application.

Tuttavia, le attività che il front-end deve svolgere sono sempre più complesse e le interfacce utente (UI), di conseguenza, stanno diventando sempre più sofisticate: gestione di un data-flow molto articolato, componenti e decine/centinaia di stati che devono rimanere in sync e comunicare tra di loro, refactoring e debug sono solo alcune delle attività ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente.

Redux, libreria nata per requisiti complessi in contesti quali l'applicazione "Facebook", nasce con l’obiettivo di separare nettamente gli aspetti architetturali dalla user interface, semplificando e rendendo globale la gestione dello stato applicativo e rendendo, inoltre, il codice molto più manutenibile, testabile e scalabile, grazie a diversi strumenti offerti dalla libreria e estensioni utilissime per il browser, come i Redux Dev Tools.

§02

Cos'è NGRX

NGRX è una libreria ispirata a Redux creata per gestire lo stato applicativo globale in applicazioni Angular e ne condivide diversi aspetti: azioni, reducers e un singolo store.
Rappresenta ormai lo "standard de facto" tra gli state manager disponibili nell'ecosistema Angular ed è ormai utilizzato in moltissimi contesti corporate ed enterprise.

In NGRX, i dati sono esposti sotto forma di Observable (quindi fa largo uso di RxJS) tramite selezioni dello stato e fornisce una moltitudine di best practice e utility per isolare ogni attività:

• azioni: che notifica che "qualcosa" è accaduto (ad es. cancellazione di un utente, inserimento di un filtro di ricerca, ecc.)
• effetti: per la gestione di side effects come chiamate al server, cambi di route, ecc.)
• reducer: usati per inizializzare e aggiornare porzioni di stato)
• selectors: utili per selezionare porzioni di stato.

La UI diventerà, quindi, totalmente "stupida" (stateless) e la maggior parte della business logic sarà quindi gestita da NGRX: operazioni asincrone (effects), (type safed) actions, gestione stato (reducer), selettori con funzionalità di memoization (selectors), lazy loading store, export/import store, time travel debugging, sincronizzazione dello store con il router, serializzazione dello store, sync con localStorage, undo/redo sono solo alcune delle potenzialità della libreria.

§03

Cosa sono i Redux Dev Tools

Utilizzando Redux o NGRX sarà possibile utilizzare una fantastica estensione per i browser tramite la quale monitorare ogni fase della tua applicazione, semplificando le operazioni di manutenzione e debug: history delle azioni, modifiche allo stato applicativo, differenze tra stato precedente e successivo, time travel debugging, export e import di uno snapshot dello stato e molto altro.

Può sembrare banale ma credetemi se vi dico che buona parte dei vantaggi che si ottengono dall'utilizzo di NGRX dipendono da questo strumento. È davvero incredibile quanto siano utili per capire cosa stia accadendo nella tua applicazione e per comprendere, ad esempio, quale degli step precedenti hanno generato un bug.

È anche possibile salvare uno snapshot dell'applicazione per caricarlo successivamente, anche su altri PC, e ri-creare uno scenario specifico (ad es. quello che ha causato un bug).

§04

Dettagli sul corso

Si fornirà, innanzitutto, una solida base sui concetti fondamentali tramite l'utilizzo di slide, diagrammi e sessioni di teoria per comprendere la base del pattern Redux e il funzionamento di NGRX.

Per consolidare i concetti acquisiti dopo la teoria, saranno descritte e affrontate le casistiche e gli scenari più comuni tramite sessioni di live-coding in cui si svilupperanno snippet di codice molto semplici e pratici non solo su NGRX ma anche su RXJS e con i più recenti Signals, gli operatori e i costrutti indispensabili che è necessario conoscere per poter sfruttare al massimo la libreria.

Si svilupperanno diversi esempi pratici sfruttando le ultime API introdotte da Angular e NGRX v.20 per la creazione di progetti "Standalone": creazione di store complessi, gestione della user interface e degli errori tramite specifici reducer, operazioni CRUD, relazioni tra porzioni di stato, gestione side-effects (XHR, Router e LocalStorage, azioni multiple, ...) , autenticazione JWT, gestione router e protezione delle view, HTTP interceptors, integrazione reactive forms, creazione direttive strutturali per la protezione del DOM e molto altro.

Il corso è aggiornato alle più recenti versioni di Angular e NGRX, si utilizzano prevalentemente Signals e tratteremo anche il recente modulo NGRX Signals con Signal Store, una versione più compatta di NGRX.

§05

Obiettivo

Creare applicazioni Angular scalabili e semplici da mantenere utilizzando NGRX per la gestione dello stato applicativo, applicando una netta separazione tra architettura dati e presentational layer.
Al termine del corso il partecipante sarà, quindi, in grado di introdurre NGRX nei propri progetti Angular e di sfruttarne al massimo il potenziale.

§06

Requisiti

Per comprendere gli argomenti trattati nel corso è necessario avere una buona conoscenza delle seguenti funzionalità del framework Angular: componenti custom, moduli, dependency injection, router e lazy loading. Nel caso di intenda prima approfondire questi argomenti consiglio di frequentare il corso Mastering Angular.
È inoltre fondamentale possedere una certa confidenza nell'utilizzo della libreria RxJS e dei Signals. Nel caso ti interessasse approfondire questa tematica, vi consiglio i corsi Reactive Programming in RxJS e Angular, RxJS e Programmazione Reattiva

[ programma ]

Cosa vediamo,
in dettaglio.

Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.

6 moduli · 32 argomenti

M01
Redux fundamentals
- 01Principi fondamentali di Redux
- 02Immutable State, Pure vs Impure functions
- 03Store, reducers, actions
M02
NGRX fundamentals
- 01Costrutti, API principali, dipendenze
- 02Reactive Store, Observable e Signals
- 03Modellare lo store, azioni, reducer
- 04Selectors e memoization
- 05Side Effects
- 06Redux Dev tools, time travel debugging
M03
Progetti scalabili NGRX
- 01Configurazione in progetti standalone v.17+
- 02Data architectures in Angular + NGRX
- 03Stateless architectures, Containers vs Presentational
- 04Real World: CRUD, autenticazione, forms complessi, router
M04
Reducer & Selectors
- 01Gestione e composizione stato globale
- 02Modifica dello stato tramite reducer con createReducer
- 03La nuova funzione createFeature
- 04Selectors Reattivi con RxJS
- 05Selectors con Signals
- 06Selectors semplici e compositi
- 07Applicare lazy loading sullo store
M05
Actions & Effects
- 01Gestione side effects con "NGRX Effects"
- 02Integrazione con REST API
- 03Il metodo createEffect
- 04Avviare azioni multiple negli effects
- 05Effetti condizionali sulla base dello store
M06
Router Store
- 01Installazione e configurazione NGRX Router
- 02Sincronizzazione router con stato applicativo
- 03Navigazione
- 04Creazione custom Actions per il router
- 05Router Selectors
- 06Protezione route con guardie, NGRX e l'utilizzo di JWT
- 07Gestione router con Lazy Loading