1
00:00:02,630 --> 00:00:05,410
Cominciamo con i preferiti.

2
00:00:05,420 --> 00:00:13,270
Voglio assicurarmi che, quando sono in una ricetta, posso fare clic su quella stella e ciò aggiunge questo come preferito e lo mostra qui nella

3
00:00:13,660 --> 00:00:18,490
schermata dei preferiti dove attualmente non vedo nulla perché ho rimosso questi preferiti fittizi.

4
00:00:19,880 --> 00:00:20,200
Per questo

5
00:00:20,210 --> 00:00:25,830
inizierò nella cartella del negozio, nella cartella delle azioni e aggiungerò una nuova cartella che nominerò anche i pasti. js, puoi nominarlo in modo diverso se ti confonde,

6
00:00:25,840 --> 00:00:30,570
ma sì, questi due file di pasti. js qui in azioni

7
00:00:30,560 --> 00:00:34,970
e pasti. js nei riduttori e nelle azioni pasti. js file,

8
00:00:34,960 --> 00:00:41,900
imposterò alcune azioni Redux che in genere iniziano impostando alcuni identificatori

9
00:00:41,930 --> 00:00:48,760
univoci che memorizzo in costanti e che saranno i preferiti.

10
00:00:49,070 --> 00:00:50,710
Puoi usare quello che vuoi qui,

11
00:00:50,780 --> 00:00:53,860
il valore che memorizzi qui in genere è lo stesso identificatore, quindi

12
00:00:54,350 --> 00:00:59,570
questo è il valore dell'identificatore e viene semplicemente memorizzato in una costante in modo che non sia necessario digitarlo

13
00:00:59,570 --> 00:01:02,870
manualmente in seguito, ma possiamo sempre importare questa costante ed evitare errori

14
00:01:02,870 --> 00:01:03,690
di battitura.

15
00:01:03,860 --> 00:01:05,440
Ancora una volta, se

16
00:01:05,440 --> 00:01:09,730
è nuovo di zecca per te, controlla prima una risorsa React Redux dedicata.

17
00:01:09,950 --> 00:01:12,680
Ora userò anche il modello del creatore di

18
00:01:12,680 --> 00:01:19,190
azioni qui, il che significa che ho quell'identificatore qui, ma ora esporterò anche una funzione che mi crea un'azione perché un'azione

19
00:01:19,280 --> 00:01:24,050
non è solo un identificatore spesso e in questo caso è anche il caso, ma

20
00:01:24,050 --> 00:01:29,630
ha bisogno di qualche payload extra e quindi in realtà abbiamo un'azione che è un oggetto con identificativo

21
00:01:29,780 --> 00:01:35,930
e payload e quindi qui, aggiungerò una funzione che mi crea un tale oggetto azione e chiamerò questo interruttore

22
00:01:35,930 --> 00:01:37,430
preferito come questo, selezionare

23
00:01:37,490 --> 00:01:42,950
l'identificatore ma nel caso del cammello e questa è una funzione che può ricevere alcuni dati perché

24
00:01:42,950 --> 00:01:48,500
sarò io quello che lo chiama e che dovrebbe restituire un oggetto Javascript che descrive questa azione,

25
00:01:48,500 --> 00:01:50,300
quindi che ha un tipo,

26
00:01:50,330 --> 00:01:55,010
diciamo che in genere si chiama quel campo identificatore ma in genere sei libero

27
00:01:55,010 --> 00:01:55,590
di

28
00:01:55,670 --> 00:01:57,490
usare quello che vuoi lì

29
00:01:57,500 --> 00:02:03,700
e nel mio caso, questo sarà il preferito, quindi indico questo identificatore, uso questa stringa come identificatore e quindi qualsiasi

30
00:02:03,740 --> 00:02:09,500
dato aggiuntivo che desideri, ad esempio qui ' dovrò fare pubblicità d l'ID del pasto che deve essere

31
00:02:09,500 --> 00:02:14,540
attivato e ciò significa che anche questa funzione deve ottenere questo ID come input perché altrimenti

