1
00:00:02,370 --> 00:00:08,100
Agora, com os filtros renderizados aqui, é claro que seria bom ter um botão de salvar aqui na parte

2
00:00:08,100 --> 00:00:11,840
superior que nos permite salvar quaisquer alterações nos filtros que fizemos.

3
00:00:11,940 --> 00:00:16,530
Portanto, na tela de filtros, já temos um botão de cabeçalho em headerLeft, agora também

4
00:00:16,530 --> 00:00:23,430
quero ter um em headerRight, à direita do meu cabeçalho. Então headerRight aqui é basicamente o mesmo que o temos

5
00:00:23,430 --> 00:00:28,050
aqui, então podemos copiar isso aqui porque queremos ter botões de cabeçalho lá com

6
00:00:28,050 --> 00:00:35,280
um botão, que será o botão salvar e o ícone que podemos usar é, por exemplo e de Claro que você pode

7
00:00:35,280 --> 00:00:41,250
escolher um diferente, mas aqui, eu irei com, por exemplo, salvar e agora, quando isso for pressionado, isso

8
00:00:41,400 --> 00:00:44,940
será um pouco complicado. Obviamente, podemos disparar uma

9
00:00:44,940 --> 00:00:48,710
função e podermos consolar os filtros para salvar logs aqui.

10
00:00:48,900 --> 00:00:54,000
Agora, a lógica real para salvar e aplicar filtros é algo que trataremos no próximo módulo,

11
00:00:54,120 --> 00:00:57,150
mas, ainda assim, há algum problema com isso.

12
00:00:57,720 --> 00:01:01,530
Se eu salvá-lo assim e formos aos filtros, é claro

13
00:01:01,530 --> 00:01:12,150
que podemos pressionar isso, isso funciona, mas o que seria bom é que realmente reunamos nosso estado atual de filtros, então, basicamente, tire uma foto do nosso

14
00:01:12,150 --> 00:01:19,170
estado atual aqui e por enquanto, registre-o no console; no próximo módulo, aplique-o de alguma forma para filtrar

15
00:01:19,320 --> 00:01:26,740
as receitas que estamos mostrando nas outras telas. Agora isso pode parecer trivial, mas teremos um problema aqui,

16
00:01:26,740 --> 00:01:28,910
nossos filtros, portanto, as

17
00:01:29,110 --> 00:01:36,360
informações, quais filtros estão configurados, tudo armazenado nessas variáveis de estado aqui, certo e faz parte do nosso componente, nosso

18
00:01:36,370 --> 00:01:38,560
botão, porém, está na navegação opções

19
00:01:38,770 --> 00:01:41,530
e sim, lá obtemos os dados de snap

20
00:01:41,530 --> 00:01:47,440
que, por exemplo, nos dão o suporte de navegação no final, mas o que não temos aqui

21
00:01:47,450 --> 00:01:52,990
é acesso ao estado do nosso componente e é isso que eu preciso aqui e agora

22
00:01:52,990 --> 00:01:57,970
isso aqui é realmente um padrão importante que pode parecer um hack ou solução

23
00:01:58,540 --> 00:02:08,020
alternativa estranho, mas que é a maneira de se comunicar de fato entre as opções de navegação e o componente, se você depende da alteração de dados

24
00:02:08,020 --> 00:02:13,150
no componente dentro das opções de navegação. Portanto, nas opções de navegação,

25
00:02:13,150 --> 00:02:18,830
você precisa de informações sobre os dados que foram alterados no seu componente.

26
00:02:18,840 --> 00:02:24,980
Essa também é uma abordagem que você encontra nos documentos oficiais da navegação a propósito. Podemos usar parâmetros, para que aquilo que

27
00:02:25,190 --> 00:02:30,940
passamos entre as telas, comunique-se entre nosso componente e as opções de navegação, e isso

28
00:02:31,010 --> 00:02:35,070
possa parecer estranho, mas é exatamente isso que faremos agora.

29
00:02:36,360 --> 00:02:44,170
Digamos que aqui em nosso componente, adicionamos uma nova função e vou nomear essa função aqui, salvar filtros,

