1
00:00:02,630 --> 00:00:05,410
Vamos começar com os favoritos.

2
00:00:05,420 --> 00:00:13,270
Quero ter certeza de que, quando estou em uma receita, posso clicar nessa estrela e adicioná-la como favorita e mostrá-la aqui na

3
00:00:13,660 --> 00:00:18,490
tela favorita, onde atualmente não vejo nada porque removi esses favoritos fictícios.

4
00:00:19,880 --> 00:00:20,200
Para isso,

5
00:00:20,210 --> 00:00:25,830
vou começar na pasta da loja, na pasta de ações e adicionar uma nova pasta que também chamarei de refeições. js, você pode dar um nome diferente se isso for confuso

6
00:00:25,840 --> 00:00:30,570
para você, mas sim, esses dois arquivos de refeições. js aqui em ações

7
00:00:30,560 --> 00:00:34,970
e refeições. js em redutores e nas ações de refeições. js, configurarei

8
00:00:34,960 --> 00:00:41,900
algumas ações Redux que normalmente começam configurando alguns identificadores exclusivos que

9
00:00:41,930 --> 00:00:48,760
eu armazeno em constantes e que serão alternados entre os favoritos.

10
00:00:49,070 --> 00:00:50,710
Você pode usar o que quiser

11
00:00:50,780 --> 00:00:53,860
aqui, o valor que você armazena aqui geralmente é o mesmo identificador,

12
00:00:54,350 --> 00:00:59,570
portanto esse é o valor do identificador e é simplesmente armazenado em uma constante para que não tenhamos que digitar

13
00:00:59,570 --> 00:01:02,870
manualmente mais tarde, mas sempre podemos importar esta constante e evitar erros

14
00:01:02,870 --> 00:01:03,690
de digitação.

15
00:01:03,860 --> 00:01:05,440
Novamente, se for

16
00:01:05,440 --> 00:01:09,730
novo para você, verifique primeiro um recurso dedicado ao React Redux.

17
00:01:09,950 --> 00:01:12,680
Agora também usarei o padrão de criador de

18
00:01:12,680 --> 00:01:19,190
ação aqui, o que significa que tenho esse identificador aqui, mas agora também exportarei uma função que me cria uma ação,

19
00:01:19,280 --> 00:01:24,050
porque uma ação não é apenas um identificador frequentemente e, nesse caso, é o caso,

20
00:01:24,050 --> 00:01:29,630
também precisa de uma carga útil extra e, portanto, na verdade, temos uma ação que é um objeto

21
00:01:29,780 --> 00:01:35,930
com identificador e carga útil e, portanto, aqui, adicionarei uma função que me cria um objeto de ação e nomeei

22
00:01:35,930 --> 00:01:37,430
essa opção de alternância

23
00:01:37,490 --> 00:01:42,950
como favorita, selecione o identificador mas no caso camel, essa é uma função que pode receber alguns

24
00:01:42,950 --> 00:01:48,500
dados, porque eu vou chamá-lo e deve retornar um objeto Javascript que descreva essa ação, então digamos

25
00:01:48,500 --> 00:01:50,300
um tipo, é assim que

26
00:01:50,330 --> 00:01:55,010
você chama esse campo identificador mas geralmente você é livre para usar o que

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

28
00:01:55,670 --> 00:01:57,490
lá e, no meu caso, será

29
00:01:57,500 --> 00:02:03,700
o favorito alternado. Por isso, aponto para esse identificador. Utilizo essa string como identificador e qualquer dado extra que você

30
00:02:03,740 --> 00:02:09,500
desejar, por exemplo, aqui eu ' precisará ad d o ID da refeição que deve ser alternado e

31
00:02:09,500 --> 00:02:14,540
isso significa que essa função também precisa obter esse ID e uma entrada, porque, caso contrário,

32
00:02:14,540 --> 00:02:16,700
não posso armazená-lo na ação que criei.

33
00:02:16,710 --> 00:02:21,120
Portanto, este é o meu criador de ação para a ação favorita de alternância,

34
00:02:21,120 --> 00:02:27,810
agora no redutor, quero agir quando receber uma ação favorita de alternância e, para isso, usarei um padrão que você provavelmente

35
00:02:27,810 --> 00:02:28,370
já

36
00:02:28,380 --> 00:02:34,020
viu se já trabalhou com o Redux antes , Usarei uma instrução switch aqui e ativarei meu tipo

