1
00:00:02,510 --> 00:00:05,000
Cominciamo cambiando l'icona a forma di stella

2
00:00:05,020 --> 00:00:08,580
in base al fatto che questa sia una delle preferite o meno,

3
00:00:08,600 --> 00:00:14,390
voglio avere quella stella piena solo se è una delle preferite e una stella vuota se non lo è.

4
00:00:14,390 --> 00:00:19,040
Quindi alla fine nella schermata dei dettagli del pasto, dobbiamo scambiare quell'icona che stiamo visualizzando qui in

5
00:00:19,040 --> 00:00:25,270
base allo stato preferito di questo pasto che abbiamo caricato qui. Ancora una volta, il problema qui è che

6
00:00:25,350 --> 00:00:32,040
possiamo scoprire se quel pasto è il preferito o meno in modo molto semplice nella funzione componente

7
00:00:32,040 --> 00:00:34,910
ma non proprio nelle opzioni di navigazione.

8
00:00:34,920 --> 00:00:42,010
Quindi, di nuovo, avremo bisogno di parametri per comunicare tra questi due, ma nel complesso, non è troppo difficile.

9
00:00:43,620 --> 00:00:49,830
Quello che voglio fare qui è che voglio ottenere i miei pasti preferiti con l'aiuto del selettore d'uso nella funzione del componente della schermata dei dettagli dei

10
00:00:49,830 --> 00:00:56,260
pasti con l'aiuto di stato e quindi di stato. pasti. pasti preferiti, quindi voglio

11
00:00:56,270 --> 00:01:01,380
ottenere tutti i miei pasti preferiti e ora voglio semplicemente controllare se quel

12
00:01:04,190 --> 00:01:12,410
pasto fa parte dei pasti preferiti e in realtà possiamo quindi perfezionarlo e persino nominare questo pasto corrente è preferito e nel

13
00:01:12,410 --> 00:01:18,830
selettore non solo tornare i pasti preferiti ma aggiungiamo un po 'più di logica e aggiungiamo semplicemente

14
00:01:18,950 --> 00:01:23,300
un segno di spunta in cui chiamiamo alcuni che è anche

15
00:01:23,300 --> 00:01:30,170
un metodo incorporato che restituisce vero se la condizione che stiamo per specificare è vera per almeno un

16
00:01:30,320 --> 00:01:41,090
elemento in quello array e lì, controllo ogni pasto presente, se l'ID del pasto è uguale all'ID del pasto che recupero qui e quindi devo scambiare le righe.

17
00:01:41,260 --> 00:01:46,570
Quindi qui, ottengo il pasto del pasto in cui stiamo caricando nella schermata dei dettagli e

18
00:01:46,570 --> 00:01:54,290
quindi controllo i miei pasti preferiti, se l'ID del pasto fa parte di essi, il che significherebbe che questo pasto è parte dei nostri preferiti.

19
00:01:54,320 --> 00:01:59,600
Quindi, con questo, abbiamo questo pasto attuale come informazione preferita, ora dobbiamo passarlo alle opzioni di

20
00:01:59,630 --> 00:02:07,010
navigazione e, di nuovo, possiamo farlo con effetto d'uso, forse laggiù. Proprio come prima, fornisci una funzione qui in una

21
00:02:07,010 --> 00:02:15,020
serie di dipendenze, nella funzione qui imposterò i parametri di navigazione set props per unire più dati nei miei parametri e questo

22
00:02:15,050 --> 00:02:21,620
è forse il parametro is fav, il nome dipende da te, che detiene il pasto corrente è il

23
00:02:21,620 --> 00:02:27,740
valore preferito in modo che quel valore che abbiamo appena derivato e ora una dipendenza da

24
00:02:27,740 --> 00:02:33,710
quella funzione, di quell'uso dell'effetto chiamata voglio dire è ovviamente il pasto corrente è il preferito,

25
00:02:33,710 --> 00:02:41,170
quando ciò cambia, voglio inoltrare le nuove informazioni ai parametri e quindi all'intestazione, altrimenti questo effetto non dovrebbe essere eseguito nuovamente.

