1
00:00:02,370 --> 00:00:08,100
Ora con i filtri renderizzati qui, ovviamente sarebbe bello avere un pulsante di salvataggio qui in alto che ci

2
00:00:08,100 --> 00:00:11,840
consente di salvare tutte le modifiche ai filtri che abbiamo fatto.

3
00:00:11,940 --> 00:00:16,530
Quindi nella schermata dei filtri, abbiamo già un pulsante di intestazione su headerLeft, ora voglio

4
00:00:16,530 --> 00:00:23,430
anche averne uno su headerRight, quindi a destra della mia intestazione. Quindi headerRight qui è fondamentalmente lo stesso di quello qui,

5
00:00:23,430 --> 00:00:28,050
quindi possiamo semplicemente copiarlo qui perché vogliamo avere i pulsanti di intestazione lì con

6
00:00:28,050 --> 00:00:35,280
un pulsante, che sarà il pulsante di salvataggio e l'icona che possiamo usare lì è ad esempio e di Ovviamente puoi

7
00:00:35,280 --> 00:00:41,250
sceglierne uno diverso ma qui, andrò ad esempio con il salvataggio e ora quando questo viene premuto,

8
00:00:41,400 --> 00:00:44,940
sarà un po 'complicato. Naturalmente, possiamo attivare una

9
00:00:44,940 --> 00:00:48,710
funzione e possiamo consolare i filtri di salvataggio del registro qui.

10
00:00:48,900 --> 00:00:54,000
Ora la logica effettiva per il salvataggio e l'applicazione dei filtri è qualcosa di cui ci

11
00:00:54,120 --> 00:00:57,150
occuperemo nel modulo successivo, ma c'è ancora qualche problema.

12
00:00:57,720 --> 00:01:01,530
Se lo salvo in questo modo e andiamo ai filtri,

13
00:01:01,530 --> 00:01:12,150
ovviamente possiamo premere questo, questo funziona ma ciò che sarebbe bello è che poi raccogliamo davvero il nostro stato attuale di filtri, quindi fondamentalmente otteniamo un'istantanea del nostro

14
00:01:12,150 --> 00:01:19,170
stato attuale qui e per il momento registralo sulla console, nel modulo successivo applica questo in qualche modo per

15
00:01:19,320 --> 00:01:26,740
filtrare le ricette che stiamo mostrando sugli altri schermi. Ora questo può sembrare banale ma avremo un problema qui, i

16
00:01:26,740 --> 00:01:28,910
nostri filtri, quindi le informazioni,

17
00:01:29,110 --> 00:01:36,360
quali filtri sono impostati, sono tutte memorizzate in queste variabili di stato qui, a destra e fa parte del nostro componente,

18
00:01:36,370 --> 00:01:38,560
il nostro pulsante è comunque nella

19
00:01:38,770 --> 00:01:41,530
navigazione opzioni e sì, lì otteniamo i dati

20
00:01:41,530 --> 00:01:47,440
istantanei che, ad esempio, ci danno il sostegno alla navigazione alla fine, ma ciò che non abbiamo

21
00:01:47,450 --> 00:01:52,990
qui è l'accesso allo stato del nostro componente e questo è ciò di cui ho bisogno

22
00:01:52,990 --> 00:01:57,970
qui e ora questo qui è davvero un modello importante che potrebbe apparire come uno

23
00:01:58,540 --> 00:02:08,020
strano hack o soluzione alternativa ma che è il modo di comunicare effettivamente tra le opzioni di navigazione e il componente se si dipende dalla modifica dei dati

24
00:02:08,020 --> 00:02:13,150
nel componente all'interno delle opzioni di navigazione. Pertanto, nelle opzioni di

25
00:02:13,150 --> 00:02:18,830
navigazione, sono necessarie informazioni sui dati modificati nel componente.

26
00:02:18,840 --> 00:02:24,980
Questo è anche un approccio che trovi tra i documenti ufficiali della navigazione. Possiamo usare i parametri, così quella cosa che

27
00:02:25,190 --> 00:02:30,940
passiamo tra le schermate, per comunicare tra il nostro componente e le opzioni di navigazione e questo

28
00:02:31,010 --> 00:02:35,070
potrebbe sembrare strano ma questo è esattamente ciò che faremo ora.