32
00:02:14,540 --> 00:02:16,700
non posso memorizzarlo nell'azione che ho creato.

33
00:02:16,710 --> 00:02:21,120
Quindi questo è il mio creatore di azioni per l'azione preferita di attivazione

34
00:02:21,120 --> 00:02:27,810
/ disattivazione, ora nel riduttore, voglio agire quando ricevo un'azione preferita di attivazione / disattivazione e per questo, userò uno schema

35
00:02:27,810 --> 00:02:28,370
che

36
00:02:28,380 --> 00:02:34,020
probabilmente hai visto se hai lavorato con Redux prima , Userò qui un'istruzione switch e accenderò il mio

37
00:02:34,020 --> 00:02:40,890
tipo di azione perché tieni presente che l'azione sarà un oggetto con una proprietà type che identifica l'azione che si è verificata.

38
00:02:40,890 --> 00:02:45,330
Quindi accendo quel tipo di azione e quindi gestisco diversi casi per le diverse

39
00:02:45,330 --> 00:02:46,650
azioni che potrei avere.

40
00:02:46,650 --> 00:02:53,040
Quindi qui ho l'opzione di attivazione / disattivazione dei preferiti e per questo, è necessario importare l'opzione di attivazione / disattivazione dai pasti di azioni ed è

41
00:02:53,390 --> 00:02:58,590
per questo che lo sto memorizzando nella costante separata perché ora non è necessario digitare manualmente l'opzione di attivazione / disattivazione

42
00:02:58,590 --> 00:03:00,820
dei preferiti dove potrei avere un errore di

43
00:03:00,840 --> 00:03:07,410
battitura lì dentro, invece uso solo quella costante in cui è memorizzata la stringa. E ora qui, eseguo qualsiasi logica che voglio eseguire per

44
00:03:07,410 --> 00:03:13,310
poi lavorare con quell'azione e cambiare il mio stato in modo tale che il pasto con l'ID pasto che fa

45
00:03:13,350 --> 00:03:19,470
parte della mia azione venga aggiunto ai pasti preferiti o rimosso da lì se già faceva parte perché è un'azione

46
00:03:19,470 --> 00:03:20,790
di commutazione qui, voglio

47
00:03:20,820 --> 00:03:28,770
aggiungere elementi che non sono ancora preferiti, voglio rimuovere elementi che lo sono. Nota a margine, nell'istruzione switch, aggiungerò anche un

48
00:03:28,770 --> 00:03:33,150
caso predefinito in cui restituisco solo lo stato invariato.

49
00:03:33,150 --> 00:03:36,900
Non dovremmo davvero raggiungerlo, ma nel caso in cui lo facciamo, beh, allora è quello che

50
00:03:37,380 --> 00:03:40,800
facciamo, ma torniamo al caso preferito. Qui dentro, ora voglio

51
00:03:42,770 --> 00:03:48,740
scoprire se il mio pasto con l'ID che fa parte dell'azione perché sto aggiungendo l'ID del

52
00:03:48,740 --> 00:03:50,450
pasto all'azione, se quel

53
00:03:50,450 --> 00:03:52,550
pasto fa già parte dei pasti

54
00:03:52,550 --> 00:03:53,660
preferiti, se

55
00:03:53,690 --> 00:04:00,960
sì voglio rimuoverlo, se non lo è, voglio aggiungerlo. Quindi, per questo, inizierò trovando l'indice del pasto nella matrice dei pasti

56
00:04:00,960 --> 00:04:07,380
preferiti perché se è allora -1, so che non ho trovato un indice quindi non era parte, se è maggiore o

57
00:04:07,390 --> 00:04:07,820
uguale

58
00:04:07,840 --> 00:04:13,540
a zero, so che l'oggetto faceva parte di quello. Quindi avrò il mio indice esistente qui e

