1 00:00:02,250 --> 00:00:08,070 Continueremo a lavorare sull'app che abbiamo creato nell'ultimo modulo del corso con le nostre ricette qui e 2 00:00:08,070 --> 00:00:15,070 con i filtri che potremmo impostare e così via e ci sono due cose che dobbiamo aggiungere dove avremo bisogno di Redux. 3 00:00:15,090 --> 00:00:21,870 Uno è che possiamo effettivamente contrassegnare una ricetta come preferita facendo clic sull'icona a forma di stella, che questa in realtà la contrassegna 4 00:00:21,870 --> 00:00:27,900 come preferita e che per noi cambiamo anche questa icona per mostrare se è già una delle preferite o no, 5 00:00:27,900 --> 00:00:28,980 ma soprattutto, che 6 00:00:28,980 --> 00:00:35,400 possiamo vedere quella ricetta come preferita qui nella scheda Preferiti. E l'altra cosa in cui avremo bisogno di Redux 7 00:00:35,400 --> 00:00:41,280 è qui nei filtri, lì quando impostiamo un filtro e quindi lo salviamo, ovviamente questo 8 00:00:41,280 --> 00:00:49,080 dovrebbe avere un effetto sui pasti che stiamo caricando qui nella nostra scheda dei pasti nell'elenco di pasti quando selezioniamo 9 00:00:49,080 --> 00:00:51,470 una categoria. Lì questo 10 00:00:51,500 --> 00:00:58,880 dovrebbe riflettersi, ciò che abbiamo impostato sui filtri. Questo è ciò su cui lavoriamo, di cosa avremo bisogno di 11 00:00:58,880 --> 00:01:02,300 Redux e per quello, installiamo Redux e cominciamo con esso. 12 00:01:03,350 --> 00:01:07,760 Per iniziare con Redux, lascerò qui il mio server 13 00:01:07,760 --> 00:01:12,830 expo, il processo di avvio di npm, lo chiuderò temporaneamente e 14 00:01:12,860 --> 00:01:15,030 installerò un pacchetto che sarebbe 15 00:01:15,110 --> 00:01:22,460 Redux e oltre a Redux, dobbiamo anche installare React Redux perché è è inoltre necessario lavorare 16 00:01:22,460 --> 00:01:23,760 con Redux. 17 00:01:23,780 --> 00:01:28,700 Quindi entrambi i pacchetti devono essere installati qui e mentre stanno installando, possiamo già iniziare a lavorare 18 00:01:28,700 --> 00:01:34,280 sui nostri file di codice lì un po 'perché in questo progetto, voglio aggiungere una nuova cartella ora ed è 19 00:01:34,280 --> 00:01:35,780 la cartella del negozio. 20 00:01:35,780 --> 00:01:40,810 Ora puoi dare un nome a questa cartella come preferisci, non deve essere chiamato store, a Redux 21 00:01:41,000 --> 00:01:46,970 non importa, ma questa è la cartella in cui voglio gestire la mia configurazione di Redux perché Redux riguarda tutto quel 22 00:01:46,970 --> 00:01:48,390 negozio di stato centrale. 23 00:01:48,530 --> 00:01:56,150 Quindi qui nella cartella dello store, ora possiamo iniziare con Redux e non tratterò Redux nei minimi dettagli qui, ho un corso 24 00:01:56,150 --> 00:01:57,230 completo React 25 00:01:57,260 --> 00:02:02,510 e Redux per questo se vuoi imparare i dettagli di questo, per in questo corso 26 00:02:02,570 --> 00:02:08,450 presumo effettivamente le conoscenze precedenti di React e Redux e quindi questo sarà solo un breve aggiornamento. 27 00:02:09,890 --> 00:02:14,980 Redux alla fine si basa su riduttori, azioni e quindi sulla costruzione di un negozio basato su questi 28 00:02:14,980 --> 00:02:16,010 riduttori e azioni. 29 00:02:16,360 --> 00:02:23,230 Ora, per quello qui nella cartella dello store, aggiungerò una cartella di azioni e aggiungerò una cartella di riduttori, in realtà avremo 30 00:02:23,320 --> 00:02:29,320 solo un'azione e un file di riduzione in questo progetto ma se avessi più file di quello, avendo sottocartelle 31 00:02:29,320 --> 00:02:34,180 separate potrebbero essere una buona idea per mantenerlo organizzato ed è per questo che 32 00:02:34,180 --> 00:02:39,820 le creo qui, anche se per questa semplice app non ne avremmo bisogno perché non avremmo tanti file. 33 00:02:39,880 --> 00:02:44,230 Cominciamo con il riduttore. Nella cartella del 34 00:02:44,350 --> 00:02:52,630 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 35 00:02:52,630 --> 00:02:53,310 riduttore dei pasti. 36 00:02:53,410 --> 00:02:58,750 Quindi è alla fine il file in cui scriveremo la logica per contrassegnare un pasto come 37 00:02:58,750 --> 00:03:01,330 preferito e per gestire i nostri filtri. 38 00:03:01,430 --> 00:03:04,700 Ora un riduttore in React è solo una funzione, quindi 39 00:03:04,700 --> 00:03:10,550 qui creerò una funzione, chiamerò riduttore dei pasti, il nome dipende totalmente da te e questa funzione riceverà 40 00:03:10,610 --> 00:03:17,360 effettivamente due argomenti: lo stato, lo stato attuale dello snapshot su cui puoi costruire e derivare un nuovo stato perché 41 00:03:17,360 --> 00:03:22,250 un riduttore alla fine dovrà restituire un nuovo stato che viene poi preso da 42 00:03:22,370 --> 00:03:24,860 Redux e memorizzato nel suo negozio. 43 00:03:24,860 --> 00:03:30,230 Quindi ottieni l'attuale, il vecchio stato qui e ottieni l'azione perché la funzione di riduzione qui 44 00:03:30,230 --> 00:03:31,940 viene eseguita da Redux 45 00:03:31,940 --> 00:03:36,710 ogni volta che viene inviata una nuova azione e quindi abbiamo accesso all'azione qui in 46 00:03:36,710 --> 00:03:40,370 modo da poter scoprire se dobbiamo agire e cosa dobbiamo fare. 47 00:03:40,520 --> 00:03:44,960 Quindi all'interno di questa funzione, alla fine, è necessario restituire un nuovo stato, nella sua forma 48 00:03:44,960 --> 00:03:49,220 più semplice che, naturalmente, significa che restituiamo lo stato corrente che d'altra parte significa che 49 00:03:49,220 --> 00:03:52,470 questo riduttore non fa nulla di utile ma noi cambiarlo. 50 00:03:52,650 --> 00:03:58,170 Ora, quando eseguiamo per la prima volta la nostra app, vogliamo anche impostare uno stato iniziale 51 00:03:58,170 --> 00:04:00,000 che viene utilizzato inizialmente, quindi 52 00:04:00,000 --> 00:04:06,510 che inizializza il nostro stato all'avvio di questa app e per questo, aggiungerò qui una nuova costante di stato 53 00:04:06,510 --> 00:04:14,970 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 54 00:04:15,120 --> 00:04:22,060 perché avremo bisogno di entrambi - un elenco di tutti i pasti e un elenco dei pasti che si adattano ai 55 00:04:22,060 --> 00:04:31,130 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 56 00:04:31,130 --> 00:04:31,610 questo 57 00:04:31,670 --> 00:04:34,800 è solo un possibile approccio che potresti adottare 58 00:04:34,830 --> 00:04:40,340 qui, possiamo sicuramente trovare altri modi di gestire i nostri dati qui, ma mi piace questo. 59 00:04:40,590 --> 00:04:53,140 Ora ciò di cui ho bisogno in questo file sono i miei dati fittizi sui pasti, quindi importerò i pasti dalla mia cartella di 60 00:04:53,140 --> 00:04:59,860 dati e lì dai dati fittizi. file js e inizializzerò i pasti qui con il mio array di dati fittizi dei pasti. 61 00:05:00,550 --> 00:05:06,220 Anche i pasti filtrati sono inizializzati con questo perché inizialmente all'avvio di questa app 62 00:05:06,330 --> 00:05:11,840 non abbiamo alcuna impostazione di filtri. I pasti preferiti invece sono inizialmente un array vuoto perché di nuovo quando l'app 63 00:05:11,840 --> 00:05:13,130 viene avviata, non avremo pasti preferiti. 64 00:05:13,130 --> 00:05:18,230 Ovviamente in un'app reale, potresti voler archiviare quello stato su un server, in modo che quando l'utente chiude 65 00:05:18,230 --> 00:05:21,400 l'app e torni più tardi, non si ricomincia da capo, ma 66 00:05:21,470 --> 00:05:23,230 non è qualcosa che faremo qui, 67 00:05:23,240 --> 00:05:28,580 tu Imparerò come raggiungere un server e salvare i dati lì e caricare i dati da lì in moduli 68 00:05:28,610 --> 00:05:29,440 separati più 69 00:05:29,460 --> 00:05:33,040 avanti in questo corso, qui terremo questo semplice per concentrarci su Redux. 70 00:05:33,140 --> 00:05:39,170 Quindi questo è il mio stato iniziale, qui in questa funzione ora possiamo usare una sintassi Javascript in cui 71 00:05:39,230 --> 00:05:44,690 assegniamo il nostro stato iniziale come valore predefinito per l'argomento state, il che significa che quando questa 72 00:05:44,690 --> 00:05:51,290 funzione del riduttore viene eseguita e lo stato non è definito, come nel caso in cui Redux esegue il nostro 73 00:05:51,590 --> 00:05:53,700 riduttore per la prima volta, 74 00:05:53,750 --> 00:05:56,330 inizieremo con quello stato iniziale, quindi questo caricherà 75 00:05:56,330 --> 00:06:02,760 automaticamente il nostro stato iniziale, per così dire perché quando Redux viene avviato e avviato, verrà inviata un'azione iniziale che 76 00:06:02,790 --> 00:06:07,910 è era solito attraversare il riduttore una volta e questo caricherà il nostro stato iniziale. 77 00:06:07,980 --> 00:06:14,160 Quindi, con quello, possiamo lavorare con qualche stato iniziale che è bello ma che da solo non ci 78 00:06:14,160 --> 00:06:16,190 aiuta troppo. Per il momento, 79 00:06:16,200 --> 00:06:17,070 comunque, colleghiamo 80 00:06:17,250 --> 00:06:23,640 questo riduttore a Redux in modo che possiamo effettivamente utilizzare il nostro negozio Redux ovunque nell'app prima di iniziare 81 00:06:23,640 --> 00:06:30,860 a inviare azioni e fare cose più utili nel riduttore. Quindi qui per ora, esporterò il riduttore 82 00:06:30,860 --> 00:06:39,890 dei pasti come predefinito qui e ora in app. js che è il file da cui inizia tutta 83 00:06:39,890 --> 00:06:42,190 la nostra app, dobbiamo 84 00:06:42,230 --> 00:06:47,960 configurare il nostro negozio Redux. Per 85 00:06:48,080 --> 00:06:57,270 questo qui, importiamo creare store da Redux. 86 00:06:57,510 --> 00:07:02,010 Inoltre, dovremo importare riduttori di mietitrebbia da lì. 87 00:07:02,010 --> 00:07:06,090 Questo ci consente ora di creare un negozio, avremo solo bisogno del nostro 88 00:07:06,090 --> 00:07:12,610 riduttore, quindi qui importerò il mio riduttore dei pasti da e ora indicherò la cartella del negozio, la cartella dei riduttori 89 00:07:12,610 --> 00:07:15,280 e lì, i pasti. js file 90 00:07:15,330 --> 00:07:26,520 e ora forse qui, possiamo creare il nostro negozio qui chiamando create store. Ora crea store prende un riduttore alla fine 91 00:07:26,640 --> 00:07:31,910 che devi passare. Ora ovviamente qui abbiamo un riduttore e 92 00:07:31,920 --> 00:07:36,780 potremmo passare questo, ma nelle app più grandi, potresti avere più di un riduttore perché 93 00:07:36,780 --> 00:07:43,710 spesso hai riduttori per le diverse aree caratteristiche della tua app, uno per l'autenticazione, uno per i tuoi prodotti, uno per 94 00:07:43,710 --> 00:07:49,740 dire l'area di supporto della tua app e devi unire tutti questi singoli riduttori, questi diversi riduttori in 95 00:07:49,800 --> 00:07:53,970 un riduttore di radice ed è quello che fa la funzione di 96 00:07:54,000 --> 00:07:58,800 riduttori combinati, di nuovo qui non ne avremmo bisogno perché abbiamo solo un riduttore 97 00:07:58,800 --> 00:08:01,060 ma per mostrarti già l'approccio che 98 00:08:01,140 --> 00:08:07,890 potresti usare anche con più riduttori, lo userò anche qui. Quindi avrò qui il mio riduttore di radice che creo chiamando 99 00:08:07,890 --> 00:08:14,460 i riduttori combinati, i riduttori combinati prendono un oggetto Javascript in cui ora mappiamo i nostri singoli riduttori, i nostri 100 00:08:14,460 --> 00:08:16,130 diversi riduttori alle chiavi. 101 00:08:16,130 --> 00:08:21,870 Quindi, per esempio, qui potremmo prendere i pasti come chiave, ma quel nome dipende totalmente da te e collegarlo 102 00:08:22,740 --> 00:08:24,900 al riduttore dei pasti, in questo modo. 103 00:08:24,900 --> 00:08:32,760 Quello che fa è che alla fine unisce questo riduttore di pasto a questo riduttore di radici e in seguito saremo in grado 104 00:08:32,760 --> 00:08:37,380 di lavorare con lo stato gestito dal riduttore di pasti, quindi con questo 105 00:08:37,380 --> 00:08:43,440 stato che è inizializzato in questo modo, con l'aiuto di questi pasti proprietà, saremo in grado di accedere 106 00:08:43,440 --> 00:08:44,900 a questo stato, 107 00:08:44,910 --> 00:08:49,630 a questa porzione di stato con questa proprietà in seguito, ma vedrai tutto ciò. 108 00:08:49,740 --> 00:08:54,780 Quindi questo è il nostro riduttore di radice e ora non ci resta che passare il riduttore di radice per 109 00:08:54,780 --> 00:08:57,900 creare un negozio, questo ci dà un negozio e ora cosa? 110 00:08:57,900 --> 00:09:03,210 Ora questo negozio deve essere fornito alla nostra applicazione e per questo, abbiamo bisogno 111 00:09:03,240 --> 00:09:06,960 dell'altro pacchetto che abbiamo installato che è React Redux. 112 00:09:07,170 --> 00:09:18,300 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 113 00:09:18,390 --> 00:09:25,200 componente più in alto che contiene tutti gli altri componenti che alla fine interagiranno con il nostro negozio 114 00:09:25,200 --> 00:09:30,000 e il navigatore pasti è abbastanza buono per questo perché contiene tutti 115 00:09:30,060 --> 00:09:35,960 i nostri schermi, quindi contiene tutto componenti che alla fine avremo bisogno di inviare azioni 116 00:09:35,960 --> 00:09:36,420 o 117 00:09:36,480 --> 00:09:44,230 accedere al nostro stato, quindi leggi dal nostro stato. Quindi qui avvolgiamo il componente del fornitore attorno al navigatore dei 118 00:09:44,230 --> 00:09:50,440 pasti e ora il fornitore prende una proprietà importante, un sostegno che devi passare e che è il supporto 119 00:09:50,680 --> 00:09:54,590 del negozio e ovviamente lì, come valore passiamo il nostro negozio qui. 120 00:09:54,640 --> 00:10:01,660 Quindi questo negozio costante che contiene il negozio creato viene passato al fornitore di oggetti di scena del negozio e dietro le 121 00:10:01,660 --> 00:10:07,990 quinte, questo ci dà tutto ciò di cui abbiamo bisogno per interagire ora con Redux, con il negozio Redux in 122 00:10:08,050 --> 00:10:11,520 qualsiasi componente, schermo o altro componente nella nostra applicazione . 123 00:10:13,360 --> 00:10:18,630 Ora lasciami riavviare questo con npm start e per il momento, questo non farà 124 00:10:18,630 --> 00:10:21,430 una grande differenza ma la nostra app 125 00:10:21,430 --> 00:10:29,140 dovrebbe sicuramente funzionare ancora, quindi non dovrebbe andare in crash a causa di ciò, quindi verificiamo solo che sia così e 126 00:10:29,170 --> 00:10:38,370 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 127 00:10:38,730 --> 00:10:44,860 qui su iOS e sono abbastanza sicuro che si caricherà anche su Android, sì, funziona anche questo. 128 00:10:44,890 --> 00:10:46,890 Quindi ora Redux è configurato, 129 00:10:46,900 --> 00:10:49,990 il nostro negozio è inizializzato ma non lo stiamo usando. 130 00:10:49,990 --> 00:10:54,520 Quindi, come prossimo passo, assicuriamoci di usare il nostro negozio prima di occuparci delle azioni e 131 00:10:54,520 --> 00:10:56,200 del lavoro reale nel riduttore.