Redux - fromScarso2King - 2 - Librerie
4 librerie/tools + 1 che ti semplificano la vita nella gestione di stati Redux.
Di cosa parliamo in questo articolo?
Nella precedente puntata abbiamo visto la base della gestione dello stato applicativo, esaminando il pattern flux e la sua evoluzione su Redux. Se te la sei persa e vuoi partire con solide basi puoi leggerla qui.
In questo articolo parleremo delle librerie indispensabili per una corretta gestione di uno stato scalabile e ben strutturato.
Un mio ex-collega provò a proporre durante lo sviluppo di una grossa applicazione enterprise, la gestione dello stato attraverso context e hooks. Non tornò mai dalla pausa pranzo, e nessuno lo senti più.
Librerie
Nonostante grazie ad hooks e context e altre librerie di supporto per le query a back-end, sia ora possibile creare dei piccoli sistemi handmade per la gestione dello stato , la verità è che niente al momento può sostituirsi alla completezza e al grado di solidità raggiunto da alcune librerie messe a disposizione dalla community.
Se consideriamo inoltre quanto sia importante, soprattutto in contesti di un certo tipo, lasciare ai posteri un codice e dei pattern solidi e riconosciuti, non ci resta che andare sul sicuro e affidarci a signor Redux e all’ ottimo ecosistema di librerie che ruota intorno ad esso.
Redux Devtools
La prima e indispensabile componente per cominciare a sviluppare i nostri stati con redux, è il redux devtools.
È un estensione per il browser che offre degli strumenti visuali per il monitoraggio dello stato.
Il redux devtools ci permette di sfruttare al massimo le potenzialità del time traveling dandoci il super-potere di saltare (jump) in momenti precisi del nostro stato applicativo andando indietro nel tempo.
Il redux devtools mostra inoltre in modo chiaro quali sono le differenze tra il vecchio e il nuovo stato ogni volta che viene dispatchata un’azione.
Potete installare l’estensione dallo store estensioni del vostro browser, ecco la versione per chrome.
Redux toolkit
Nell’ultimo periodo sentiamo parecchio parlare di questa libreria che altro non è che un comodissimo wrapper di redux.
Uno dei punti dolenti nello sviluppo di uno stato con redux, è la quantità di codice e di componenti necessari a completare tutto il giro. Redux toolkit nasce proprio dall’esigenza di rendere migliore l’esperienza di sviluppo.
Redux toolkit infatti mette a disposizione diversi metodi che rendono più semplice lo sviluppo dei tuoi redux modules. In particolar modo espone delle utility che rendono comodo e veloce la creazione di nuove actions, reducers, e selectors.
La libreria incorpora anche l’utilissimo reselect, la nostra libreria preferita per creare selettori.
$ npm i @redux/toolkitFino a poco tempo fa, utilizzavo typesafe-actions, un tool molto carino che offre pressoché le stesse funzionalità di redux-toolkit ma che ho recentemente deciso di abbandonare in favore di quest’ultimo in quanto ideata dal creatore di redux Dan Abramov e mantenuta da una più vasta community.
Redux Saga
Con redux saga non useremo mezzi termini, si tratta di uno degli strumenti più potenti nell’universo React/Redux.
Saga è un middleware per redux basato sui generatori. Con Saga è possibile gestire in modo estremamente preciso i side-effect del nostro stato, con un’ampia gamma di tools in grado di risolvere la maggior parte dei problemi legati alla gestione di stati asincroni.
È giusto dire che la potenza dello strumento potrebbe essere spropositata in molti casi di applicazione più semplice, ma ne faremo uso in questa serie di articoli in quanto vogliamo dare una prospettiva adatta ad applicazioni di una certa grandezza.
$ npm i redux-sagaReact Redux
Non abbiamo molto da dire su questa libreria. Si tratta semplicemente del tool che ci permette di connettere le nostre componenti UI con lo store di Redux.
React Redux espone dei comodi hooks per portare sulle nostre componenti selettori e dispatchare le actions.
Noi solitamente non portiamo questi hooks direttamente sulle componenti ma ci appoggiamo a dei custom hooks connessi, in modo da scrivere la logica una sola volta.
Wretch
Abbiamo deciso di aggiungere questo piccolo ma potente tool nonostante il suo scope non sia direttamente connesso con lo sviluppo di uno stato applicativo.
Wretch è un wrapper di JS Fetch, l’api Javascript che semplifica l’esecuzione di richieste xhr. Ecco la documentazione.
Si tratta di un tool completo che permette di gestire in modo molto customizzabile e parametrizzabile le nostre chiamate server con un ampissimo ventaglio di casi che almeno nel nostro caso, ha coperto finora tutte le nostre necessità.
$ npm i wretchContinua la serie
La prossima puntata tratterà di un modello di folder structure ideale su cui sviluppare i tuoi stati applicativi. La trovi qui!
Qui sotto trovi i link alle altre puntate di questa serie
Fuori serie: 0. Le basi