59
00:04:13,540 --> 00:04:21,960
lo ottengo usando i pasti preferiti dallo stato e lì ho inserito un segno di uguale e lo stato è semplicemente la mia istantanea

60
00:04:22,010 --> 00:04:27,510
dello stato corrente che ottengo e lì, avremo una proprietà dei pasti preferiti e posso

61
00:04:27,510 --> 00:04:33,780
utilizzare il metodo find index, un normale metodo Javascript che posso usare sugli array per ottenere l'indice di

62
00:04:33,840 --> 00:04:39,810
un elemento che corrisponde a determinati criteri che ho impostato qui in una funzione che passo per

63
00:04:40,230 --> 00:04:47,040
trovare l'indice, questa funzione viene eseguita su ogni pasto nel array e se ritorna vero, allora mi dà l'indice dell'elemento

64
00:04:47,040 --> 00:04:48,610
per cui è passato.

65
00:04:48,660 --> 00:04:56,900
Quindi qui voglio tornare vero se il pasto. id è uguale all'azione. mealId. Ciò significa semplicemente che il pasto

66
00:04:56,930 --> 00:05:02,090
che sto guardando nei miei pasti preferiti ha la stessa idea del pasto per cui si

67
00:05:02,090 --> 00:05:08,450
verifica questa azione e ciò significa che se ciò è vero per qualsiasi elemento nei pasti preferiti, che il

68
00:05:08,540 --> 00:05:13,490
pasto che stiamo cercando di attivare fa già parte dei preferiti, quindi dovremo rimuoverlo

69
00:05:13,490 --> 00:05:13,990
perché

70
00:05:13,990 --> 00:05:20,090
questo ora ci restituirà l'indice dell'elemento, quindi l'indice esistente sarà maggiore di -1 e quindi, possiamo quindi utilizzare

71
00:05:20,090 --> 00:05:21,120
quell'indice per rimuoverlo.

72
00:05:21,170 --> 00:05:23,660
Se questo restituisce true per nessun articolo, quindi se alla

73
00:05:23,720 --> 00:05:29,870
fine restituisce -1, so che l'articolo non fa ancora parte dei pasti preferiti. Quindi l'indice esistente contiene informazioni molto importanti e

74
00:05:29,870 --> 00:05:34,520
quindi lo userò qui in un'istruzione if e verificherò se l'indice esistente

75
00:05:34,520 --> 00:05:40,760
è maggiore o uguale a 0, il che significa che abbiamo già quel pasto come parte dei

76
00:05:41,390 --> 00:05:43,040
pasti preferiti o meno.

77
00:05:43,040 --> 00:05:48,290
Nel caso in cui, quindi l'articolo fa già parte dei pasti preferiti, voglio rimuoverlo.

78
00:05:48,290 --> 00:05:53,210
Quindi qui, alla fine, restituirò un nuovo stato perché nel tuo riduttore, alla fine, devi

79
00:05:53,210 --> 00:06:00,740
restituire un nuovo stato che è un nuovo oggetto in cui prima di tutto copio lo stato esistente con l'operatore di diffusione qui

80
00:06:00,740 --> 00:06:01,110
per

81
00:06:01,110 --> 00:06:05,810
estrarre tutte le coppie chiave-valore dello stato esistente, in modo da non perdere alcuno

82
00:06:05,870 --> 00:06:06,980
stato e non

83
00:06:06,980 --> 00:06:12,200
sovrascrivere alcuno stato che non voglio sovrascrivere, quindi sostituirò solo i pasti preferiti, quindi aggiungerò questo

84
00:06:12,200 --> 00:06:17,870
proprietà di nuovo per sovrascrivere i pasti preferiti esistenti con i miei nuovi pasti preferiti che dovrebbero alla

85
00:06:17,930 --> 00:06:21,520
fine essere i vecchi pasti preferiti senza l'elemento su questo indice.

86
00:06:24,250 --> 00:06:30,360
E ora qui per ottenere i miei pasti preferiti aggiornati, creerò una nuova costante e aggiornata