29
00:02:36,360 --> 00:02:44,170
Diciamo qui nel nostro componente, aggiungiamo una nuova funzione e chiamerò questa funzione qui salvando i

30
00:02:44,460 --> 00:02:46,950
filtri, puoi nominarla come vuoi.

31
00:02:47,000 --> 00:02:49,970
È una funzione che non accetta argomenti ma che

32
00:02:51,110 --> 00:02:57,410
ha un lavoro, creerà una costante di filtri applicati, ad esempio che è un oggetto che raccoglie i nostri filtri.

33
00:02:57,410 --> 00:03:02,300
Quindi lì potremmo avere glutenFree come chiave e memorizziamo isGlutenFree come

34
00:03:02,300 --> 00:03:07,250
valore, abbiamo lattosioFree come chiave e memorizziamo il nostro attuale valore di

35
00:03:07,250 --> 00:03:08,480
stato isLactoseFree.

36
00:03:08,690 --> 00:03:17,540
Facciamo lo stesso per i vegani con isVegan e facciamo lo stesso per isVegetarian e isVegetarian, come quello

37
00:03:17,540 --> 00:03:23,930
e in seguito, consolerò il log di questa cosa sui filtri applicati.

38
00:03:24,070 --> 00:03:32,770
Ora il fatto è che vorrei dare accesso a questa funzione che è parte del mio componente per le mie opzioni di navigazione in modo

39
00:03:32,770 --> 00:03:38,080
da poter attivare questa funzione dall'interno delle opzioni di navigazione e per questo, possiamo usare i

40
00:03:38,200 --> 00:03:38,890
parametri.

41
00:03:42,490 --> 00:03:49,300
Aggiungiamo l'effetto d'uso in modo da avere un modo di eseguire il codice ogni volta che

42
00:03:49,300 --> 00:03:58,810
il nostro stato cambia perché è quando voglio inoltrare questa funzione aggiornata che sostanzialmente cattura il mio stato corrente alle mie opzioni

43
00:03:58,810 --> 00:03:59,830
di navigazione.

44
00:03:59,830 --> 00:04:06,280
Quindi, qui, posso aggiungere l'effetto use e use effect prende una funzione che viene eseguita ogni volta

45
00:04:06,280 --> 00:04:16,460
che il nostro stato cambia e qualunque sia il componente renderizzato nuovamente e lì dentro, ora possiamo usare i parametri del set di navigazione degli oggetti di scena.

46
00:04:16,460 --> 00:04:18,130
Non abbiamo mai usato set

47
00:04:18,130 --> 00:04:20,400
params prima, abbiamo lavorato solo con get param.

48
00:04:20,510 --> 00:04:27,170
Non abbiamo usato set params perché prima abbiamo impostato params solo quando siamo passati a una nuova schermata, quindi ad

49
00:04:27,170 --> 00:04:33,530
esempio come nella schermata delle categorie, abbiamo passato i nostri parametri in questo modo alla nuova schermata ma possiamo usare

50
00:04:33,560 --> 00:04:42,160
set params per aggiornare i parametri valori per la schermata attualmente caricata. Ora qui su questa schermata, non abbiamo parametri, quindi è vuoto,

51
00:04:42,160 --> 00:04:44,600
quindi possiamo impostare i parametri su

52
00:04:45,690 --> 00:04:51,120
un oggetto nuovo di zecca qui e voglio aggiungere una voce lì, ma puoi

53
00:04:51,120 --> 00:04:52,810
aggiungerne quanti ne vuoi.

54
00:04:53,780 --> 00:05:04,040
Voglio aggiungere una chiave di salvataggio e puoi prendere qualsiasi nome per quella chiave che desideri e puntare su filtri di salvataggio,

55
00:05:04,060 --> 00:05:08,520
quindi con questa funzione. Non eseguo la funzione, non aggiungo

56
00:05:08,580 --> 00:05:10,050
parentesi, mi limito

57
00:05:10,080 --> 00:05:16,740
a indicarlo, utilizzo solo questa variabile che contiene un puntatore a questa funzione alla fine e inoltro questo

58
00:05:16,740 --> 00:05:23,250
valore, quindi inoltra questo puntatore o memorizza questo puntatore in quella funzione in quella chiave di salvataggio, in

59
00:05:23,250 --> 00:05:28,230
quell'oggetto che ora imposto come parametri in questa schermata, nella schermata dei filtri.