30
00:02:44,460 --> 00:02:46,950
você pode nomear como quiser.

31
00:02:47,000 --> 00:02:49,970
É uma função que não aceita argumentos, mas

32
00:02:51,110 --> 00:02:57,410
que possui um trabalho, criará uma constante de filtros aplicados, por exemplo, que é um objeto que reúne nossos filtros.

33
00:02:57,410 --> 00:03:02,300
Portanto, podemos ter glutenFree como uma chave e armazenar isGlutenFree como um

34
00:03:02,300 --> 00:03:07,250
valor, ter lactoseFree como uma chave e armazenar nosso valor atual do

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

36
00:03:08,690 --> 00:03:17,540
Fazemos o mesmo para o vegan com isVegan e fazemos o mesmo para isVegetarian e isVegetarian,

37
00:03:17,540 --> 00:03:23,930
assim e, posteriormente, eu consolarei o registro desse filtro aplicado.

38
00:03:24,070 --> 00:03:32,770
Agora, gostaria de dar acesso a essa função, que faz parte do meu componente, às minhas opções de navegação, para que eu possa

39
00:03:32,770 --> 00:03:38,080
acionar essa função de dentro das opções de navegação e, para isso, podemos usar

40
00:03:38,200 --> 00:03:38,890
parâmetros.

41
00:03:42,490 --> 00:03:49,300
Vamos adicionar o efeito use para que possamos executar o código sempre que nosso estado

42
00:03:49,300 --> 00:03:58,810
for alterado, porque é nesse momento que desejo encaminhar essa função atualizada, que basicamente captura meu estado atual para as minhas opções

43
00:03:58,810 --> 00:03:59,830
de navegação.

44
00:03:59,830 --> 00:04:06,280
Então, aqui, eu posso adicionar use effect e use effect assume uma função que é

45
00:04:06,280 --> 00:04:16,460
executada sempre que nosso estado é alterado e qualquer que seja o componente renderizado novamente, e agora podemos usar os parâmetros de conjunto de navegação props.

46
00:04:16,460 --> 00:04:18,130
Não usamos parâmetros definidos

47
00:04:18,130 --> 00:04:20,400
antes, apenas trabalhamos com get param.

48
00:04:20,510 --> 00:04:27,170
Não usamos parâmetros definidos porque, antes de configurá-los quando navegamos para uma nova tela, por exemplo, como

49
00:04:27,170 --> 00:04:33,530
na tela de categorias, passamos nossos parâmetros dessa maneira para a nova tela, mas podemos usar parâmetros

50
00:04:33,560 --> 00:04:42,160
para atualizar os parâmetros valores para a tela atualmente carregada. Agora, aqui nesta tela, não temos parâmetros, por isso está

51
00:04:42,160 --> 00:04:44,600
vazio; portanto, podemos definir parâmetros para

52
00:04:45,690 --> 00:04:51,120
um novo objeto aqui e quero adicionar uma entrada lá, mas você pode

53
00:04:51,120 --> 00:04:52,810
adicionar quantos quiser.

54
00:04:53,780 --> 00:05:04,040
Quero adicionar uma chave de salvamento e você pode pegar qualquer nome para a chave que deseja e apontar para salvar

55
00:05:04,060 --> 00:05:08,520
filtros, portanto, nesta função. Eu não executo a função,

56
00:05:08,580 --> 00:05:10,050
não adiciono parênteses,

57
00:05:10,080 --> 00:05:16,740
apenas aponto para ela, apenas uso essa variável que mantém um ponteiro nessa função no final e encaminhar

58
00:05:16,740 --> 00:05:23,250
esse valor; portanto, encaminhe esse ponteiro ou armazene esse ponteiro para essa função na chave de salvar,

59
00:05:23,250 --> 00:05:28,230
naquele objeto que agora defini como parâmetros nesta tela, na tela de filtros.

60
00:05:28,430 --> 00:05:34,280
Isso nos permite ir para as opções de navegação e aí temos acesso aos

