1 00:00:02,360 --> 00:00:04,430 Come possiamo usare il nostro negozio? 2 00:00:04,430 --> 00:00:11,240 Bene, tieni presente che alla fine qui gestisco i miei pasti, non le mie categorie perché non abbiamo programmato alcuna 3 00:00:11,240 --> 00:00:13,490 azione che cambierebbe qualcosa lì ma gestisco 4 00:00:13,670 --> 00:00:15,530 i miei pasti qui. 5 00:00:15,650 --> 00:00:22,990 Quindi un grande compito sarebbe quello di andare ovunque nella nostra app in cui stiamo importando pasti dai dati fittizi e sbarazzarci di tale 6 00:00:23,110 --> 00:00:26,970 importazione e invece, estrarre i dati dal nostro negozio perché la differenza sarà 7 00:00:26,980 --> 00:00:32,650 che in seguito possiamo aggiungere la logica per cambiare i dati nel nostro negozio mentre i nostri dati 8 00:00:32,650 --> 00:00:34,170 fittizi non cambieranno mai. 9 00:00:34,180 --> 00:00:38,980 Quindi dovremmo importare i dati dal nostro negozio, in modo da poter successivamente aggiungere la logica 10 00:00:39,280 --> 00:00:42,970 per manipolarli, ad esempio per limitare i pasti che stiamo visualizzando. 11 00:00:42,980 --> 00:00:47,510 Allora, dove abbiamo bisogno dei pasti? Nella schermata delle 12 00:00:47,510 --> 00:00:52,130 categorie, non importiamo pasti. Abbiamo un paio di altre importazioni di cui possiamo effettivamente sbarazzarci, ma questa 13 00:00:52,130 --> 00:00:52,490 è 14 00:00:52,550 --> 00:00:53,840 solo una nota a margine, non importiamo pasti. 15 00:00:53,870 --> 00:00:58,340 Le categorie possono rimanere lì perché, di nuovo, non avremo alcuna 16 00:00:58,490 --> 00:01:05,690 logica che le cambi, quindi possiamo andare avanti. La schermata dei pasti della categoria è una storia diversa, qui stiamo importando i pasti 17 00:01:05,690 --> 00:01:09,530 e ora l'obiettivo è quello di sbarazzarci di tale importazione e ottenere i pasti dal negozio 18 00:01:09,530 --> 00:01:16,640 Redux e la domanda ovviamente è, come possiamo farlo? Ancora una volta, il pacchetto React Redux ci aiuta in questo. Da quel pacchetto 19 00:01:16,730 --> 00:01:25,010 di React Redux, possiamo importare qualcosa, possiamo importare un hook, usare il hook selector. 20 00:01:25,020 --> 00:01:32,210 Questo ci consente di selezionare una porzione del nostro stato, del nostro stato gestito a livello globale e di utilizzarlo in questo componente. 21 00:01:32,220 --> 00:01:36,660 Ora sto usando l'hook qui perché ciò ci consente di usarlo in un componente funzionale, potresti 22 00:01:36,660 --> 00:01:42,480 anche essere a conoscenza di un altro approccio in cui importa effettivamente la funzione di connessione e avvolgi la tua esportazione 23 00:01:42,480 --> 00:01:47,220 con quella e usi lo stato della mappa per i puntelli, invio delle mappe agli oggetti di 24 00:01:47,220 --> 00:01:49,010 scena, è qualcosa che puoi usare 25 00:01:49,020 --> 00:01:51,560 anche, funzionerà assolutamente ma questo è un po 'più 26 00:01:51,580 --> 00:01:56,140 snello, quindi andrò con il selettore d'uso qui. Con ciò aggiunto, ora quando 27 00:01:56,260 --> 00:01:59,510 usiamo i nostri pasti, non li stiamo usando in 28 00:01:59,710 --> 00:02:07,270 questo modo, invece ora possiamo ottenerli con l'aiuto del selettore d'uso. Quindi per ricavare i nostri pasti display, quello che 29 00:02:07,270 --> 00:02:15,400 farò qui è creare un nuovo costante, pasti disponibili forse, il nome dipende da te e utilizzare qui il selettore in questo modo perché 30 00:02:15,400 --> 00:02:19,920 questo mi recupererà i dati fuori dallo stato e tornerà quindi è quello 31 00:02:19,930 --> 00:02:25,450 che poi memorizzerò qui in questa costante, il valore restituito e il selettore use accettano una 32 00:02:26,110 --> 00:02:29,920 funzione, una funzione che verrà eseguita per noi da React Redux. 33 00:02:29,920 --> 00:02:36,430 Una funzione che ottiene automaticamente lo stato come argomento, React Redux che esegue la funzione per noi fornirà lo 34 00:02:36,430 --> 00:02:44,140 stato corrente, lo stato Redux corrente a questa funzione e sarà quindi in grado di restituire tutti i dati desiderati da quello 35 00:02:44,200 --> 00:02:48,810 stato, da quello globale negozio, dallo stato globale e sto usando questi termini 36 00:02:48,850 --> 00:02:50,640 in modo intercambiabile qui. 37 00:02:52,910 --> 00:02:56,380 Quindi, come possiamo recuperare i dati da quello stato qui nel corpo della 38 00:02:56,420 --> 00:03:01,370 funzione e quindi sto usando la notazione della scorciatoia qui dove sul lato destro della freccia, questo viene 39 00:03:01,370 --> 00:03:06,860 automaticamente restituito se non è racchiuso tra parentesi graffe. Bene, per avere accesso a qualcosa dallo stato, 40 00:03:06,860 --> 00:03:12,560 dobbiamo tornare al luogo in cui creiamo il negozio, lì passo un riduttore di radice che viene creato 41 00:03:12,560 --> 00:03:14,120 combinando tutti i riduttori. 42 00:03:14,150 --> 00:03:17,250 Ancora una volta ne abbiamo solo uno, ma ho spiegato perché l'ho fatto. 43 00:03:17,300 --> 00:03:20,980 Ora abbiamo questa chiave, i pasti che dipendono totalmente da te, 44 00:03:20,990 --> 00:03:22,640 puoi nominarlo come preferisci. 45 00:03:22,640 --> 00:03:29,030 Questo dà a questa porzione del nostro stato che è gestita da questo riduttore un 46 00:03:29,030 --> 00:03:32,950 identificatore e ora possiamo usare questo identificatore per 47 00:03:33,020 --> 00:03:37,820 ottenere quella parte del nostro stato di cui è responsabile questo riduttore. 48 00:03:37,820 --> 00:03:45,070 Quindi, alla fine, uno stato simile a questo, come questo stato iniziale. Quindi nella schermata dei pasti della 49 00:03:45,070 --> 00:03:51,210 categoria, qui accedo allo stato. pasti o qualunque cosa tu scelga come identificatore 50 00:03:51,310 --> 00:03:58,490 nei riduttori combinati e poi qui, accederò ai pasti filtrati. Non i pasti che vorrei avere anche lì, 51 00:03:58,540 --> 00:04:03,380 abbiamo anche i pasti qui, ma voglio rispettare tutti i filtri impostati. 52 00:04:03,450 --> 00:04:06,690 In questo momento, non abbiamo alcuna logica per impostarli, 53 00:04:06,760 --> 00:04:12,970 ma con ciò cambieremo in futuro, quindi qui voglio ottenere i miei pasti filtrati in modo da ottenere 54 00:04:12,970 --> 00:04:17,930 sempre i pasti che dovrei davvero essere in grado di visualizzare, i pasti che 55 00:04:18,130 --> 00:04:25,420 rispettano i filtri impostati dall'utente e ora sono i pasti disponibili che voglio filtrare ancora di più qui per trovare il 56 00:04:25,420 --> 00:04:33,880 pasto per l'ID categoria selezionato o i pasti per la categoria selezionata. Detto questo, non ci sono più pasti maiuscoli 57 00:04:33,890 --> 00:04:39,500 in questo file, è tutto solo minuscolo qui e ci siamo sbarazzati 58 00:04:39,500 --> 00:04:45,890 dell'importazione con successo, ora andiamo avanti. Nella schermata preferita, stiamo anche importando 59 00:04:45,890 --> 00:04:46,650 i 60 00:04:46,670 --> 00:04:54,770 pasti e, proprio come prima, dovremmo liberarcene, quindi facciamolo. Invece, anche come prima, userò il selettore di React Redux per 61 00:04:54,770 --> 00:05:02,720 ottenere i miei pasti dal negozio e quindi qui dove uso i pasti, otterrò effettivamente i miei pasti disponibili con il 62 00:05:02,720 --> 00:05:04,260 selettore di utilizzo. 63 00:05:04,310 --> 00:05:10,370 Ancora una volta questo mi dà uno stato e posso accedervi. pasti. pasti filtrati ma ora in 64 00:05:10,370 --> 00:05:11,240 realtà qui 65 00:05:11,240 --> 00:05:16,250 per i preferiti, non voglio rispettare i filtri impostati perché a mio avviso ha 66 00:05:16,250 --> 00:05:21,000 senso che quando vogliamo visualizzare i nostri preferiti, vediamo sempre tutti i preferiti. 67 00:05:21,050 --> 00:05:25,930 Ovviamente potresti avere una logica diversa e scegliere i pasti filtrati, ma userò solo i pasti 68 00:05:26,090 --> 00:05:28,490 qui, quindi. pasti. i 69 00:05:28,520 --> 00:05:36,950 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à 70 00:05:36,950 --> 00:05:37,940 dei pasti nella 71 00:05:40,820 --> 00:05:46,180 nostra fetta di stato, ma ovviamente se dai un'occhiata al tuo riduttore, questo ha senso solo 72 00:05:46,180 --> 00:05:51,050 in parte perché avere una proprietà dei pasti preferiti qui e anzi lo facciamo. 73 00:05:51,330 --> 00:05:58,260 Quindi, in realtà, non abbiamo più bisogno di filtrare i nostri preferiti in questo modo e questo era comunque 74 00:05:58,260 --> 00:06:04,710 solo un filtro fittizio, ci sono sempre serviti i pasti con m1 e m2 come ID, invece 75 00:06:04,760 --> 00:06:10,310 per i nostri pasti preferiti, possiamo ottenerli semplicemente accedendo accedendo qui sui nostri pasti dichiariamo 76 00:06:10,310 --> 00:06:16,880 i piatti preferiti, quindi questa proprietà perché gestiremo i pasti preferiti in un array separato nel nostro negozio, 77 00:06:16,880 --> 00:06:18,280 quindi è ancora 78 00:06:18,290 --> 00:06:23,290 più facile qui, codice molto breve. Quindi, ci siamo sbarazzati dell'importazione dei pasti anche 79 00:06:23,300 --> 00:06:25,460 qui, passiamo alla schermata dei filtri. 80 00:06:25,460 --> 00:06:27,080 Non è possibile importare pasti qui, 81 00:06:27,170 --> 00:06:29,840 la schermata dei dettagli dei pasti invece ne ha uno. 82 00:06:29,840 --> 00:06:31,280 Quindi qui voglio liberarmene 83 00:06:31,310 --> 00:06:33,220 e ora qui avremo bisogno di 84 00:06:33,290 --> 00:06:39,800 quella proprietà di altri pasti che ho mostrato un secondo fa perché di nuovo qui, possiamo usare il selettore 85 00:06:40,610 --> 00:06:51,720 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 86 00:06:51,810 --> 00:06:59,280 cercando di caricare un singolo pasto per ID e quindi la mia base, il mio array in cui cerco quell'ID dovrebbe ovviamente 87 00:06:59,370 --> 00:07:04,440 essere un array con tutti i pasti e non filtrato perché non mi interessa alcun 88 00:07:04,440 --> 00:07:09,900 filtro impostato, qui sto cercando un pasto specifico con un ID specifico e voglio ottenere un 89 00:07:09,900 --> 00:07:16,140 elenco completo dei pasti ed è quindi dove avremo bisogno di questo non filtrato lista dei pasti che 90 00:07:16,140 --> 00:07:17,180 gestiamo qui. 91 00:07:20,140 --> 00:07:27,880 Quindi quindi qui, ora possiamo ottenere i nostri pasti disponibili con il selettore di utilizzo e di 92 00:07:27,880 --> 00:07:34,360 nuovo, usiamo i pasti di stato. pasti ora per davvero e ora possiamo usare 93 00:07:34,420 --> 00:07:41,070 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 94 00:07:41,070 --> 00:07:44,090 del pulsante ora che la vedo ma avremo effettivamente un problema. 95 00:07:44,430 --> 00:07:51,780 Potresti notare che nell'intestazione, in realtà provo anche a trovare un pasto dall'array dei pasti 96 00:07:51,780 --> 00:07:53,770 e rimuoviamo tale importazione. 97 00:07:53,790 --> 00:07:59,010 Ora il problema è anche qui nelle opzioni di navigazione, non possiamo usare il gancio di selezione perché 98 00:07:59,010 --> 00:08:04,170 puoi usare solo ganci all'interno di altri ganci o all'interno di componenti funzionali e questo non è né 99 00:08:04,170 --> 00:08:08,340 quello, è una funzione normale, non un funzionale componente e anche non un gancio. 100 00:08:08,340 --> 00:08:11,870 Quindi non possiamo usare il selettore qui per non funzionare. 101 00:08:11,900 --> 00:08:17,400 Ora, naturalmente, potremmo riportare l'importazione dei pasti, ma sarebbe un po 'economico perché nelle applicazioni reali, a 102 00:08:17,400 --> 00:08:22,710 volte avrai quella situazione in cui hai bisogno di dati dal tuo negozio Redux nei tuoi 103 00:08:22,710 --> 00:08:23,160 dati 104 00:08:23,190 --> 00:08:28,470 di navigazione e quindi nella prossima lezione, faremo affrontalo e assicurati che possiamo accedervi anche qui.