87
00:06:30,360 --> 00:06:39,470
FarMeals, lì creerò prima di tutto un nuovo array e lo popolerò con i miei pasti esistenti, quindi sposta i miei pasti preferiti esistenti

88
00:06:39,470 --> 00:06:46,240
in questo modo e lo faccio per creare una copia di quell'array in modo da non manipolare l'array

89
00:06:46,250 --> 00:06:53,000
originale se ora inizio a lavorarci perché ora voglio prendere i miei aggiornamenti preferiti, chiamare qui la giunzione

90
00:06:53,660 --> 00:06:57,470
e quindi rimuovere l'elemento dall'indice esistente e solo quell'elemento.

91
00:06:57,470 --> 00:07:03,950
Quindi, alla fine, questo prenderà questo indice UpdateMavMeals aggiornato, lo modificherà e rimuoverà l'elemento in questo indice e modificherà

92
00:07:04,250 --> 00:07:06,200
questo array, ecco perché

93
00:07:06,200 --> 00:07:12,110
l'ho copiato in modo da non modificare l'array originale e ora possiamo usare questo array AggiornatoFavMeals qui

94
00:07:12,110 --> 00:07:17,330
e memorizzalo come pasti preferiti nel nostro negozio perché quello sarà l'array di pasti preferito

95
00:07:17,390 --> 00:07:19,880
senza il pasto che abbiamo appena rimosso.

96
00:07:23,360 --> 00:07:29,680
Nel caso contrario, che è ovviamente pertinente se non stiamo trovando un prodotto, quindi vogliamo

97
00:07:29,690 --> 00:07:36,380
aggiungerlo, qui voglio anche restituire un nuovo stato in cui prima di tutto copio il vecchio stato

98
00:07:36,380 --> 00:07:42,230
e poi sovrascriverò i pasti preferiti in fondamentalmente sono i miei vecchi pasti preferiti

99
00:07:42,230 --> 00:07:48,380
e ora posso chiamare concat, un metodo Javascript incorporato in Javascript che restituisce un nuovo

100
00:07:48,410 --> 00:07:55,520
array che prende il vecchio array e aggiunge un nuovo elemento e lì, voglio aggiungere il pasto per

101
00:07:55,700 --> 00:08:05,130
quell'ID qui e ovviamente Posso trovare quel pasto sul mio stato, lì sui pasti, questa è questa proprietà, lo stato qui si riferisce sempre

102
00:08:05,130 --> 00:08:08,940
solo a questa struttura statale qui tra l'altro e

103
00:08:08,940 --> 00:08:14,240
ora qui, posso trovare il pasto che voglio aggiungere e poiché questo diventa

104
00:08:14,380 --> 00:08:18,210
molto a lungo, in realtà lo esternalizzerò in una

105
00:08:18,490 --> 00:08:27,770
nuova linea, quindi il mio pasto che voglio aggiungere può essere trovato con il metodo find che funziona su tutti i pasti e

106
00:08:27,800 --> 00:08:33,560
lì, se mealId è uguale all'azione. mealId, quindi ho il pasto che voglio aggiungere ed è

107
00:08:33,560 --> 00:08:40,180
questo pasto che concateno ai miei pasti preferiti, quindi aggiungo questo a quell'array. Dovrebbe essere la logica

108
00:08:40,180 --> 00:08:45,690
che funziona e che gestisce i nostri preferiti.

109
00:08:45,700 --> 00:08:52,120
Ora dobbiamo assicurarci di inviare effettivamente questa azione ogni volta che facciamo clic sull'icona a forma di stella

110
00:08:52,120 --> 00:08:52,540
nell'intestazione.

111
00:08:55,360 --> 00:08:56,570
Per inviare l'azione,

112
00:08:56,570 --> 00:09:00,550
andiamo alla schermata dei dettagli del pasto perché è qui che abbiamo la

113
00:09:00,550 --> 00:09:05,590
nostra icona a forma di stella qui e quando premo questo pulsante, alla fine voglio inviare un'azione.