61
00:05:34,340 --> 00:05:43,310
dados de navegação e, portanto, à navegação correta, o que significa que aqui para o botão salvar, ao pressionar isso, podemos realmente

62
00:05:43,310 --> 00:05:46,790
usar navData. navegação. getParam, é

63
00:05:46,790 --> 00:05:53,060
assim que podemos recuperar um parâmetro e também está disponível aqui nas opções de navegação,

64
00:05:53,060 --> 00:06:03,270
save e eu posso recuperar esse parâmetro save que estou definindo aqui em uso e sei que isso é super estranho na primeira vez que

65
00:06:03,280 --> 00:06:08,120
você vê isso e parece um hack muito sujo, mas não é.

66
00:06:08,200 --> 00:06:14,230
Essa é uma maneira válida de se comunicar entre o componente e as opções de navegação que você

67
00:06:14,230 --> 00:06:18,300
normalmente precisa ao ter itens de ação nas opções de navegação.

68
00:06:18,310 --> 00:06:26,880
Isso nos dará acesso aos nossos parâmetros e lá acessamos o parâmetro save, o parâmetro save será esta função e atualizamos o valor

69
00:06:27,600 --> 00:06:33,180
nesse parâmetro sempre que nosso estado for alterado e precisamos fazer isso porque nessa função,

70
00:06:33,180 --> 00:06:38,880
isso é recriado sempre que nosso estado muda e registra os valores mais recentes, e

71
00:06:38,880 --> 00:06:40,530
é claro que

72
00:06:40,620 --> 00:06:45,420
é isso que queremos quando essa função é executada eventualmente com a ajuda

73
00:06:45,750 --> 00:06:49,110
de parâmetros através desse botão nas opções de navegação.

74
00:06:49,110 --> 00:06:54,300
Portanto, usamos parâmetros como um meio de comunicação entre nosso componente e as opções

75
00:06:54,300 --> 00:06:59,730
de navegação, como uma solução alternativa, mas, de fato, o que você encontra nos documentos

76
00:06:59,730 --> 00:07:07,390
oficiais e a maneira como você se comunica aqui. Agora, antes de salvarmos isso, há duas coisas que precisamos fazer, o use

77
00:07:07,390 --> 00:07:14,320
effect agora é executado sempre que esse componente é atualizado. No final, ele deve ser executado apenas quando os filtros de salvamento tiverem um novo valor.

78
00:07:14,440 --> 00:07:20,740
Então, adicionarei o segundo argumento para usar o efeito, que é esse conjunto de dependências, e salve os filtros. Portanto, essa

79
00:07:20,980 --> 00:07:23,530
variável que contém uma função é uma

80
00:07:23,530 --> 00:07:26,470
dependência e, no momento, isso sempre será reconstruída quando

81
00:07:26,470 --> 00:07:30,900
o componente for reconstruído, por isso não é realmente uma dependência que nos ajuda,

82
00:07:31,090 --> 00:07:37,600
mas em breve corrigiremos isso e props também é uma dependência. Agora, para evitar renderizações desnecessárias sempre que algo

83
00:07:37,600 --> 00:07:39,140
no componente param for

84
00:07:39,370 --> 00:07:48,330
alterado, usarei uma maneira diferente de extrair meu suporte de navegação, usarei a desestruturação aqui, assim, a navegação é igual a

85
00:07:48,870 --> 00:07:49,770
adereços.

86
00:07:49,770 --> 00:07:56,350
Esta é uma sintaxe que usa a destruição de objeto, o que significa que props é um objeto e isso puxa a tecla de navegação e a

87
00:07:56,350 --> 00:08:02,460
armazena em uma constante constante do mesmo nome, para a mesma navegação. Ele armazena o valor no suporte de

88
00:08:02,460 --> 00:08:05,560
navegação nessa constante de navegação agora, é isso que

89
00:08:05,560 --> 00:08:11,940
a sintaxe faz e as vantagens que agora temos uma constante de navegação aqui que podemos usar no efeito

