1
00:00:02,510 --> 00:00:05,000
Vamos começar alterando o ícone de

2
00:00:05,020 --> 00:00:08,580
estrela com base em se é atualmente um favorito ou não.

3
00:00:08,600 --> 00:00:14,390
Quero ter essa estrela preenchida apenas se for uma favorita e uma estrela vazia, se não for.

4
00:00:14,390 --> 00:00:19,040
Portanto, no final da tela de detalhes da refeição, precisamos trocar o ícone que renderizamos aqui

5
00:00:19,040 --> 00:00:25,270
com base no status favorito dessa refeição que carregamos aqui. Agora, novamente, o problema aqui é que podemos

6
00:00:25,350 --> 00:00:32,040
descobrir se essa refeição é favorita ou não de uma maneira muito fácil na função componente,

7
00:00:32,040 --> 00:00:34,910
mas não nas opções de navegação.

8
00:00:34,920 --> 00:00:42,010
Então, novamente, precisaremos de parâmetros para se comunicar entre esses dois, mas no geral, isso não é muito difícil.

9
00:00:43,620 --> 00:00:49,830
O que quero fazer aqui é obter minhas refeições favoritas com a ajuda do seletor de uso na função de componente da tela de detalhes das refeições

10
00:00:49,830 --> 00:00:56,260
com a ajuda de state e, em seguida, state. refeições. refeições favoritas, então eu quero

11
00:00:56,270 --> 00:01:01,380
receber todas as minhas refeições favoritas e agora quero verificar se essa refeição faz

12
00:01:04,190 --> 00:01:12,410
parte das refeições favoritas e, na verdade, podemos refinar isso e até mesmo nomear essa refeição atual como favorita e, no seletor, não

13
00:01:12,410 --> 00:01:18,830
apenas retornar as refeições favoritas, mas adicione um pouco mais de lógica e simplesmente adicione uma verificação

14
00:01:18,950 --> 00:01:23,300
onde chamamos alguns, que também é um método interno que retorna

15
00:01:23,300 --> 00:01:30,170
verdadeiro se a condição que estamos prestes a especificar for verdadeira para pelo menos um item desse item. matriz

16
00:01:30,320 --> 00:01:41,090
e lá, verifico todas as refeições que estão lá, se o ID da refeição é igual ao ID da refeição que recupero aqui e, portanto, tenho que trocar de linha.

17
00:01:41,260 --> 00:01:46,570
Então, aqui, recebo a refeiçãoId da refeição em que estamos carregando na tela de detalhes e

18
00:01:46,570 --> 00:01:54,290
depois verifico minhas refeições favoritas, se esse ID da refeição fizer parte delas, o que significa que essa refeição faz parte dos nossos favoritos.

19
00:01:54,320 --> 00:01:59,600
Então, com isso, temos essa refeição atual como informação favorita, agora precisamos passá-la para as opções de navegação

20
00:01:59,630 --> 00:02:07,010
e, novamente, podemos fazer isso com efeito de uso, talvez lá embaixo. Assim como antes, forneça uma função aqui em uma

21
00:02:07,010 --> 00:02:15,020
variedade de dependências, na função aqui vou definir props parâmetros de conjunto de navegação para mesclar mais dados em meus params e que

22
00:02:15,050 --> 00:02:21,620
talvez seja o parâmetro fav, o nome é seu, a refeição atual é o valor favorito, de modo que

23
00:02:21,620 --> 00:02:27,740
o valor que acabamos de derivar e agora uma dependência dessa função, dessa chamada de efeito de

24
00:02:27,740 --> 00:02:33,710
uso, quero dizer, é claro que a refeição atual é a favorita, quando isso mudar, eu quero

25
00:02:33,710 --> 00:02:41,170
encaminhar as novas informações para os parâmetros e, portanto, para o cabeçalho, caso contrário, esse efeito não deverá ser executado novamente.

26
00:02:41,240 --> 00:02:48,740
Então, agora de volta às opções de navegação, podemos recuperar essas informações aqui, é a

27
00:02:48,740 --> 00:02:54,960
favorita pode ser recuperada de navigationData. navegação com a ajuda de obter param e lá

28
00:02:54,980 --> 00:02:58,640
nomeio isso como fav, aqui está, então esse é o nome

29
00:02:59,460 --> 00:03:01,360
pelo qual podemos recuperá-lo.

30
00:03:01,370 --> 00:03:06,080
Agora temos as informações favoritas no cabeçalho e agora podemos usá-las para renderizar um ícone diferente

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

32
00:03:06,620 --> 00:03:12,260
Então, em vez de sempre renderizar uma estrela do iOS, terei uma expressão dinâmica aqui e verificarei se o favorito

33
00:03:12,260 --> 00:03:13,610
é verdadeiro, se for, então

34
00:03:13,610 --> 00:03:17,440
eu quero usar a estrela do iOS, que é essa estrela do campo,

35
00:03:17,810 --> 00:03:18,500
se não

36
00:03:18,620 --> 00:03:22,220
for, eu ' renderizará o contorno em estrela do iOS e essa

37
00:03:22,220 --> 00:03:23,570
será uma estrela vazia.

38
00:03:24,730 --> 00:03:28,960
Com isso, esperamos ter uma configuração que funcione conforme o esperado.

39
00:03:29,020 --> 00:03:30,400
Se eu for ao

40
00:03:30,400 --> 00:03:32,760
espaguete, agora essa é uma estrela vazia e, se

41
00:03:32,770 --> 00:03:35,640
clicar nela, é uma estrela cheia e faz parte dos favoritos.

42
00:03:35,650 --> 00:03:41,020
Se eu for para a tela de detalhes aqui, você vê que demora um pouco até a

