Discussione sul funzionamento dell'applicazione Redux

Nelle lezioni precedenti abbiamo implementato tutti i componenti necessari per il funzionamento di un'applicazione Redux. Facciamo un riepilogo e ripercorriamo brevemente le fasi principali del funzionamento della nostra applicazione con i prodotti.

Al primo avvio, la nostra applicazione recupera dallo store un elenco di due prodotti utilizzando useSelector e li visualizza sullo schermo. Sullo schermo viene inoltre visualizzato un modulo in cui possiamo inserire i dati di un nuovo prodotto. Quando l'utente preme il pulsante di salvataggio, il gestore del pulsante invia un'azione productAdded, contenente i dati del nuovo prodotto, che l'utente ha inserito nel modulo. La funzione reducer, che abbiamo scritto per lo slice dei prodotti, riceve questa action e aggiunge all'array dei prodotti l'oggetto con il nuovo prodotto. Lo store informa i componenti che i dati di stato memorizzati sono stati modificati. Il nostro componente ProductsList legge l'array modificato, avvia il rendering, di conseguenza vediamo nell'elenco dei prodotti il prodotto aggiunto.

Ora apriamo Redux DevTools nel browser e aggiungiamo nell'applicazione un altro prodotto, poi osserviamo la scheda Log monitor, qui possiamo vedere come era il nostro state all'avvio dell'applicazione, e come poi, dopo aver premuto il pulsante di salvataggio, è apparsa l'action. Possiamo vedere la sua proprietà payload e i cambiamenti nello stato globale.

Nel prossimo capitolo lavoreremo in modo più approfondito con i dati nella nostra applicazione Redux.