'NGRX Component Store': un nuovo state manager reattivo per Angular molto semplice da utilizzare

Un approccio molto utilizzato per la gestione e la condivisione dello stato in applicazioni Angular è quello di creare dei servizi che espongono delle proprietà.
Questi servizi potranno poi essere iniettati e utilizzati un po’ ovunque nella nostra applicazione, ad esempio in componenti o altri servizi che necessitano di accedere a tutto lo stato o ad una sua porzione.

Lo state manager NGRX, il più diffuso nell’ecosistema Angular, ci permette di gestire lo stato applicativo, chiamato Store, in modo molto più strutturato: espone lo stato in modo reattivo, quindi tramite Observable, è possibile isolare azioni, effetti, reducer e selettori, offre un predictable state con possibilità di time travel debug e si connette ai comodissimi Redux DevTools, solo per citare alcune delle funzionalità offerte dalla piattaforma.

Tuttavia, configurare ed utilizzare NGRX è una procedura relativamente complessa che in molte semplici applicazioni non è necessaria. Inoltre, anche se nell’applicazione già si utilizza NGRX, potremmo avere la necessità di gestire lo stato di una parte dell’applicazione senza necessariamente collegarlo allo store.

Nasce quindi l'idea di sviluppare “NGRX Component Store", un recente modulo rilasciato dal team NGRX che ci permette di gestire agevolmente uno stato locale reattivo in applicazioni Angular, evitando quindi di creare servizi ad hoc o trovare soluzioni alternative ma, soprattutto, senza la necessità di installare l’intera suite NGRX, come vedrete in questo video.

[marcoalessiomilazzo]

Sto integrando adesso il component store e ho visto che la doc è stata aggiornata da quando hai fatto il video. Davvero molto utile. Grazie Fabio

[Belgaratluxintenebra]

Ottimo componente. Penso che le userò proprio nella pwa che sto sviluppando. Grazie del video.

[GinoBarisciano]

Ciao Fabio, ma se in teoria volessi utilizzarlo a livello globale nell'app potrei anche farlo vero?

[stefanodicecco]

Ciao Fabio, bel video, sono d'accordo sull'approccio semplificato e locale, ma a patto di una grossa perdita che è l'utilizzo dei Redux DevTools che secondo me pesano un bel pò nell'utilizzo di uno state manager

[silvioc]

Ciao Fabio, ma è possibile usare questo store component in Angular 6 ? grazie dell'attenzione

[valix]

Bello! Ma poi bisogna distruggere l'observable in onDestroy oppure fa angular in automatico?

[andreafotone]

Ciao bel video, l'unica cosa che non capisco è che vantaggio ha rispetto al creare un normale service?

[silvioc]

Spettacolo! Utilissimo ! Tu in una grande applicazione preferiresti usare questo a livello globale oppure continuare ad usare il global store ?Inoltre quanti valori puoi salvarci all'interno ?
Comunque BRAVO! Stai sempre sul pezzo ! sei uno dei pochi italiani che condivide il suo sapere.

[MaxArt]

Se c'è una cosa che non mi piace è che con `setState` bisogna passare di nuovo _tutto_ lo stato. Sarebbe molto più comodo se si passasse solo un sottoinsieme delle proprietà.
Questo si può fare sol in questo modo: `setState` prende anche come parametro una funzione di update dello stato, che in ingresso riceve lo stato precedente.

Non vorrei che il termine `setState`, poi, causasse confusione con quello di React :|