Lo stato può essere complesso ed è importante capirlo per capire quali problemi risolvono le
soluzioni di gestione dello stato come Redux.
Se avessimo un'app come questa, che non è l'app che abbiamo creato ma che potrebbe essere un'app che stai costruendo in
cui hai due aree diverse, una in cui gestisci i tuoi utenti, dove gli utenti possono accedere, dove gli
utenti possono gestire le loro dashboard, vedere il loro dashboard e così via e uno in cui sono
presenti prodotti in un elenco che gli
utenti possono aggiungere a un carrello, quindi queste aree in realtà non sono totalmente indipendenti ma nella tua app, verranno
visualizzate su schermi diversi, quindi piuttosto separati da l'un l'altro.
Ma la domanda se un utente ha effettuato l'accesso di cui hai bisogno qui potrebbe anche essere
rilevante in un'altra
parte della tua applicazione e in questo momento, normalmente dovresti passare quei dati manualmente attraverso i puntelli
passandoli dal componente A a B a C a D fino a E dove
potresti averne bisogno, non è molto conveniente.
Invece vuoi avere una configurazione dell'applicazione in cui qualcosa cambia, ad esempio un utente accede o nella nostra
app pasti,
imposta un certo filtro e lo salvi e quindi queste informazioni vengono in qualche modo propagate alla tua app e passate
automaticamente ai luoghi dove ne hai bisogno ma non attraverso oggetti di
scena ma con alcuni meccanismi dietro le quinte che ti aiutano a riguardo e qui è dove Redux è
una soluzione comune che utilizziamo nelle app React e React Native per gestire quello stato.
Ora come funziona Redux?
Prima di tutto Redux è una libreria di terze parti che puoi aggiungere a React Native per usarla
lì ed è tutto su come avere un negozio centrale. Redux introduce un archivio centrale in memoria, non un
database ma è in memoria, nella memoria Javascript per dire dove si trova lo stato della tua applicazione, quindi
i dati su cui dipendono parti diverse dell'app possono essere archiviati e quando in un componente hai
qualcosa che
vuole manipolare quello stato, ad esempio stiamo impostando un filtro o
contrassegniamo un pasto come preferito, quindi inviamo una cosiddetta azione, che è un pacchetto di informazioni predefinito che diresti,
con un certo schema che può essere gestito da Redux come da te configurato.
Questa azione raggiunge un cosiddetto riduttore e sarai tu a scrivere quel riduttore come sviluppatore,
in modo da poter controllare quale tipo di azione accetta un riduttore, quindi quale
tipo di pacchetto informativo il riduttore richiede e quel riduttore riceve quindi l'azione e deriva un nuovo stato basato
sul vecchio stato che quindi aggiorna questo stato memorizzato centralmente. Quindi il riduttore è lì per aggiornare
lo stato alla fine.
E quando quel negozio cambia, quando cambia lo stato lì dentro, puoi anche avere abbonamenti a quel
negozio da altri componenti, questi abbonamenti saranno attivati quando il tuo negozio, quando il tuo stato
lì cambia e lo stato aggiornato viene quindi passato ai luoghi nella tua
app, quindi ai componenti interessati a queste modifiche, ad esempio questo
componente qui potrebbe essere interessato ad alcuni aggiornamenti, quindi può impostare un abbonamento e
verrà informato sull'aggiornamento e ottenere il
nuovo stato attraverso il suo oggetti di scena o anche con ganci React come imparerai in questo modulo.
Ecco come funziona Redux e questa è l'idea alla base di Redux.
Ora una nota importante, se sei un po 'più avanti in React, probabilmente conosci anche l'API di React
Context che è integrata in React.
Questo può essere utilizzato anche per alcuni dietro le quinte dello stato e della gestione dei dati, ma non è un buon rimpiazzo per
tutti i casi d'uso in cui si utilizza Redux.
Non approfondirò qui questo perché questo non è davvero un corso sull'ingresso e l'uscita di diversi costrutti
React, invece vogliamo imparare React Native qui ma in allegato, troverai alcune risorse che ti aiuteranno in quel
confronto tra React Context API e Redux e quando usare quale. In questo modulo, utilizzeremo Redux, che è molto
flessibile, che possiamo sicuramente usare e ti mostrerò come configurarlo con
React Native e come ovviamente potresti lavorarci.