43
00:03:41,020 --> 00:03:47,590
estrela ser preenchida aqui também, teremos que corrigir isso. Se eu clicar aqui agora e voltarmos para as refeições, lá

44
00:03:47,590 --> 00:03:53,660
também será atualizado e essa é a mágica do Redux, ele atualizará uma parte do aplicativo se algo relacionado mudar em outra

45
00:03:53,740 --> 00:03:58,570
parte, é exatamente como deve se comportar aqui. Para que geralmente funcione, a única

46
00:03:58,570 --> 00:04:05,890
coisa que não era muito bonita é que essa estrela aqui inicialmente está vazia e só é preenchida depois que

47
00:04:05,890 --> 00:04:08,640
ela é carregada, para que possamos corrigir

48
00:04:08,650 --> 00:04:15,760
isso, mas, além disso, isso está funcionando como deveria. Agora, para corrigir essa estrela inicialmente vazia, novamente podemos

49
00:04:15,880 --> 00:04:16,950
usar uma

50
00:04:16,990 --> 00:04:21,400
solução alternativa que expliquei anteriormente para os dados iniciais do cabeçalho.

51
00:04:21,550 --> 00:04:24,040
Não queremos esperar a conclusão da primeira

52
00:04:24,040 --> 00:04:29,140
renderização; em vez disso, devemos passar esses dados iniciais para esse componente quando navegarmos para ele.

53
00:04:30,090 --> 00:04:35,910
Portanto, está na hora da lista de refeições novamente, onde temos essa ação de

54
00:04:35,910 --> 00:04:43,170
navegação para encaminhar também essa tecla fav, portanto, essa chave que tentei extrair aqui na tela de

55
00:04:44,040 --> 00:04:50,580
detalhes da refeição, obtenha param é fav. Quero passar o valor atual quando carregamos esse componente, quando carregamos

56
00:04:50,790 --> 00:04:55,680
essa tela aqui de dentro da lista de refeições, que é o componente que aciona essa

57
00:04:56,390 --> 00:04:57,540
navegação para os

58
00:04:57,690 --> 00:05:03,390
detalhes da refeição e, é claro, para isso, itemData. O item é uma refeição única, mas que não contém informações sobre se faz parte dos nossos

59
00:05:03,390 --> 00:05:04,070
favoritos ou não,

60
00:05:04,180 --> 00:05:08,460
mas é claro que podemos descobrir se é esse o caso ou não. Na lista de refeições,

61
00:05:08,460 --> 00:05:14,360
também podemos acessar a loja Redux, não apenas os componentes da tela.

62
00:05:14,370 --> 00:05:22,260
Portanto, aqui também posso usar o seletor de uso do React Redux assim e, no meu componente aqui, posso obter minhas refeições favoritas com a

63
00:05:22,260 --> 00:05:31,560
ajuda do seletor de uso, onde obtenho meu estado e depois retorno o estado. as refeições marcam as refeições favoritas para obter todas as minhas refeições

64
00:05:31,560 --> 00:05:34,150
favoritas e agora, quando renderizamos um único

65
00:05:34,260 --> 00:05:39,240
item de refeição, podemos usá-lo para descobrir se esse item faz parte dos

66
00:05:39,240 --> 00:05:41,070
nossos favoritos. A propósito,

67
00:05:41,100 --> 00:05:43,710
você não pode usar o seletor de

68
00:05:43,770 --> 00:05:49,680
uso lá, isso não seria um uso válido, porque você deve usar ganchos React apenas no

69
00:05:49,680 --> 00:05:53,950
nível raiz da sua função de componente, não em funções aninhadas ou

70
00:05:53,970 --> 00:05:56,370
aninhadas se blocos ou algo assim, portanto,

71
00:05:57,430 --> 00:06:03,500
não é permitido usar o seletor de uso aqui, mas podemos usar nossas refeições favoritas lá, é

72
00:06:03,830 --> 00:06:12,890
claro, e, portanto, aqui, podemos descobrir se isso é favorito simplesmente verificando as refeições favoritas e procurando a refeição em que seu ID corresponde ao item

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

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

75
00:06:14,870 --> 00:06:20,990
id, portanto, o ID da refeição que estamos processando no momento. Portanto, o favorito mantém o item que encontramos

76
00:06:20,990 --> 00:06:27,290
lá; em alternativa, usamos aqui um método Javascript interno que retornará verdadeiro se algum item nas

77
00:06:27,290 --> 00:06:29,930
refeições favoritas corresponder a essa condição.

78
00:06:29,930 --> 00:06:35,570
Então, se o favorito é verdadeiro, sabemos que esse item é um favorito e, portanto, podemos usar o favorito como

79
00:06:35,570 --> 00:06:40,300
um valor para fav, que passamos como um parâmetro inicial para a tela de detalhes da

80
00:06:40,460 --> 00:06:44,930
refeição e agora essa estrela trêmula que inicialmente está vazia deve ser se foi.

81
00:06:44,930 --> 00:06:50,630
Agora, se eu marcar como favorito aqui e deixar e voltar, ele será preenchido desde

82
00:06:50,630 --> 00:06:51,550
o início,

83
00:06:51,590 --> 00:06:56,660
também na tela favorita, é claro. É assim que, é assim que podemos trabalhar

84
00:06:56,730 --> 00:06:58,830
com os favoritos. Agora, certifique-se de

85
00:06:58,830 --> 00:07:03,660
mostrar algum texto fictício aqui na tela favorita, caso não tenhamos dados para exibir de

86
00:07:03,680 --> 00:07:05,400
outra forma e, posteriormente, vamos

87
00:07:05,400 --> 00:07:06,960
cuidar dos nossos filtros.