114
00:09:05,710 --> 00:09:08,520
La buona notizia è che l'invio di azioni è

115
00:09:08,530 --> 00:09:09,800
molto semplice, abbiamo

116
00:09:09,850 --> 00:09:16,190
utilizzato il selettore, abbiamo anche usato l'invio che alla fine ci dà un modo semplice per attivare una funzione.

117
00:09:16,200 --> 00:09:24,110
La cattiva notizia è che questo ovviamente può essere utilizzato solo nel corpo del componente qui, nel nostro componente funzionale e

118
00:09:24,260 --> 00:09:26,150
non nelle opzioni di navigazione.

119
00:09:26,210 --> 00:09:32,690
Quindi dovremo di nuovo lavorare con i parametri impostati per comunicare tra le opzioni di navigazione e il componente, ma

120
00:09:32,720 --> 00:09:37,970
questo è ovviamente qualcosa che possiamo fare. Quindi, qui nella schermata dei dettagli del

121
00:09:38,040 --> 00:09:45,470
pasto, inizierò semplicemente chiamando use dispatch e ciò che fa è che ci dà una funzione di invio, una funzione che possiamo

122
00:09:45,470 --> 00:09:53,650
chiamare per inviare nuove azioni e memorizzerò in una spedizione denominata costante. Successivamente, voglio creare un gestore preferito di

123
00:09:53,650 --> 00:10:01,210
attivazione / disattivazione che è una funzione che alla fine dovrebbe inviare questa azione.

124
00:10:01,210 --> 00:10:06,390
Quindi qui voglio chiamare la spedizione che ho a disposizione grazie a questo hook e

125
00:10:06,610 --> 00:10:10,600
ora per spedire, devo inoltrare l'azione che voglio inviare e per questo,

126
00:10:10,600 --> 00:10:14,410
userò questo creatore di azioni per attivare il preferito qui.

127
00:10:14,620 --> 00:10:18,340
Quindi non ci resta che importarlo, importarlo dalla cartella del

128
00:10:20,780 --> 00:10:27,410
negozio, lì dalle azioni e lì dai pasti. file js, da lì voglio importare il preferito,

129
00:10:27,410 --> 00:10:35,740
non l'identificatore in maiuscolo ma questa funzione di creatore di azioni. Con quello importato qui, in spedizione possiamo chiamare il

130
00:10:35,740 --> 00:10:40,940
favorito di commutazione come questo e ora qui dobbiamo inoltrare l'ID

131
00:10:40,940 --> 00:10:45,440
e che ovviamente è il pastoId che stiamo già estraendo

132
00:10:48,480 --> 00:10:53,310
lì o selezionato Pasto. Id funzionerebbe anche, qualunque

133
00:10:55,350 --> 00:10:58,910
cosa tu voglia, andrò semplicemente a mangiare.

134
00:10:59,010 --> 00:11:07,110
Ora possiamo riattivare l'uso dell'effetto per comunicare con la nostra intestazione, non con questa linea, ma invece con i parametri del set di navigazione

135
00:11:07,110 --> 00:11:14,130
degli oggetti di scena e ora qui, chiamerò questo interruttore di attivazione, il nome dipende da te e indico il

136
00:11:14,130 --> 00:11:16,890
mio gestore preferito di attivazione / disattivazione.

137
00:11:16,890 --> 00:11:22,980
Ora attiva / disattiva il gestore preferito dovrebbe quindi essere aggiunto come dipendenza qui e

138
00:11:23,580 --> 00:11:30,180
per evitare cicli infiniti, userò di nuovo l'uso callback che importerò da React per avvolgere questa funzione qui.

139
00:11:30,180 --> 00:11:37,060
Quindi qui la callback è racchiusa in questa funzione e dobbiamo specificare qui le dipendenze e la dipendenza numero uno è

140
00:11:37,200 --> 00:11:40,020
la spedizione, React Redux farà in modo che questo

