Continueremo a lavorare sull'app che abbiamo creato nell'ultimo modulo del corso con le nostre ricette qui e
con i filtri che potremmo impostare e così via e ci sono due cose che dobbiamo aggiungere dove avremo bisogno di Redux.
Uno è che possiamo effettivamente contrassegnare una ricetta come preferita facendo clic sull'icona a forma di stella, che questa in realtà la contrassegna
come preferita e che per noi cambiamo anche questa icona per mostrare se è già una delle preferite o no,
ma soprattutto, che
possiamo vedere quella ricetta come preferita qui nella scheda Preferiti. E l'altra cosa in cui avremo bisogno di Redux
è qui nei filtri, lì quando impostiamo un filtro e quindi lo salviamo, ovviamente questo
dovrebbe avere un effetto sui pasti che stiamo caricando qui nella nostra scheda dei pasti nell'elenco di pasti quando selezioniamo
una categoria. Lì questo
dovrebbe riflettersi, ciò che abbiamo impostato sui filtri. Questo è ciò su cui lavoriamo, di cosa avremo bisogno di
Redux e per quello, installiamo Redux e cominciamo con esso.
Per iniziare con Redux, lascerò qui il mio server
expo, il processo di avvio di npm, lo chiuderò temporaneamente e
installerò un pacchetto che sarebbe
Redux e oltre a Redux, dobbiamo anche installare React Redux perché è è inoltre necessario lavorare
con Redux.
Quindi entrambi i pacchetti devono essere installati qui e mentre stanno installando, possiamo già iniziare a lavorare
sui nostri file di codice lì un po 'perché in questo progetto, voglio aggiungere una nuova cartella ora ed è
la cartella del negozio.
Ora puoi dare un nome a questa cartella come preferisci, non deve essere chiamato store, a Redux
non importa, ma questa è la cartella in cui voglio gestire la mia configurazione di Redux perché Redux riguarda tutto quel
negozio di stato centrale.
Quindi qui nella cartella dello store, ora possiamo iniziare con Redux e non tratterò Redux nei minimi dettagli qui, ho un corso
completo React
e Redux per questo se vuoi imparare i dettagli di questo, per in questo corso
presumo effettivamente le conoscenze precedenti di React e Redux e quindi questo sarà solo un breve aggiornamento.
Redux alla fine si basa su riduttori, azioni e quindi sulla costruzione di un negozio basato su questi
riduttori e azioni.
Ora, per quello qui nella cartella dello store, aggiungerò una cartella di azioni e aggiungerò una cartella di riduttori, in realtà avremo
solo un'azione e un file di riduzione in questo progetto ma se avessi più file di quello, avendo sottocartelle
separate potrebbero essere una buona idea per mantenerlo organizzato ed è per questo che
le creo qui, anche se per questa semplice app non ne avremmo bisogno perché non avremmo tanti file.
Cominciamo con il riduttore. Nella cartella del
riduttore qui, aggiungerò i miei pasti. js file e questo è il file in cui sono andato a gestire la mia logica di aggiornamento dello stato del
riduttore dei pasti.
Quindi è alla fine il file in cui scriveremo la logica per contrassegnare un pasto come
preferito e per gestire i nostri filtri.
Ora un riduttore in React è solo una funzione, quindi
qui creerò una funzione, chiamerò riduttore dei pasti, il nome dipende totalmente da te e questa funzione riceverà
effettivamente due argomenti: lo stato, lo stato attuale dello snapshot su cui puoi costruire e derivare un nuovo stato perché
un riduttore alla fine dovrà restituire un nuovo stato che viene poi preso da
Redux e memorizzato nel suo negozio.
Quindi ottieni l'attuale, il vecchio stato qui e ottieni l'azione perché la funzione di riduzione qui
viene eseguita da Redux
ogni volta che viene inviata una nuova azione e quindi abbiamo accesso all'azione qui in
modo da poter scoprire se dobbiamo agire e cosa dobbiamo fare.
Quindi all'interno di questa funzione, alla fine, è necessario restituire un nuovo stato, nella sua forma
più semplice che, naturalmente, significa che restituiamo lo stato corrente che d'altra parte significa che
questo riduttore non fa nulla di utile ma noi cambiarlo.
Ora, quando eseguiamo per la prima volta la nostra app, vogliamo anche impostare uno stato iniziale
che viene utilizzato inizialmente, quindi
che inizializza il nostro stato all'avvio di questa app e per questo, aggiungerò qui una nuova costante di stato
iniziale che contiene un semplice Javascript oggetto e lì dentro, voglio memorizzare un elenco dei miei pasti e quindi anche un elenco dei miei pasti filtrati
perché avremo bisogno di entrambi - un elenco di tutti i pasti e un elenco dei pasti che si adattano ai
filtri impostati dall'utente e io voglio anche avere i miei pasti preferiti qui. Quindi tre tipi di array di pasti che memorizzo alla fine e ovviamente
questo
è solo un possibile approccio che potresti adottare
qui, possiamo sicuramente trovare altri modi di gestire i nostri dati qui, ma mi piace questo.
Ora ciò di cui ho bisogno in questo file sono i miei dati fittizi sui pasti, quindi importerò i pasti dalla mia cartella di
dati e lì dai dati fittizi. file js e inizializzerò i pasti qui con il mio array di dati fittizi dei pasti.
Anche i pasti filtrati sono inizializzati con questo perché inizialmente all'avvio di questa app
non abbiamo alcuna impostazione di filtri. I pasti preferiti invece sono inizialmente un array vuoto perché di nuovo quando l'app
viene avviata, non avremo pasti preferiti.
Ovviamente in un'app reale, potresti voler archiviare quello stato su un server, in modo che quando l'utente chiude
l'app e torni più tardi, non si ricomincia da capo, ma
non è qualcosa che faremo qui,
tu Imparerò come raggiungere un server e salvare i dati lì e caricare i dati da lì in moduli
separati più
avanti in questo corso, qui terremo questo semplice per concentrarci su Redux.
Quindi questo è il mio stato iniziale, qui in questa funzione ora possiamo usare una sintassi Javascript in cui
assegniamo il nostro stato iniziale come valore predefinito per l'argomento state, il che significa che quando questa
funzione del riduttore viene eseguita e lo stato non è definito, come nel caso in cui Redux esegue il nostro
riduttore per la prima volta,
inizieremo con quello stato iniziale, quindi questo caricherà
automaticamente il nostro stato iniziale, per così dire perché quando Redux viene avviato e avviato, verrà inviata un'azione iniziale che
è era solito attraversare il riduttore una volta e questo caricherà il nostro stato iniziale.
Quindi, con quello, possiamo lavorare con qualche stato iniziale che è bello ma che da solo non ci
aiuta troppo. Per il momento,
comunque, colleghiamo
questo riduttore a Redux in modo che possiamo effettivamente utilizzare il nostro negozio Redux ovunque nell'app prima di iniziare
a inviare azioni e fare cose più utili nel riduttore. Quindi qui per ora, esporterò il riduttore
dei pasti come predefinito qui e ora in app. js che è il file da cui inizia tutta
la nostra app, dobbiamo
configurare il nostro negozio Redux. Per
questo qui, importiamo creare store da Redux.
Inoltre, dovremo importare riduttori di mietitrebbia da lì.
Questo ci consente ora di creare un negozio, avremo solo bisogno del nostro
riduttore, quindi qui importerò il mio riduttore dei pasti da e ora indicherò la cartella del negozio, la cartella dei riduttori
e lì, i pasti. js file
e ora forse qui, possiamo creare il nostro negozio qui chiamando create store. Ora crea store prende un riduttore alla fine
che devi passare. Ora ovviamente qui abbiamo un riduttore e
potremmo passare questo, ma nelle app più grandi, potresti avere più di un riduttore perché
spesso hai riduttori per le diverse aree caratteristiche della tua app, uno per l'autenticazione, uno per i tuoi prodotti, uno per
dire l'area di supporto della tua app e devi unire tutti questi singoli riduttori, questi diversi riduttori in
un riduttore di radice ed è quello che fa la funzione di
riduttori combinati, di nuovo qui non ne avremmo bisogno perché abbiamo solo un riduttore
ma per mostrarti già l'approccio che
potresti usare anche con più riduttori, lo userò anche qui. Quindi avrò qui il mio riduttore di radice che creo chiamando
i riduttori combinati, i riduttori combinati prendono un oggetto Javascript in cui ora mappiamo i nostri singoli riduttori, i nostri
diversi riduttori alle chiavi.
Quindi, per esempio, qui potremmo prendere i pasti come chiave, ma quel nome dipende totalmente da te e collegarlo
al riduttore dei pasti, in questo modo.
Quello che fa è che alla fine unisce questo riduttore di pasto a questo riduttore di radici e in seguito saremo in grado
di lavorare con lo stato gestito dal riduttore di pasti, quindi con questo
stato che è inizializzato in questo modo, con l'aiuto di questi pasti proprietà, saremo in grado di accedere
a questo stato,
a questa porzione di stato con questa proprietà in seguito, ma vedrai tutto ciò.
Quindi questo è il nostro riduttore di radice e ora non ci resta che passare il riduttore di radice per
creare un negozio, questo ci dà un negozio e ora cosa?
Ora questo negozio deve essere fornito alla nostra applicazione e per questo, abbiamo bisogno
dell'altro pacchetto che abbiamo installato che è React Redux.
Da lì, possiamo importare il componente provider, provider in questo modo. Avvolgiamo quindi il provider attorno al nostro componente dell'app root alla fine, quindi attorno al
componente più in alto che contiene tutti gli altri componenti che alla fine interagiranno con il nostro negozio
e il navigatore pasti è abbastanza buono per questo perché contiene tutti
i nostri schermi, quindi contiene tutto componenti che alla fine avremo bisogno di inviare azioni
o
accedere al nostro stato, quindi leggi dal nostro stato. Quindi qui avvolgiamo il componente del fornitore attorno al navigatore dei
pasti e ora il fornitore prende una proprietà importante, un sostegno che devi passare e che è il supporto
del negozio e ovviamente lì, come valore passiamo il nostro negozio qui.
Quindi questo negozio costante che contiene il negozio creato viene passato al fornitore di oggetti di scena del negozio e dietro le
quinte, questo ci dà tutto ciò di cui abbiamo bisogno per interagire ora con Redux, con il negozio Redux in
qualsiasi componente, schermo o altro componente nella nostra applicazione .
Ora lasciami riavviare questo con npm start e per il momento, questo non farà
una grande differenza ma la nostra app
dovrebbe sicuramente funzionare ancora, quindi non dovrebbe andare in crash a causa di ciò, quindi verificiamo solo che sia così e
ricaricare qui, stiamo premendo r due volte su Android e comando r su iOS e vediamo dove si carica ancora come dovrebbe, sì, sta andando bene
qui su iOS e sono abbastanza sicuro che si caricherà anche su Android, sì, funziona anche questo.
Quindi ora Redux è configurato,
il nostro negozio è inizializzato ma non lo stiamo usando.
Quindi, come prossimo passo, assicuriamoci di usare il nostro negozio prima di occuparci delle azioni e
del lavoro reale nel riduttore.