Introduzione a NGRX 8

Introduzione a NGRX 8 2020-01-05T01:43:23+00:00

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?

Le Single Page Application, al crescere della loro complessità e delle informazioni che devono gestire, con il tempo risultano sempre più difficili da mantenere.
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