37
00:02:34,020 --> 00:02:40,890
de ação, pois lembre-se de que a ação será um objeto com uma propriedade de tipo que identifica a ação que ocorreu.

38
00:02:40,890 --> 00:02:45,330
Então, eu ligo esse tipo de ação e lida com casos diferentes para as diferentes ações

39
00:02:45,330 --> 00:02:46,650
que eu possa ter.

40
00:02:46,650 --> 00:02:53,040
Portanto, aqui tenho a ação de alternância favorita e, para isso, é necessário importar a alternância de favoritos das refeições de ações, e é

41
00:02:53,390 --> 00:02:58,590
por isso que estou armazenando isso na constante separada, porque agora não preciso digitar manualmente alternar os favoritos onde

42
00:02:58,590 --> 00:03:00,820
possa ter um erro de digitação lá, em

43
00:03:00,840 --> 00:03:07,410
vez disso, apenas uso a constante em que a string está armazenada. E agora aqui, executo a lógica que desejo executar para,

44
00:03:07,410 --> 00:03:13,310
então, trabalhar com essa ação e alterar meu estado, de modo que a refeição com o ID da refeição que

45
00:03:13,350 --> 00:03:19,470
faça parte da minha ação seja adicionada às refeições favoritas ou removida de lá, se já fazia parte porque é uma

46
00:03:19,470 --> 00:03:20,790
ação de alternância aqui.

47
00:03:20,820 --> 00:03:28,770
Quero adicionar itens que ainda não são favoritos. Quero remover itens que são. Nota lateral, na instrução switch, também adicionarei um

48
00:03:28,770 --> 00:03:33,150
caso padrão no qual acabei de retornar o estado inalterado.

49
00:03:33,150 --> 00:03:36,900
Nós realmente não deveríamos alcançar isso, mas, caso o façamos, bem, é isso que fazemos, mas

50
00:03:37,380 --> 00:03:40,800
voltando ao caso favorito de alternância. Agora, no final, quero

51
00:03:42,770 --> 00:03:48,740
descobrir se minha refeição com o ID faz parte da ação porque estou adicionando o ID

52
00:03:48,740 --> 00:03:50,450
da refeição à ação,

53
00:03:50,450 --> 00:03:52,550
se essa refeição já faz parte

54
00:03:52,550 --> 00:03:53,660
das refeições

55
00:03:53,690 --> 00:04:00,960
favoritas, se sim, quero remova-o, se não estiver, quero adicioná-lo. Então, para isso, começarei encontrando o índice da refeição na matriz de

56
00:04:00,960 --> 00:04:07,380
refeições favoritas, porque se for -1, sei que não encontrei um índice, portanto não fazia parte, se é maior ou igual

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

58
00:04:07,840 --> 00:04:13,540
zero, eu sei que o item fazia parte disso. Então, eu terei meu índice existente aqui e

59
00:04:13,540 --> 00:04:21,960
eu o obtenho usando as refeições favoritas do estado e lá eu digitei um sinal de igual e o estado é simplesmente meu instantâneo de estado

60
00:04:22,010 --> 00:04:27,510
atual que eu recebo e lá, teremos uma propriedade de refeições favoritas e posso use o método

61
00:04:27,510 --> 00:04:33,780
find index, um método Javascript normal que eu possa usar em matrizes para obter o índice de um item

62
00:04:33,840 --> 00:04:39,810
que corresponda a um determinado critério que eu configurei aqui em uma função que eu passo para encontrar o

63
00:04:40,230 --> 00:04:47,040
índice, essa função é executada em todas as refeições no array e, se retornar true, fornece o índice do elemento para

64
00:04:47,040 --> 00:04:48,610
o qual foi executado.

65
00:04:48,660 --> 00:04:56,900
Então aqui eu quero retornar verdadeiro se refeição. id é igual a ação. mealId. Isso significa simplesmente que a refeição

66
00:04:56,930 --> 00:05:02,090
que estou vendo em minhas refeições favoritas tem a mesma idéia que a refeição para a

67
00:05:02,090 --> 00:05:08,450
qual essa ação ocorre e isso significa que, se isso for verdade para qualquer item das refeições favoritas, que a

68
00:05:08,540 --> 00:05:13,490
refeição que estamos tentando alternar já faz parte dos favoritos, portanto, teremos que removê-lo, pois

69
00:05:13,490 --> 00:05:13,990
agora

