In questo articolo parleremo di:

• ReduxJs: un contenitore di stato prevedibile
• Integrazione di ReduxJs e ReactJs

Dopo una prima panoramica passeremo a parlare dei principali concetti da conoscere per poi passare alle funzioni per creare il nostro store dello stato e come creare le logiche che ne aggiornano le proprietà.

Cos’è ReduxJs

Un pattern ed una libreria per gestire e aggiornare lo stato delle applicazioni, usando eventi chiamati «azioni», ReduxJs ti guida nella scrittura di un codice che sia prevedibile e testabile, dandoti più sicurezza nel fatto che l’applicazione si comporterà come ci si aspetta.

Caratteristiche principali di ReduxJs

Le caratteristiche principali di ReduxJs sono:‍

• ‍Predictable. ReduxJs aiuta a scrivere applicazioni che si comportano in modo coerente e sono semplici da testare;‍
• Centralized. Centralizzando lo stato e la logica dell’applicazione si ha la possibilità di utilizzare potenti meccanismi come l’annulla/ripeti, la persistenza dello stato e molto altro;‍
• Debuggable. Il DevTools di ReduxJs rende immediato tenere traccia di quando, dove, perché e come lo stato dell’applicazione è cambiato. Puoi tenere traccia dei cambiamenti ed usare il«viaggio nel tempo» come debug;‍
• Flexible. ReduxJs è integrabile con qualsiasi Layer UI ed ha un enorme ecosistema di add ons per ogni necessità.

Librerie e tool

ReduxJs è una piccola libreria javascript standalone, ma è comunemente utilizzata con molti altri pacchetti. Utilizzeremo in particolare i tre pacchetti che vediamo.

Dato che ReduxJs è spesso utilizzato con React, React-Redux, che è il package ufficiale, renderà possibile l’interazione dei componenti React con lo store di ReduxJs permettendo la lettura di pezzi dello stato ed inviando azioni per aggiornare lo store.

Redux-toolkit è l’approccio raccomandato per scrivere la logica ReduxJs. Contiene pacchetti e funzioni essenziali per avere un codice che segua le best practice, per semplificare i task necessari, evitare gli errori più comuni e scrivere più facilmente le applicazioni ReduxJs

L’estensione ReduxJs DevTools ci mostra l’intero store con tutti gli stati oltre che lo storico degli aggiornamenti, permettendoci di fare in maniera semplice ed efficace il debug e mettendoci a disposizione una macchina del tempo con cui ripercorrere ogni cambiamento di stato.

Terminologia e Concetti

Gestione dello stato

Vediamo un piccolo componente React che agisce come contatore. Tiene traccia di un numero nel suo stato e lo incrementa quando il tasto viene cliccato.

È un’applicazione autonoma:

• Lo stato fa da unica fonte di dati
• La view è una descrizione dichiarativa della UI basata sullo stato corrente
• Le azioni sono gli eventi che avvengono sulla base dell’input dell’utente

Questa semplicità però viene immediatamente meno quando abbiamo componenti multipli che hanno bisogno di condividere lo stesso stato. Questa necessità può essere risolta elevando lo stato in un componente più in alto nella gerarchia ma anche questo metodo comporta oltre che una maggiore complessità, problemi come l’effetto drill-down, in cui tra uno stato ed i componenti che ne fanno uso passano diversi livelli nella struttura della UI.

L’idea alla base di ReduxJs è invece portare tutto lo stato e le logiche di aggiornamento in un unico punto esterno alla struttura rendendo la gerarchia dei nostri componenti una grande view dove ogni componente può accedere allo stato ed inviare azioni indipendentemente dalla sua posizione nella gerarchia.

Questo va ad imporre la separazione e l’indipendenza tra la view e lo stato, dando al codice una migliore struttura e sostenibilità.

Immutabilità

Uno dei principi di ReduxJs è proprio l’immutabilità dello stato.

ReduxJs, infatti, si aspetta che ogni parte dello stato sia immutabile. Il codice deve prima effettuare una copia dello stato che vuole modificare, per poi modificare proprio la copia.

Terminologia

Actions

Cos’è una action? Possiamo definire una action come un evento che descrive qualcosa che accade nell’applicazione.

È un oggetto Javascript con una proprietà «type» a cui andremo a dare un nome descrittivo come quello nell’esempio, qualcosa che dica esattamente ciò che sta avvenendo.

Come proprietà opzionale potremo usare payload che conterrà tutte le informazioni necessarie all’azione che sta avvenendo.

L’esempio può essere letto come: è stato aggiunto «comprare latte» alle cose da fare.

Action Creators

Una action creator è una funzione che restituisce una action. Tipicamente non vorremo scrivere ogni volta l’oggetto della action, perciò andremo a utilizzare una funzione che riceverà la parte «dinamica» della action

Reducers

Un reducer può essere inteso come un ascoltatore di eventi che basandosi sul tipo della action ricevuta gestisce l’evento stesso.

I reducer devono sempre seguire determinate regole:

• Devono ottenere il nuovo stato basandosi esclusivamente sullo stato attuale e sugli argomenti della action;
• Non hanno il permesso di modificare lo stato, devono procedere tramite aggiornamenti «immutabili», facendo prima una copia dello stato e applicando le modifiche su quest’ultima;
• Non devono applicare nessun tipo di logica asincrona, calcolare valori casuali o causare «effetti collaterali».

La logica dietro un reducer segue tipicamente una serie di passaggi:

• Controlla se il reducer è interessato dalla action ricevuta;
• Se lo è effettua una copia dello stato ed applica gli aggiornamenti;
• Altrimenti ritorna lo stato esistente senza modifiche.

Store

L’intero stato di un’applicazione Redux risiede in un oggetto chiamato store.

Questo viene creato passando alla funzione configureStore un reducer.

Lo store ha un metodo chiamato getState che restituisce il valore dello stato corrente.

Dispatch

Lo store ha un metodo chiamato dispatch. Questo è l’unico modo per aggiornare lo stato.

Accetta come argomento una action che passando tramite il reducer produce eventualmente un aggiornamento.

Per evitare errori dovuti alla scrittura errata di una action, tipicamente si andrà ad utilizzare una action creator:

Selectors

I Selettori sono funzioni che sanno come estrarre dei pezzi specifici di informazioni dallo store.

Man mano che un’applicazione cresce in complessità, questi eviteranno logiche ripetitive dovute a parti differenti che richiedono le stesse informazioni 

Flusso di dati ReduxJs

Come vediamo da questo esempio, il flusso dei dati di Redux sarà il tipo «one-way data flow».

Partendo da uno stato iniziale, renderizzato dalla UI, ad un certo punto un’interazione produrrà il dispatch di una action che raggiungerà lo store, il reducer riceverà la action insieme allo stato esistente, produrrà secondo le logiche codificate il nuovo stato e questo verrà renderizzato nuovamente dalla UI 

Per un esempio pratico potete fare riferimento alla repository https://github.com/MaxLaw88th/three-way di cui troverete il deploy su https://github.com/MaxLaw88th/three-way

Fonti:

https://redux.js.org/introduction/getting-started

https://redux-toolkit.js.org/introduction/getting-started

https://react-redux.js.org/introduction/getting-started