COS’È NGRX?
NGRX è una libreria ispirata a Redux creata per gestire lo stato applicativo in applicazioni Angular e ne condivide diversi aspetti: azioni, reducers e un singolo store.
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, effetti, modifica allo stato (reducer) e selezione stato (selectors).
La UI risulterà quindi totalmente “stupida” e la maggior parte della business logic sarà quindi gestita da NGRX
PERCHÈ NGRX?
L’utilizzo di componenti stateful, l’abuso di pattern come la dependency injection in Angular o le context API di React, tanto per citare un paio di esempi, oppure l’integrazione di altre strategie per la gestione dello stato applicativo spesso non sono sufficienti a garantire efficienza, consistenza e scalabilità nel medio-lungo periodo.
Gli state manager, come ad esempio NGRX, offrono delle soluzioni consolidate per una corretta gestione dello stato e dei side effect, purché l’applicazione sia sviluppata seguendo determinati criteri di cui Vi parlerò in questi video.
01. A cosa serve uno state manager
In questo video parleremo della problematica descritta nell’introduzione: abuso della dependency injection in Angular, perché usare uno state manager, quando è necessario, sviluppo UI stateless.
02. Cos’è NGRX: pro e contro
Cos’è NGRX? Quali vantaggi ci permette di ottenere? Cosa sono e come funzionano i Redux Dev Tools?
Oltre a comprendere le potenzialità di uno state manager e della sua integrazione in applicazioni front-end, analizzeremo anche gli svantaggi e le difficoltà che ne conseguono.
03: NGRX Data Flow
Tramite l’utilizzo di uno state manager come NGRX non solo sarà possibile separare nettamente la user interface, realizzata in Angular, dalla data architecture, gestita invece da NGRX, rendendo quindi la code base più semplice da mantenere ed efficiente, ma la stessa architettura sarà organizzata in differenti fasi, che analizzeremo in questo video:
• Actions: le azioni, effettuate nella maggior parte dei casi dall’utente, che potranno essere tracciate e identificate
• Reducers: si occupano di manipolare lo stato sulla base delle azioni
• Effects: gestione separata di side effect come XHR, gestione router, sync con localstorage…
• Selectors: recuperare una porzione di stato
04. NGRX Folders
Al crescere della complessità di un’applicazione, aumenterà ovviamente anche la quantità di files da gestire nel progetto.
L’utilizzo di convenzioni e best practice fornite da un framework “opinionated” come Angular e da uno state manager come NGRX, semplificherà notevolmente il processo di manutenzione, il debug e le operazioni di refactoring, grazie ad una specifica organizzazione di file e cartelle e all’utilizzo di una corretta nomenclatura.
05. NGRX Code Preview
In questo video analizziamo le API di NGRX 8 con diversi esempi e caso d’uso che faranno ampio uso di Typescript e RxJS:
• organizzazione dello store
• azioni type-safed
• gestione di side “effects”, che fanno largo uso di operatori RxJS
• manipolazione stato tramite i “reducer” e l’utilizzo dell’immutabilità
• selectors: recupero delle informazioni dallo stato sfruttando la memoization
06. Stateless Architectures
Per sfruttare al massimo le potenzialità di uno state manager è necessario creare applicazioni front-end quasi totalmente stateless.
Cosa significa? In breve, tutto ciò che riguarda la gestione dello stato e dei side effect (XHR, redirect, ecc.) saranno delegati a NGRX, e solo tramite degli “speciali” componenti, definiti “Container”, la user interface potrà comunicare con lo state manager, ricevendo lo stato proprio dal Container tramite proprietà @Input ed emettendo eventi sfruttando gli @Output event emitter.
Il “Container” fungerà quindi da ponte tra UI e data architectures.
Questi video sono parte integrante del mio nuovo video corso MASTERING NGRX.
250 video, di cui 190 su NGRX e 60 su RxJS.
Presto disponibile. Iscriviti alla newsletter per saperne di più
Iscriviti al mio canale YouTube