70
00:05:13,990 --> 00:05:20,090
ele retornará o índice do item, portanto o índice existente será maior que -1 e, portanto, podemos usar esse

71
00:05:20,090 --> 00:05:21,120
índice para removê-lo.

72
00:05:21,170 --> 00:05:23,660
Se isso retornar verdadeiro para nenhum item, por isso, se no

73
00:05:23,720 --> 00:05:29,870
final retornar -1, eu sei que o item ainda não faz parte das refeições favoritas. Portanto, o índice existente contém informações muito importantes e,

74
00:05:29,870 --> 00:05:34,520
portanto, vou usá-lo aqui em uma instrução if e verificar se o índice

75
00:05:34,520 --> 00:05:40,760
existente é maior ou igual a 0, o que significa que já temos essa refeição como parte das

76
00:05:41,390 --> 00:05:43,040
refeições favoritas ou não.

77
00:05:43,040 --> 00:05:48,290
Agora, no caso se, portanto, o item já faz parte das refeições favoritas, desejo removê-lo.

78
00:05:48,290 --> 00:05:53,210
Então aqui, no final, retornarei um novo estado, porque no seu redutor, no final, você

79
00:05:53,210 --> 00:06:00,740
precisará retornar um novo estado, que é um novo objeto, onde primeiro copio o estado existente com o operador de dispersão aqui para

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

81
00:06:01,110 --> 00:06:05,810
todos os pares de valores-chave do estado existente, para que eu não perca nenhum

82
00:06:05,870 --> 00:06:06,980
estado e não

83
00:06:06,980 --> 00:06:12,200
substitua nenhum estado que não queira substituir e depois substituirei apenas as refeições favoritas, então adicionarei

84
00:06:12,200 --> 00:06:17,870
isso novamente para substituir as refeições favoritas existentes pelas minhas novas refeições favoritas, que no final devem

85
00:06:17,930 --> 00:06:21,520
ser as refeições favoritas antigas sem o item desse índice.

86
00:06:24,250 --> 00:06:30,360
E agora aqui para obter minhas refeições favoritas atualizadas, criarei uma nova constante, updatedFavMeals.

87
00:06:30,360 --> 00:06:39,470
Primeiro, criarei uma nova matriz e preencherei-a com minhas refeições existentes. Portanto, mova minhas refeições favoritas existentes assim e faço isso

88
00:06:39,470 --> 00:06:46,240
para criar uma cópia dessa matriz para não manipular a matriz original se agora começar a

89
00:06:46,250 --> 00:06:53,000
trabalhar nisso, porque agora quero usar meusFavMeals atualizados, chame a emenda aqui e remova o

90
00:06:53,660 --> 00:06:57,470
item no índice existente e somente esse item.

91
00:06:57,470 --> 00:07:03,950
Portanto, no final, isso pega o índice updatedFavMeals, edita-o e remove o item nesse índice e edita essa matriz,

92
00:07:04,250 --> 00:07:06,200
por isso copiei-o para

93
00:07:06,200 --> 00:07:12,110
não editar a matriz original e agora podemos usar essa matriz atualizadaFavMeals aqui e armazene isso de

94
00:07:12,110 --> 00:07:17,330
volta como refeições favoritas em nossa loja, porque essa será a matriz de refeições favoritas

95
00:07:17,390 --> 00:07:19,880
sem a refeição que acabamos de remover.

96
00:07:23,360 --> 00:07:29,680
No caso contrário, que é obviamente relevante se não estivermos encontrando um produto, por isso queremos

97
00:07:29,690 --> 00:07:36,380
adicioná-lo, aqui também quero retornar um novo estado em que primeiro copio o estado antigo e depois

98
00:07:36,380 --> 00:07:42,230
substituirei as refeições favoritas por basicamente são minhas refeições favoritas antigas e agora eu posso

99
00:07:42,230 --> 00:07:48,380
chamar concat, um método Javascript embutido em Javascript que retorna uma nova matriz que pega a

100
00:07:48,410 --> 00:07:55,520
matriz antiga e adiciona um novo item e ali, quero adicionar a refeição para esse ID aqui e, é

101
00:07:55,700 --> 00:08:05,130
claro, Eu posso encontrar essa refeição no meu estado, lá nas refeições, essa é essa propriedade, o estado aqui sempre se refere apenas a essa

102
00:08:05,130 --> 00:08:08,940
estrutura de estado aqui, a propósito e agora aqui,

