Come possiamo usare il nostro negozio?
Bene, tieni presente che alla fine qui gestisco i miei pasti, non le mie categorie perché non abbiamo programmato alcuna
azione che cambierebbe qualcosa lì ma gestisco
i miei pasti qui.
Quindi un grande compito sarebbe quello di andare ovunque nella nostra app in cui stiamo importando pasti dai dati fittizi e sbarazzarci di tale
importazione e invece, estrarre i dati dal nostro negozio perché la differenza sarà
che in seguito possiamo aggiungere la logica per cambiare i dati nel nostro negozio mentre i nostri dati
fittizi non cambieranno mai.
Quindi dovremmo importare i dati dal nostro negozio, in modo da poter successivamente aggiungere la logica
per manipolarli, ad esempio per limitare i pasti che stiamo visualizzando.
Allora, dove abbiamo bisogno dei pasti? Nella schermata delle
categorie, non importiamo pasti. Abbiamo un paio di altre importazioni di cui possiamo effettivamente sbarazzarci, ma questa
è
solo una nota a margine, non importiamo pasti.
Le categorie possono rimanere lì perché, di nuovo, non avremo alcuna
logica che le cambi, quindi possiamo andare avanti. La schermata dei pasti della categoria è una storia diversa, qui stiamo importando i pasti
e ora l'obiettivo è quello di sbarazzarci di tale importazione e ottenere i pasti dal negozio
Redux e la domanda ovviamente è, come possiamo farlo? Ancora una volta, il pacchetto React Redux ci aiuta in questo. Da quel pacchetto
di React Redux, possiamo importare qualcosa, possiamo importare un hook, usare il hook selector.
Questo ci consente di selezionare una porzione del nostro stato, del nostro stato gestito a livello globale e di utilizzarlo in questo componente.
Ora sto usando l'hook qui perché ciò ci consente di usarlo in un componente funzionale, potresti
anche essere a conoscenza di un altro approccio in cui importa effettivamente la funzione di connessione e avvolgi la tua esportazione
con quella e usi lo stato della mappa per i puntelli, invio delle mappe agli oggetti di
scena, è qualcosa che puoi usare
anche, funzionerà assolutamente ma questo è un po 'più
snello, quindi andrò con il selettore d'uso qui. Con ciò aggiunto, ora quando
usiamo i nostri pasti, non li stiamo usando in
questo modo, invece ora possiamo ottenerli con l'aiuto del selettore d'uso. Quindi per ricavare i nostri pasti display, quello che
farò qui è creare un nuovo costante, pasti disponibili forse, il nome dipende da te e utilizzare qui il selettore in questo modo perché
questo mi recupererà i dati fuori dallo stato e tornerà quindi è quello
che poi memorizzerò qui in questa costante, il valore restituito e il selettore use accettano una
funzione, una funzione che verrà eseguita per noi da React Redux.
Una funzione che ottiene automaticamente lo stato come argomento, React Redux che esegue la funzione per noi fornirà lo
stato corrente, lo stato Redux corrente a questa funzione e sarà quindi in grado di restituire tutti i dati desiderati da quello
stato, da quello globale negozio, dallo stato globale e sto usando questi termini
in modo intercambiabile qui.
Quindi, come possiamo recuperare i dati da quello stato qui nel corpo della
funzione e quindi sto usando la notazione della scorciatoia qui dove sul lato destro della freccia, questo viene
automaticamente restituito se non è racchiuso tra parentesi graffe. Bene, per avere accesso a qualcosa dallo stato,
dobbiamo tornare al luogo in cui creiamo il negozio, lì passo un riduttore di radice che viene creato
combinando tutti i riduttori.
Ancora una volta ne abbiamo solo uno, ma ho spiegato perché l'ho fatto.
Ora abbiamo questa chiave, i pasti che dipendono totalmente da te,
puoi nominarlo come preferisci.
Questo dà a questa porzione del nostro stato che è gestita da questo riduttore un
identificatore e ora possiamo usare questo identificatore per
ottenere quella parte del nostro stato di cui è responsabile questo riduttore.
Quindi, alla fine, uno stato simile a questo, come questo stato iniziale. Quindi nella schermata dei pasti della
categoria, qui accedo allo stato. pasti o qualunque cosa tu scelga come identificatore
nei riduttori combinati e poi qui, accederò ai pasti filtrati. Non i pasti che vorrei avere anche lì,
abbiamo anche i pasti qui, ma voglio rispettare tutti i filtri impostati.
In questo momento, non abbiamo alcuna logica per impostarli,
ma con ciò cambieremo in futuro, quindi qui voglio ottenere i miei pasti filtrati in modo da ottenere
sempre i pasti che dovrei davvero essere in grado di visualizzare, i pasti che
rispettano i filtri impostati dall'utente e ora sono i pasti disponibili che voglio filtrare ancora di più qui per trovare il
pasto per l'ID categoria selezionato o i pasti per la categoria selezionata. Detto questo, non ci sono più pasti maiuscoli
in questo file, è tutto solo minuscolo qui e ci siamo sbarazzati
dell'importazione con successo, ora andiamo avanti. Nella schermata preferita, stiamo anche importando
i
pasti e, proprio come prima, dovremmo liberarcene, quindi facciamolo. Invece, anche come prima, userò il selettore di React Redux per
ottenere i miei pasti dal negozio e quindi qui dove uso i pasti, otterrò effettivamente i miei pasti disponibili con il
selettore di utilizzo.
Ancora una volta questo mi dà uno stato e posso accedervi. pasti. pasti filtrati ma ora in
realtà qui
per i preferiti, non voglio rispettare i filtri impostati perché a mio avviso ha
senso che quando vogliamo visualizzare i nostri preferiti, vediamo sempre tutti i preferiti.
Ovviamente potresti avere una logica diversa e scegliere i pasti filtrati, ma userò solo i pasti
qui, quindi. pasti. i
pasti potrebbero sembrare strani, questo seleziona la fetta del nostro stato e poi in questa fetta, questa cosa dei pasti qui accede a questa proprietà
dei pasti nella
nostra fetta di stato, ma ovviamente se dai un'occhiata al tuo riduttore, questo ha senso solo
in parte perché avere una proprietà dei pasti preferiti qui e anzi lo facciamo.
Quindi, in realtà, non abbiamo più bisogno di filtrare i nostri preferiti in questo modo e questo era comunque
solo un filtro fittizio, ci sono sempre serviti i pasti con m1 e m2 come ID, invece
per i nostri pasti preferiti, possiamo ottenerli semplicemente accedendo accedendo qui sui nostri pasti dichiariamo
i piatti preferiti, quindi questa proprietà perché gestiremo i pasti preferiti in un array separato nel nostro negozio,
quindi è ancora
più facile qui, codice molto breve. Quindi, ci siamo sbarazzati dell'importazione dei pasti anche
qui, passiamo alla schermata dei filtri.
Non è possibile importare pasti qui,
la schermata dei dettagli dei pasti invece ne ha uno.
Quindi qui voglio liberarmene
e ora qui avremo bisogno di
quella proprietà di altri pasti che ho mostrato un secondo fa perché di nuovo qui, possiamo usare il selettore
di React Redux per selezionare i nostri pasti perché qui, ora abbiamo il nostro componente qui dove utilizziamo i nostri pasti e lì, voglio avere un array con tutti i pasti perché sto
cercando di caricare un singolo pasto per ID e quindi la mia base, il mio array in cui cerco quell'ID dovrebbe ovviamente
essere un array con tutti i pasti e non filtrato perché non mi interessa alcun
filtro impostato, qui sto cercando un pasto specifico con un ID specifico e voglio ottenere un
elenco completo dei pasti ed è quindi dove avremo bisogno di questo non filtrato lista dei pasti che
gestiamo qui.
Quindi quindi qui, ora possiamo ottenere i nostri pasti disponibili con il selettore di utilizzo e di
nuovo, usiamo i pasti di stato. pasti ora per davvero e ora possiamo usare
i pasti disponibili qui per trovare il pasto con quell'ID. Con ciò, ci liberiamo anche di questa importazione qui, possiamo anche rimuovere l'importazione
del pulsante ora che la vedo ma avremo effettivamente un problema.
Potresti notare che nell'intestazione, in realtà provo anche a trovare un pasto dall'array dei pasti
e rimuoviamo tale importazione.
Ora il problema è anche qui nelle opzioni di navigazione, non possiamo usare il gancio di selezione perché
puoi usare solo ganci all'interno di altri ganci o all'interno di componenti funzionali e questo non è né
quello, è una funzione normale, non un funzionale componente e anche non un gancio.
Quindi non possiamo usare il selettore qui per non funzionare.
Ora, naturalmente, potremmo riportare l'importazione dei pasti, ma sarebbe un po 'economico perché nelle applicazioni reali, a
volte avrai quella situazione in cui hai bisogno di dati dal tuo negozio Redux nei tuoi
dati
di navigazione e quindi nella prossima lezione, faremo affrontalo e assicurati che possiamo accedervi anche qui.