60
00:05:28,430 --> 00:05:34,280
Questo ci consente di andare alle opzioni di navigazione e lì abbiamo accesso ai dati

61
00:05:34,340 --> 00:05:43,310
di navigazione e quindi alla navigazione a destra e ciò significa che qui per il pulsante di salvataggio, quando si preme questo, possiamo effettivamente

62
00:05:43,310 --> 00:05:46,790
utilizzare navData. navigazione. getParam, è

63
00:05:46,790 --> 00:05:53,060
così che possiamo recuperare un parametro ed è disponibile anche qui nelle opzioni di navigazione,

64
00:05:53,060 --> 00:06:03,270
salva e posso recuperare quel parametro di salvataggio che sto impostando qui in uso effetto e so che è super strano la prima volta che

65
00:06:03,280 --> 00:06:08,120
vedi questo e sembra un trucco davvero sporco ma non lo è.

66
00:06:08,200 --> 00:06:14,230
Questo è un modo valido di comunicare tra il componente e le opzioni di navigazione che in genere

67
00:06:14,230 --> 00:06:18,300
è necessario quando si hanno elementi di azione nelle opzioni di navigazione.

68
00:06:18,310 --> 00:06:26,880
Questo ci consentirà di accedere ai nostri parametri e lì accediamo al parametro save, il parametro save sarà questa funzione e aggiorneremo il valore

69
00:06:27,600 --> 00:06:33,180
in quel parametro ogni volta che il nostro stato cambia e dobbiamo farlo perché in questa

70
00:06:33,180 --> 00:06:38,880
funzione, questo viene ricreato ogni volta il nostro stato cambia e registra gli ultimi valori di

71
00:06:38,880 --> 00:06:40,530
stato e questo è

72
00:06:40,620 --> 00:06:45,420
ovviamente ciò che vogliamo quando questa funzione viene eseguita alla fine con l'aiuto

73
00:06:45,750 --> 00:06:49,110
di parametri attraverso quel pulsante nelle opzioni di navigazione.

74
00:06:49,110 --> 00:06:54,300
Quindi usiamo params come un modo di comunicare tra il nostro componente e le

75
00:06:54,300 --> 00:06:59,730
opzioni di navigazione, una sorta di soluzione alternativa, ma in effetti, quello che trovi anche

76
00:06:59,730 --> 00:07:07,390
nei documenti ufficiali e il modo in cui comunichi qui. Ora, prima di salvarlo, ci sono due cose che dobbiamo fare però, usare

77
00:07:07,390 --> 00:07:14,320
effect adesso funziona ogni volta che questo componente si aggiorna. Alla fine, dovrebbe essere eseguito solo quando i filtri di salvataggio contengono un nuovo valore.

78
00:07:14,440 --> 00:07:20,740
Quindi aggiungerò il secondo argomento per usare l'effetto che è questo array di dipendenze e lì, salvare i filtri, quindi questa variabile

79
00:07:20,980 --> 00:07:23,530
qui che contiene una funzione è una dipendenza

80
00:07:23,530 --> 00:07:26,470
e in questo momento, questo verrà sempre ricostruito quando si

81
00:07:26,470 --> 00:07:30,900
ricostruisce il componente, quindi non lo è davvero una dipendenza che ci aiuta, ma ripareremo

82
00:07:31,090 --> 00:07:37,600
presto questo e anche gli oggetti di scena sono una dipendenza. Ora, in realtà, per evitare ri-rendering non necessari ogni

83
00:07:37,600 --> 00:07:39,140
volta che qualcosa nel

84
00:07:39,370 --> 00:07:48,330
componente param cambia, userò un modo diverso di estrarre il mio puntello di navigazione, userò la destrutturazione qui, in questo modo, la navigazione è uguale

85
00:07:48,870 --> 00:07:49,770
a puntelli.

86
00:07:49,770 --> 00:07:56,350
Questa è una sintassi che usa la destrutturazione degli oggetti, il che significa che oggetti di scena è un oggetto e questo estrae la chiave di navigazione e la

87
00:07:56,350 --> 00:08:02,460
memorizza in una costante nuova con lo stesso nome, quindi della stessa navigazione. Memorizza ora il valore nel puntello di

88
00:08:02,460 --> 00:08:05,560
navigazione in quella costante di navigazione, questo è ciò

