Redux - fromScarso2King - 10 - Mini App

Un Buongiornissimo per domarli, uno per trovarli, uno per ghermirli e nel buio incatenarli

Nelle puntate precedenti abbiamo visto cosa è lo state management e perché risulta fondamentale per gestire al meglio le nostre applicazioni; dopo di che abbiamo introdotto Redux, il tool più utilizzato nel mondo React (e non solo) per la gestione dello stato applicativo.

Ora vogliamo mettere insieme i concetti imparati e creare una piccola applicazione che li contenga tutti; Rifacendoci all’esempio nella puntata 0, abbiamo pensato di creare IL tool essenziale per ogni 60enne che vuole fare un figurone nel gruppo Whatsapp dei parenti: Il Super Buongiornissimo Maker Premium!

Approved by @Zia Carmela

Super Buongiornissimo Maker Premium

Belin, ma questo è pazzo furioso! (Marco Montemagno)

Ha rivoluzionato il modo di fare gli auguri di natale. (Forbes)

Essenziale. Fondamentale. Vorrei averci pensato io! (Mark Elliot Zuckerberg)

Ndr. Potrebbero non riferirsi a questo tool

Parlando seriamente, volevamo costruire una mini app che, anche se non troppo complessa, riuscisse a sfruttare tutti i concetti esposti precedentemente, quindi stati sincroni ed asincroni, chiamate a servizi esterni, optimistic UI, side effects etc etc…

Per quanto apparentemente stupido, questo piccolo tool contiene tutti questi concetti.

PS

Trovate qui la repo; vi invitiamo a clonarla per vederla nel dettaglio:
https://github.com/VLK-STUDIO/fromScarso2King

PPS

Abbiamo anche creato un video che riassume il contenuto di questa puntata:

Come Funziona?

Siamo partiti da questa idea:

Per creare questo layout abbiamo utilizzato https://app.diagrams.net/, che per i nostalgici è draw.io

Nel sito troveremo quindi:

1. Un form per inserire i nostri buongiornissimi
2. Una preview del buongiornissimo che stiamo creando
3. La lista dei precedenti buongiornissimi creati
4. La possibilità di modificare / rimuovere i nostri buongiornissimi
5. Un semplice sistema di notifiche

I vari flussi possono essere descritti in questo modo:

Flusso di creazione, modifica e rimozione dei buongiornisimi

Analizziamo adesso come l’abbiamo realizzata.

Il Buongiorno si vede dal mattino

Prima di tutto abbiamo identificato 3 domini di dati:

• images, quindi le immagini da utilizzare come sfondo;
• notifications, le notifiche;
• goodMornings, ovviamente, i buongiornissimi.

Nell’app infatti, le immagini di sfondo vengono recuperate da un servizio esterno e per questo abbiamo un dominio dedicato.

Ovviamente lo stack utilizzato comprende le librerie indicate nella puntata 2. In aggiunta c’è solo json-server, un tool che permette di emulare un server attraverso un json (i nostri servizi che restituiscono i goodMorning e le immagini), e concurrently che ci permette di avviare insieme il json-server e l’app react.

Questa la preview della folder structure dei domini:

Il dominio images, che è molto piccolo in quanto comprende una sola action (fetch) e non prevede di scalare oltre, ha quindi una struttura piatta mentre gli altri seguono la struttura proposta nella puntata 3.

I GoodMornings

I buongiornissimi (goodMornings) sono ovviamente il dominio principale in questa app. Come si vede nel flusso, possiamo effettuare tutte le operazioni principali su questo dominio, infatti, ritroverete al loro interno praticamente tutti i concetti del corso.

La vita è come un bullone, non puoi svitarla se si ossida. Andrea Simone Porceddu

I punti di maggiore interesse di questo dominio sono a nostro parere nei reducer, dove è presente la logica di optimistic ui, se provate a monitore il network oppure a guardare il profiler vedrete come lo stato cambia prima ancora di avere una risposta dal server.

In questo esempio impostiamo il browser offline e vediamo come la action di creazione fallisce (ovviamente). Guardando il profiler notiamo come il buongiornissimo è stato inserito nella lista in un primo momento (action di request), per poi essere rimosso successivamente:

Non è stato possibile creare il tuo buongiornissimo, sarà forse un complotto dei poteri forti?

Le notifiche

Le notifiche, pur essendo un dominio sincrono (non ci sono chiamate verso servizi esterni, hanno puramente uno scopo informativo), necessitano comunque di un middleware in quanto non vengono dispatchate dall’utente, né tantomeno vengono create durante il processo di creazione/modifica o rimozione dei buongiornissimi, esse sono infatti frutto di un processo completamente automatico!

Il modo in cui abbiamo deciso di gestirle è semplicissimo:

Abbiamo creato una mappa (che trovate a questo link), dove abbiamo mappato le azioni che volevamo notificare con un messaggio, quindi in questo formato:

 {
  [actionType]: "Message",
 }

Una volta creata la mappa, il middleware non fa altro che “ascoltare” tutte le action e se trova un messaggio corrispondente al tipo della action ascoltata, crea una nuova notifica che verrà mostrata per un tempo di 3 secondi:

Ed il mondo non aspettava altro….

Conclusione

Con questo articolo termina la mini serie Redux - FromScarso2King. Ci siamo divertiti tanto a scrivere questi articoli e speriamo vi siano stati utili e che abbiano divertito anche voi.

Lo scopo di questa serie era quello di mostrare i concetti base per la creazione di una gestione di stato scalabile attraverso Redux. Abbiamo applicato queste ed altre tecniche in decine di situazioni differenti, ovviamente con le personalizzazioni del caso; tra i tanti pattern che abbiamo sperimentato, questo approccio e questi concetti si sono dimostrati i più affidabili e versatili.

Adesso tocca a voi scrivere qualcosa. Fateci sapere se la serie vi è stata utile o meno, se siate d’accordo con noi, o se invece usate un approccio completamente differente.

Vi aspettiamo nella zona commenti di medium ❤

Qui sotto trovi i link alle altre puntate di questa serie

Fuori serie: 0. Le basi

1. Il Data Flow
2. Librerie
3. Folder Structure
4. Lo Store
5. Le Action
6. I Reducer
7. I Selector
8. I Middleware
9. Le Saga
10. Mini App 👈 tu sei qui!