90
00:08:11,940 --> 00:08:17,780
de uso sem acessórios, porque temos isso armazenado em uma constante separada agora e agora podemos adicionar

91
00:08:17,820 --> 00:08:21,860
isso como uma dependência, o que significa que, quando isso mudar,

92
00:08:21,990 --> 00:08:27,500
isso será reconstruído, mas se algo mais nos objetos mudar, isso não executará desnecessariamente o efeito.

93
00:08:27,750 --> 00:08:34,350
Agora, para garantir que os filtros salvos sejam atualizados somente quando nosso estado for alterado, podemos importar o uso de gancho

94
00:08:34,350 --> 00:08:38,000
de retorno de chamada do React, outro gancho incorporado ao React

95
00:08:38,080 --> 00:08:43,560
e isso nos permite agrupar uma função para que essa função seja realmente armazenada em cache pelo

96
00:08:43,560 --> 00:08:46,710
React e seja recriada apenas se suas dependências mudaram.

97
00:08:46,710 --> 00:08:53,610
Envolvemos isso em torno de nossas funções de salvar filtros, assim, assim, passamos essa função como argumento para usar

98
00:08:53,610 --> 00:08:56,010
o retorno de chamada e o

99
00:08:56,010 --> 00:09:01,710
retorno de chamada também recebe um segundo argumento, que é uma matriz de dependências, e

100
00:09:01,710 --> 00:09:03,300
precisamos especificar todas

101
00:09:03,300 --> 00:09:09,930
as dependências que temos aqui isso poderia mudar e isso nos levaria a recriar essa função, e esse

102
00:09:09,930 --> 00:09:18,410
é essencialmente o caso se um dos quatro estados aqui mudar. Portanto, isGlutenFree, isLactoseFree, isVegan e isVegetarian agora são todas dependências de retorno de

103
00:09:18,420 --> 00:09:23,610
chamada de uso e isso significa que essa função de componente aqui será recriada se

104
00:09:23,730 --> 00:09:26,160
algum desses estados mudar, se algo

105
00:09:26,310 --> 00:09:32,210
mais fizer com que esse componente seja renderizado novamente, não iremos recriar isso e isso, por sua vez,

106
00:09:32,310 --> 00:09:37,410
é importante porque essa função de salvar filtros é uma dependência do efeito de uso.

107
00:09:37,530 --> 00:09:43,620
Portanto, se isso for recriado, use o efeito novamente, que atualiza nossos parâmetros, e queremos manter isso no mínimo

108
00:09:43,620 --> 00:09:48,340
e não atualizar constantemente nossos parâmetros, mas realmente só o fazemos se for necessário.

109
00:09:49,950 --> 00:09:56,790
Com isso, agora devemos pressionar o botão Salvar e ver os filtros que escolhemos, então

110
00:09:56,850 --> 00:09:59,250
vamos aos filtros aqui e

111
00:10:01,970 --> 00:10:03,770
agora isso quebra.

112
00:10:03,770 --> 00:10:06,000
Você tem alguma idéia de por que isso iria quebrar?

113
00:10:06,980 --> 00:10:14,380
O problema é que tenho uma navegação aqui como efeito de dependência no uso e expliquei por que tenho, certo, que não quero

114
00:10:14,380 --> 00:10:21,090
ter adereços na sua totalidade e assim por diante. Um problema é que, quando chamamos de parâmetros fixos,

115
00:10:21,100 --> 00:10:27,970
adicionamos novos parâmetros ao nosso navegador no final e o que isso também faz é causar alterações na

116
00:10:27,970 --> 00:10:28,770
navegação.

117
00:10:28,900 --> 00:10:31,150
Então, no final, eu tenho um loop infinito aqui.

118
00:10:31,300 --> 00:10:36,810
Se eu remover a navegação aqui como uma dependência, isso funcionará. Se agora salvarmos isso, agora, se você

119
00:10:36,820 --> 00:10:42,550
fechar os dois aplicativos aqui com a ajuda dos gerenciadores de tarefas e depois reiniciá-lo nos