89
00:08:05,560 --> 00:08:11,940
che fa la sintassi e i vantaggi che ora abbiamo una costante di navigazione qui che possiamo usare in

90
00:08:11,940 --> 00:08:17,780
uso senza effetti puntelli perché ora li abbiamo memorizzati in una costante separata e ora possiamo aggiungere

91
00:08:17,820 --> 00:08:21,860
questo come una dipendenza, il che significa che quando questo cambia,

92
00:08:21,990 --> 00:08:27,500
questo verrà ricostruito ma se qualcos'altro cambia negli oggetti di scena, questo non eseguirà inutilmente l'effetto.

93
00:08:27,750 --> 00:08:34,350
Ora per essere sicuri che il salvataggio dei filtri si aggiorni solo quando il nostro stato cambia, possiamo importare l'uso dell'hook

94
00:08:34,350 --> 00:08:38,000
di callback da React, un altro hook incorporato in React e questo

95
00:08:38,080 --> 00:08:43,560
ci consente di avvolgere una funzione in modo che questa funzione sia effettivamente memorizzata nella cache da React

96
00:08:43,560 --> 00:08:46,710
e venga ricreata se le sue dipendenze sono cambiate.

97
00:08:46,710 --> 00:08:53,610
Lo avvolgiamo attorno alle nostre funzioni di salvataggio dei filtri, proprio in questo modo, quindi passiamo questa funzione

98
00:08:53,610 --> 00:08:56,010
come argomento per usare il callback

99
00:08:56,010 --> 00:09:01,710
e usare il callback prende anche un secondo argomento che è un array di dipendenze

100
00:09:01,710 --> 00:09:03,300
e lì, dobbiamo

101
00:09:03,300 --> 00:09:09,930
specificare tutte le dipendenze che abbiamo qui ciò potrebbe cambiare e ciò ci porterebbe a ricreare quella funzione

102
00:09:09,930 --> 00:09:18,410
e ciò accade essenzialmente se uno dei quattro stati qui cambia. Quindi isGlutenFree, isLactoseFree, isVegan e isVegetarian sono ora tutte dipendenze del

103
00:09:18,420 --> 00:09:23,610
callback di utilizzo e ciò significa che questa funzione del componente qui verrà ricreata

104
00:09:23,730 --> 00:09:26,160
se uno di questi stati qui

105
00:09:26,310 --> 00:09:32,210
cambia, se qualcos'altro provoca il rendering del componente, non lo ricreamo e questa è a sua

106
00:09:32,310 --> 00:09:37,410
volta importante perché quella funzione di salvataggio dei filtri è una dipendenza dell'effetto d'uso.

107
00:09:37,530 --> 00:09:43,620
Quindi, se questo viene ricreato, usa di nuovo effect effect che aggiorna i nostri parametri e vogliamo mantenerlo al minimo

108
00:09:43,620 --> 00:09:48,340
e non aggiornare costantemente i nostri parametri, ma lo facciamo davvero solo se dobbiamo farlo.

109
00:09:49,950 --> 00:09:56,790
Con questo in atto, ora dovremmo essere in grado di premere il pulsante Salva e vedere i filtri che abbiamo

110
00:09:56,850 --> 00:09:59,250
scelto, quindi andiamo ai filtri qui e

111
00:10:01,970 --> 00:10:03,770
ora questo si interrompe.

112
00:10:03,770 --> 00:10:06,000
Hai idea del perché si rompa?

113
00:10:06,980 --> 00:10:14,380
Il problema è che qui ho una navigazione come dipendenza nell'effetto d'uso e ho spiegato perché ce l'ho, giusto, che non voglio avere

114
00:10:14,380 --> 00:10:21,090
oggetti di scena nella sua interezza e così via. Un problema è che, quando chiamiamo set params,

115
00:10:21,100 --> 00:10:27,970
alla fine aggiungiamo nuovi parametri al nostro navigatore e ciò che fa anche questo fa cambiare la

116
00:10:27,970 --> 00:10:28,770
navigazione.

117
00:10:28,900 --> 00:10:31,150
Quindi alla fine, ho un ciclo infinito qui.

118
00:10:31,300 --> 00:10:36,810
Se rimuovo la navigazione qui come dipendenza, allora funzionerà. Se ora salviamo questo, ora se