26
00:02:41,240 --> 00:02:48,740
Quindi ora torniamo alle opzioni di navigazione, possiamo recuperare quelle informazioni qui, i preferiti

27
00:02:48,740 --> 00:02:54,960
possono essere recuperati da navigationData. naviga con l'aiuto di get param e lì ho

28
00:02:54,980 --> 00:02:58,640
chiamato questo è fav, eccolo qui, quindi è questo il nome

29
00:02:59,460 --> 00:03:01,360
con cui possiamo recuperarlo.

30
00:03:01,370 --> 00:03:06,080
Ora abbiamo le informazioni preferite nell'intestazione e ora possiamo usarle per visualizzare qui un'icona

31
00:03:06,080 --> 00:03:06,610
diversa.

32
00:03:06,620 --> 00:03:12,260
Quindi, invece di rendere sempre la stella iOS, avrò un'espressione dinamica qui e controllerò se il preferito è

33
00:03:12,260 --> 00:03:13,610
vero, se lo è,

34
00:03:13,610 --> 00:03:17,440
quindi voglio usare la stella iOS che è questa stella di campo, se

35
00:03:17,810 --> 00:03:18,500
non lo

36
00:03:18,620 --> 00:03:22,220
è, io ' Renderò il contorno di una stella iOS e

37
00:03:22,220 --> 00:03:23,570
sarà una stella vuota.

38
00:03:24,730 --> 00:03:28,960
Con ciò, speriamo di avere un setup che funzioni come previsto.

39
00:03:29,020 --> 00:03:30,400
Se vado agli spaghetti, ora

40
00:03:30,400 --> 00:03:32,760
questa è una stella vuota e se faccio clic

41
00:03:32,770 --> 00:03:35,640
su questa, è una stella piena e fa parte dei preferiti.

42
00:03:35,650 --> 00:03:41,020
Se poi vado alla schermata dei dettagli qui, vedi che ci vuole un po 'prima che la

43
00:03:41,020 --> 00:03:47,590
stella sia compilata anche qui, dovremo risolvere questo problema. Se ora faccio clic qui e torniamo ai pasti, lì

44
00:03:47,590 --> 00:03:53,660
viene anche aggiornato e questa è la magia di Redux, aggiorna una parte dell'applicazione se qualcosa correlato cambia in un'altra

45
00:03:53,740 --> 00:03:58,570
parte, è esattamente come dovrebbe comportarsi qui. Quindi in genere funziona, l'unica

46
00:03:58,570 --> 00:04:05,890
cosa che non era troppo bella è che questa stella qui inizialmente è vuota e si riempie solo

47
00:04:05,890 --> 00:04:08,640
dopo che questo è stato caricato, quindi

48
00:04:08,650 --> 00:04:15,760
possiamo sistemarlo ma a parte questo, funziona come dovrebbe. Ora per riparare questa stella inizialmente vuota, possiamo ancora

49
00:04:15,880 --> 00:04:16,950
usare una

50
00:04:16,990 --> 00:04:21,400
soluzione alternativa che ho spiegato in precedenza per i dati iniziali dell'intestazione.

51
00:04:21,550 --> 00:04:24,040
Non vogliamo aspettare che il primo

52
00:04:24,040 --> 00:04:29,140
rendering finisca, invece dovremmo passare questi dati iniziali a questo componente quando ci navighiamo.

53
00:04:30,090 --> 00:04:35,910
Quindi è di nuovo il momento per la lista dei pasti in cui abbiamo questa azione di

54
00:04:35,910 --> 00:04:43,170
navigazione di inoltrare anche questa è la chiave fav, quindi questa chiave che ho cercato di estrarre qui nella schermata dei

55
00:04:44,040 --> 00:04:50,580
dettagli del pasto laggiù, get param è fav. Voglio passare il valore corrente quando carichiamo questo componente,

56
00:04:50,790 --> 00:04:55,680
quando carichiamo questa schermata qui dall'elenco dei pasti che è il componente che

57
00:04:56,390 --> 00:04:57,540
innesca quella