103
00:08:08,940 --> 00:08:14,240
eu posso encontrar a refeição que eu quero adicionar e, como isso fica muito

104
00:08:14,380 --> 00:08:18,210
por muito tempo, na verdade terceirizarei isso em uma nova

105
00:08:18,490 --> 00:08:27,770
linha, para que minha refeição que eu quero adicionar possa ser encontrada com o método find, que é executado em todas as refeições e,

106
00:08:27,800 --> 00:08:33,560
se mealId for igual à ação. mealId, então eu tenho a refeição que quero adicionar e é essa

107
00:08:33,560 --> 00:08:40,180
refeição que concateno com minhas refeições favoritas, para que eu adicione isso a essa matriz. Essa deve ser a

108
00:08:40,180 --> 00:08:45,690
lógica que funciona e que gerencia nossos favoritos.

109
00:08:45,700 --> 00:08:52,120
Agora precisamos ter certeza de que realmente enviaremos essa ação sempre que clicarmos no ícone de estrela em nosso

110
00:08:52,120 --> 00:08:52,540
cabeçalho.

111
00:08:55,360 --> 00:08:56,570
Para despachar a

112
00:08:56,570 --> 00:09:00,550
ação, vamos para a tela de detalhes da refeição, porque é aqui que

113
00:09:00,550 --> 00:09:05,590
temos nosso ícone de estrela aqui e, quando pressiono esse botão, no final, desejo despachar uma ação.

114
00:09:05,710 --> 00:09:08,520
A boa notícia é que as ações de despacho

115
00:09:08,530 --> 00:09:09,800
são muito fáceis, obtivemos

116
00:09:09,850 --> 00:09:16,190
o seletor de uso e também o despacho de uso, que no final nos dá uma maneira fácil de disparar uma função.

117
00:09:16,200 --> 00:09:24,110
A má notícia é que isso obviamente só pode ser usado no corpo do componente aqui, em nosso componente funcional e

118
00:09:24,260 --> 00:09:26,150
não nas opções de navegação.

119
00:09:26,210 --> 00:09:32,690
Então, novamente teremos que trabalhar com parâmetros definidos para nos comunicarmos entre as opções de navegação e o componente,

120
00:09:32,720 --> 00:09:37,970
mas é claro que podemos fazer isso. Portanto, aqui na tela de detalhes das

121
00:09:38,040 --> 00:09:45,470
refeições, começarei chamando use dispatch e o que isso faz é uma função de despacho, uma função que podemos chamar

122
00:09:45,470 --> 00:09:53,650
para despachar novas ações e armazenarei em um despacho nomeado constante. Em seguida, quero criar um manipulador favorito

123
00:09:53,650 --> 00:10:01,210
de alternância, que é uma função que, no final, deve despachar essa ação.

124
00:10:01,210 --> 00:10:06,390
Então, aqui eu quero chamar o despacho que tenho disponível graças a esse gancho e agora

125
00:10:06,610 --> 00:10:10,600
para despachar, preciso encaminhar a ação que quero despachar e, para isso,

126
00:10:10,600 --> 00:10:14,410
usarei esse criador de ações para alternar o favorito aqui.

127
00:10:14,620 --> 00:10:18,340
Então, nós apenas temos que importar isso, importar da

128
00:10:20,780 --> 00:10:27,410
pasta da loja, das ações e das refeições. arquivo js, a partir daí eu quero importar alternar o

129
00:10:27,410 --> 00:10:35,740
favorito, não o identificador em todas as maiúsculas, mas essa função criadora de ação. Com isso importado aqui, em expedição, podemos chamar de

130
00:10:35,740 --> 00:10:40,940
alternar entre favoritos como este e agora aqui precisamos encaminhar o ID

131
00:10:40,940 --> 00:10:45,440
e, claro, é o mealId que já estamos extraindo lá

132
00:10:48,480 --> 00:10:53,310
em cima ou selecionamos Refeição. Id também funcionaria, o que

133
00:10:55,350 --> 00:10:58,910
você quiser, eu simplesmente irei para a refeição.

134
00:10:59,010 --> 00:11:07,110
Agora podemos reativar o efeito de uso para nos comunicar com o cabeçalho, não com esta linha, mas com os parâmetros de conjunto

135
00:11:07,110 --> 00:11:14,130
de navegação ads e agora aqui, vou nomear esse botão alternar fav, o nome é com você e apontar