141
00:11:40,020 --> 00:11:44,640
non cambi mai, quindi questa è una dipendenza che non cambierà mai, la dipendenza

142
00:11:45,210 --> 00:11:46,730
due è pastoId, che

143
00:11:46,740 --> 00:11:49,270
anche non dovrebbe cambiare mentre ci troviamo

144
00:11:49,340 --> 00:11:54,900
in questa pagina, avrà sempre lo stesso valore. Quindi, con ciò, questa funzione non dovrebbe essere ricreata, il

145
00:11:54,900 --> 00:12:00,360
che significa che questo effetto non verrà mai eseguito nuovamente a meno che non venga ricreato, il che è

146
00:12:00,360 --> 00:12:07,820
il caso solo se avessimo un nuovo ID, nel qual caso sarebbe bene che questo venga ricreato, ma in caso contrario, questo ha vinto cambiano e quindi

147
00:12:07,820 --> 00:12:10,340
dovremmo avere un canale di comunicazione sicuro qui.

148
00:12:10,550 --> 00:12:16,490
Ora nell'intestazione, ora possiamo estrarre quel gestore, dal modo in cui non abbiamo

149
00:12:16,510 --> 00:12:19,040
più bisogno del pasto. Ora

150
00:12:19,150 --> 00:12:28,420
qui, ora possiamo semplicemente estrarre la funzione preferita di commutazione dalla nostra navigazione dei dati di navigazione ottenere param e quindi nominare

151
00:12:28,420 --> 00:12:35,080
quel comando fav , quindi questo è il nome param che possiamo estrarre e questo dovrebbe

152
00:12:35,080 --> 00:12:41,050
darci accesso a questa funzione che passiamo. Ora attiva o disattiva il preferito è ciò che dovrebbe essere effettivamente eseguito quando

153
00:12:41,050 --> 00:12:42,130
si preme questo pulsante.

154
00:12:42,550 --> 00:12:49,570
Quindi qui indicherò il preferito perché questo tiene un puntatore su questa funzione e quindi questa

155
00:12:49,600 --> 00:12:56,740
funzione verrà eseguita quando ora premiamo questa stella. Bene vedremo se funziona.

156
00:12:56,750 --> 00:13:04,760
Salviamolo e torniamo agli spaghetti qui e fai clic su questa stella e fai clic su Preferiti e sembra buono,

157
00:13:04,760 --> 00:13:05,450
gli

158
00:13:05,450 --> 00:13:07,600
spaghetti fanno parte dei preferiti.

159
00:13:07,670 --> 00:13:11,440
Facciamo di nuovo clic sulla stella qui e andiamo ai preferiti ed è sparito,

160
00:13:11,480 --> 00:13:12,730
questo ha molto senso.

161
00:13:12,740 --> 00:13:18,290
Fai clic di nuovo, è tornato, vai alla pagina dei dettagli qui nella scheda dei preferiti e fai clic sulla

162
00:13:18,290 --> 00:13:20,550
stella e torna indietro, beh è sparito.

163
00:13:20,750 --> 00:13:27,410
Verifichiamolo anche su Android, forse per la cotoletta, i preferiti sono vuoti in questo momento. Torniamo indietro e fai clic sulla stella,

164
00:13:27,410 --> 00:13:30,560
vai ai preferiti, eccolo qui, torna

165
00:13:30,560 --> 00:13:39,250
indietro, fai clic sulla stella e non c'è più. Quindi questa logica generalmente funziona.

166
00:13:39,250 --> 00:13:43,150
Ci sono un paio di cose su cui voglio ancora lavorare, ad esempio voglio cambiare

167
00:13:43,150 --> 00:13:44,250
l'icona in base

168
00:13:44,260 --> 00:13:49,600
allo stato preferito, voglio anche mostrare un po 'di testo nella schermata preferita quando è vuota ma in generale, l'invio

169
00:13:49,600 --> 00:13:52,840
e l'utilizzo dei dati funziona anche se ne abbiamo bisogno in un'intestazione.