58
00:04:57,690 --> 00:05:03,390
navigazione ai dettagli del pasto e, naturalmente, itemData. l'articolo è un singolo pasto ma che non contiene informazioni sul fatto che faccia parte

59
00:05:03,390 --> 00:05:04,070
o meno dei

60
00:05:04,180 --> 00:05:08,460
nostri preferiti, ma ovviamente possiamo scoprire se è così o no. Nell'elenco dei pasti,

61
00:05:08,460 --> 00:05:14,360
possiamo anche accedere al negozio Redux, non solo dai componenti dello schermo.

62
00:05:14,370 --> 00:05:22,260
Quindi qui posso anche usare il selettore di React Redux in questo modo e quindi nel mio componente qui, posso ottenere i miei pasti preferiti

63
00:05:22,260 --> 00:05:31,560
con l'aiuto del selettore di utilizzo dove ottengo il mio stato e quindi ritorno. pasti puntano i pasti preferiti per ottenere tutti i miei pasti preferiti e

64
00:05:31,560 --> 00:05:34,150
ora quando eseguiamo il rendering di un

65
00:05:34,260 --> 00:05:39,240
singolo elemento del pasto, possiamo usarlo per scoprire se quell'elemento del pasto fa parte dei

66
00:05:39,240 --> 00:05:41,070
nostri preferiti. A proposito,

67
00:05:41,100 --> 00:05:43,710
non puoi usare il selettore lì dentro,

68
00:05:43,770 --> 00:05:49,680
che non sarebbe un uso valido perché devi usare gli hook di React solo al livello

69
00:05:49,680 --> 00:05:53,950
principale della funzione del componente, non nelle funzioni nidificate o nidificate se

70
00:05:53,970 --> 00:05:56,370
blocchi o qualcosa del genere, quindi l'uso

71
00:05:57,430 --> 00:06:03,500
del selettore di utilizzo qui non è consentito ma possiamo usare i nostri pasti preferiti lì ovviamente

72
00:06:03,830 --> 00:06:12,890
e quindi qui, possiamo scoprire se questo è un preferito semplicemente controllando i pasti preferiti e cercando il pasto in cui il suo ID corrisponde all'elementoDati

73
00:06:12,890 --> 00:06:14,840
.

74
00:06:14,840 --> 00:06:14,840
articolo.

75
00:06:14,870 --> 00:06:20,990
id, quindi l'ID del pasto che stiamo attualmente visualizzando. Pertanto, il preferito conterrà l'oggetto che abbiamo trovato lì,

76
00:06:20,990 --> 00:06:27,290
in alternativa ne utilizziamo alcuni qui che è un metodo Javascript incorporato che restituirà vero se qualsiasi elemento

77
00:06:27,290 --> 00:06:29,930
nei pasti preferiti corrisponde a questa condizione.

78
00:06:29,930 --> 00:06:35,570
Quindi, se il preferito è vero, sappiamo che questo articolo è un preferito e quindi possiamo usare il

79
00:06:35,570 --> 00:06:40,300
preferito come valore per è fav che passiamo come parametro iniziale alla schermata dei dettagli

80
00:06:40,460 --> 00:06:44,930
del pasto e ora questa stella tremolante che inizialmente è vuota dovrebbe essere andato.

81
00:06:44,930 --> 00:06:50,630
Ora, se lo segnalo come preferito qui e lascio questo e torno, è compilato

82
00:06:50,630 --> 00:06:51,550
fin

83
00:06:51,590 --> 00:06:56,660
dall'inizio, anche sullo schermo preferito ovviamente. Ecco, questo è il modo in cui possiamo lavorare

84
00:06:56,730 --> 00:06:58,830
con i preferiti, ora assicuriamoci di mostrare

85
00:06:58,830 --> 00:07:03,660
un testo fittizio qui sulla schermata dei preferiti nel caso in cui non abbiamo dati da

86
00:07:03,680 --> 00:07:05,400
visualizzare altrimenti e, successivamente, prendiamoci

87
00:07:05,400 --> 00:07:06,960
cura dei nostri filtri.