120
00:10:43,120 --> 00:10:50,230
dois sistemas operacionais, verá que agora isso realmente funciona e você pode clicar em salvar aqui, agora o que você

121
00:10:50,230 --> 00:10:53,220
deseja ' Não verá a saída no log aqui.

122
00:10:53,230 --> 00:10:58,960
No entanto, isso faz muito sentido, porque se você olhar mais de perto esses botões de salvar em

123
00:10:59,780 --> 00:11:06,310
nosso cabeçalho, o que estou fazendo aqui no onPress é que, no final, estou executando esta função, mas o que isso faz?

124
00:11:06,370 --> 00:11:11,350
Ele recupera nossos parâmetros salvos na ou salvos na chave de salvamento e o

125
00:11:11,350 --> 00:11:12,570
que é isso?

126
00:11:12,580 --> 00:11:17,770
Bem, como mencionado anteriormente, um ponteiro na função de salvar filtros, então recuperamos esse ponteiro.

127
00:11:18,250 --> 00:11:22,630
Se não fizermos nada com esse ponteiro, não faremos nada.

128
00:11:22,630 --> 00:11:27,940
Esse é um ponteiro para uma função, então é claro que precisamos executá-lo dessa maneira adicionando parênteses.

129
00:11:27,940 --> 00:11:34,120
Como alternativa, simplesmente nos livramos dessa função de seta anônima aqui e ligamos onPress ao resultado

130
00:11:34,120 --> 00:11:40,420
de recuperar nosso ponteiro aqui dessa maneira, porque esse ponteiro na função será executado para nós quando

131
00:11:40,420 --> 00:11:42,270
pressionarmos isso, essa é

132
00:11:42,280 --> 00:11:43,210
a alternativa.

133
00:11:43,960 --> 00:11:48,370
Então agora, se salvarmos isso e, portanto, deixarmos isso recarregar e voltarmos

134
00:11:48,370 --> 00:11:55,200
aos filtros, se eu clicar em salvar aqui, agora veremos uma saída no log, vamos rolar um pouco aqui, tudo

135
00:11:55,300 --> 00:11:56,940
está definido como falso.

136
00:11:57,040 --> 00:12:02,800
Se eu agora definir lactoseFree e vegetariano como verdadeiro e clicar em salvar, veremos outro

137
00:12:03,070 --> 00:12:09,080
log e, de fato, vegetariano e lactoseFree serão definidos como verdadeiro, exatamente o que tenho aqui.

138
00:12:09,100 --> 00:12:14,420
Então, agora que está funcionando, vamos confirmar que também funciona no Android, indo para os filtros lá também,

139
00:12:14,440 --> 00:12:18,480
vamos definir lactoseFree como verdadeiro e salvar isso e, se o fizermos, essa é

140
00:12:18,520 --> 00:12:20,080
a nossa saída do

141
00:12:20,110 --> 00:12:22,290
Android aqui, lactoseFree é verdade, tudo o

142
00:12:22,330 --> 00:12:24,550
resto é falso , agora isso também funciona.

143
00:12:24,550 --> 00:12:29,830
Portanto, essa solução alternativa pode ser um pouco difícil de entender e evitar esse loop

144
00:12:30,020 --> 00:12:31,270
infinito aqui também

145
00:12:31,330 --> 00:12:38,230
é importante, certifique-se de que você usará o retorno de chamada aqui para evitar reconstruções desnecessárias dessa função aqui também

146
00:12:38,230 --> 00:12:43,850
é algo que você deve fazer. atualize os parâmetros e, portanto, esse componente será reconstruído, você

147
00:12:43,850 --> 00:12:48,950
também não reconstruirá essa função e, portanto, também entrará em um loop infinito.

148
00:12:48,950 --> 00:12:54,380
Mas com isso, temos uma maneira de nos comunicar entre as opções de componente e navegação, que

149
00:12:54,380 --> 00:13:00,470
normalmente é um padrão necessário quando você possui itens de ação em sua barra de ação e deseja acionar algo

150
00:13:00,470 --> 00:13:04,720
que depende dos dados gerenciados em seu componente com a ajuda desses botões.