119
00:10:36,820 --> 00:10:42,550
chiudi entrambe le app qui con l'aiuto dei task manager e poi lo

120
00:10:43,120 --> 00:10:50,230
riavvii su entrambi i sistemi operativi, vedrai che ora funziona davvero e puoi premere Salva qui, ora

121
00:10:50,230 --> 00:10:53,220
cosa Non vedrò l'output nel registro qui.

122
00:10:53,230 --> 00:10:58,960
Ciò ha molto senso, perché se dai un'occhiata più da vicino a questi pulsanti di salvataggio

123
00:10:59,780 --> 00:11:06,310
nella nostra intestazione, allora quello che sto facendo qui su onPress è che sto eseguendo questa funzione, ma cosa fa?

124
00:11:06,370 --> 00:11:11,350
Recupera i nostri parametri salvati nella o memorizzati nella chiave di salvataggio e

125
00:11:11,350 --> 00:11:12,570
che cos'è?

126
00:11:12,580 --> 00:11:17,770
Bene, come accennato in precedenza, un puntatore alla funzione Salva filtri, quindi recuperiamo quel puntatore.

127
00:11:18,250 --> 00:11:22,630
Se poi non facciamo nulla con quel puntatore, non stiamo facendo nulla.

128
00:11:22,630 --> 00:11:27,940
Questo è un puntatore a una funzione, quindi ovviamente dobbiamo eseguirlo in questo modo aggiungendo parentesi.

129
00:11:27,940 --> 00:11:34,120
In alternativa, semplicemente ci liberiamo di questa funzione di freccia anonima qui e ci limitiamo a vincolare onPress

130
00:11:34,120 --> 00:11:40,420
al risultato del recupero del nostro puntatore qui in quel modo perché allora questo puntatore alla funzione verrà eseguito

131
00:11:40,420 --> 00:11:42,270
per noi quando lo premiamo, questa

132
00:11:42,280 --> 00:11:43,210
è l'alternativa.

133
00:11:43,960 --> 00:11:48,370
Quindi ora se lo salviamo e quindi lo lasciamo ricaricare e

134
00:11:48,370 --> 00:11:55,200
torniamo ai filtri, se premo salva qui, ora vediamo un output nel registro, scorriamo un po 'qui, tutto

135
00:11:55,300 --> 00:11:56,940
è impostato su falso.

136
00:11:57,040 --> 00:12:02,800
Se ora imposto il lattosio e il vegetariano su true e premo il salvataggio, vediamo un altro log

137
00:12:03,070 --> 00:12:09,080
e lì effettivamente il vegetariano e il lattosio è impostato su true, che è esattamente quello che ho qui.

138
00:12:09,100 --> 00:12:14,420
Quindi ora che funziona, confermiamo che funziona anche su Android andando a filtrare anche lì, impostiamo lactoseFree

139
00:12:14,440 --> 00:12:18,480
su true e salviamo questo e se lo facciamo, questo è il nostro

140
00:12:18,520 --> 00:12:20,080
output Android qui, lattactFree

141
00:12:20,110 --> 00:12:22,290
è vero, tutto il resto è

142
00:12:22,330 --> 00:12:24,550
falso , quindi ora funziona anche questo.

143
00:12:24,550 --> 00:12:29,830
Quindi questa soluzione alternativa può essere un po 'complicata per avvolgere la testa ed evitare

144
00:12:30,020 --> 00:12:31,270
anche questo loop

145
00:12:31,330 --> 00:12:38,230
infinito qui è importante, assicurarti che utilizzerai la richiamata qui per evitare ricostruzioni inutili di questa funzione anche qui

146
00:12:38,230 --> 00:12:43,850
è qualcosa che dovresti fare, in modo che quando aggiorna i parametri e quindi questo componente

147
00:12:43,850 --> 00:12:48,950
ricostruisce, non ricostruisci anche quella funzione e quindi inserisci anche un ciclo infinito.

148
00:12:48,950 --> 00:12:54,380
Ma con ciò, abbiamo un modo di comunicare tra il componente e le opzioni di navigazione che è

149
00:12:54,380 --> 00:13:00,470
in genere un modello di cui hai bisogno quando hai elementi di azione nella barra delle azioni e vuoi attivare qualcosa

150
00:13:00,470 --> 00:13:04,720
che dipende dai dati gestiti nel tuo componente con l'aiuto di questi pulsanti.