136
00:11:14,130 --> 00:11:16,890
para o meu manipulador favorito de alternância.

137
00:11:16,890 --> 00:11:22,980
Agora, alternar o manipulador favorito deve, portanto, ser adicionado como uma dependência aqui e, para evitar

138
00:11:23,580 --> 00:11:30,180
loops infinitos, usarei novamente o retorno de chamada de uso que importo do React para agrupar essa função aqui.

139
00:11:30,180 --> 00:11:37,060
Portanto, aqui o retorno de chamada está envolvido nessa função e precisamos especificar dependências aqui e a dependência número

140
00:11:37,200 --> 00:11:40,020
um é despachada, o React Redux garantirá que

141
00:11:40,020 --> 00:11:44,640
isso nunca mude, portanto, essa é uma dependência que nunca muda, a dependência

142
00:11:45,210 --> 00:11:46,730
dois é mealId,

143
00:11:46,740 --> 00:11:49,270
que também não deve mudar enquanto estivermos

144
00:11:49,340 --> 00:11:54,900
nesta página, ela sempre terá o mesmo valor. Portanto, com isso, essa função não deve realmente ser

145
00:11:54,900 --> 00:12:00,360
recriada, o que significa que esse efeito nunca será executado novamente, a menos que seja recriado, o

146
00:12:00,360 --> 00:12:07,820
que só acontece se tivéssemos um novo ID. Nesse caso, seria bom que isso fosse recriado, caso contrário, isso resultaria mudar e, portanto, devemos

147
00:12:07,820 --> 00:12:10,340
ter um canal de comunicação seguro aqui.

148
00:12:10,550 --> 00:12:16,490
Agora, no cabeçalho, agora podemos extrair esse manipulador, já que também não precisamos

149
00:12:16,510 --> 00:12:19,040
mais do mealId aqui, agora

150
00:12:19,150 --> 00:12:28,420
podemos simplesmente tirar a função favorita de alternância de nossa navegação de dados de navegação, obter parâmetros e, então, nomeio ,

151
00:12:28,420 --> 00:12:35,080
então esse é o nome do parâmetro que podemos extrair e isso deve nos dar

152
00:12:35,080 --> 00:12:41,050
acesso a essa função que passamos. Agora, alternar favorito é o que realmente deve ser executado quando

153
00:12:41,050 --> 00:12:42,130
pressionamos este botão.

154
00:12:42,550 --> 00:12:49,570
Então, aqui, apontarei para alternar entre favoritos, pois isso mantém um ponteiro nessa função e, portanto, essa

155
00:12:49,600 --> 00:12:56,740
função será executada quando pressionarmos essa estrela agora. Bem, vamos ver se isso funciona.

156
00:12:56,750 --> 00:13:04,760
Vamos salvar isso e voltar ao espaguete aqui e clicar nessa estrela e clicar nos favoritos. Parece

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

158
00:13:05,450 --> 00:13:07,600
espaguete faz parte dos favoritos.

159
00:13:07,670 --> 00:13:11,440
Vamos clicar na estrela novamente aqui e ir para os favoritos e ela se foi,

160
00:13:11,480 --> 00:13:12,730
isso faz muito sentido.

161
00:13:12,740 --> 00:13:18,290
Clique novamente, volte, vá para a página de detalhes aqui na guia Favoritos, clique na

162
00:13:18,290 --> 00:13:20,550
estrela e volte, bem, acabou.

163
00:13:20,750 --> 00:13:27,410
Vamos também verificá-lo no Android. Para o schnitzel, talvez, os favoritos estejam vazios no momento. Vamos voltar e clicar na estrela, ir

164
00:13:27,410 --> 00:13:30,560
para os favoritos, aqui está

165
00:13:30,560 --> 00:13:39,250
ela, voltar, clicar na estrela e ela se foi. Portanto, essa lógica geralmente funciona.

166
00:13:39,250 --> 00:13:43,150
Ainda quero trabalhar em algumas coisas, por exemplo, quero alterar o ícone

167
00:13:43,150 --> 00:13:44,250
com base no

168
00:13:44,260 --> 00:13:49,600
status favorito, também quero mostrar algum texto na tela favorita quando estiver vazio, mas geralmente, despachar e

169
00:13:49,600 --> 00:13:52,840
usar os dados funcionam mesmo se precisarmos em um cabeçalho.