Vamos começar alterando o ícone de
estrela com base em se é atualmente um favorito ou não.
Quero ter essa estrela preenchida apenas se for uma favorita e uma estrela vazia, se não for.
Portanto, no final da tela de detalhes da refeição, precisamos trocar o ícone que renderizamos aqui
com base no status favorito dessa refeição que carregamos aqui. Agora, novamente, o problema aqui é que podemos
descobrir se essa refeição é favorita ou não de uma maneira muito fácil na função componente,
mas não nas opções de navegação.
Então, novamente, precisaremos de parâmetros para se comunicar entre esses dois, mas no geral, isso não é muito difícil.
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
com a ajuda de state e, em seguida, state. refeições. refeições favoritas, então eu quero
receber todas as minhas refeições favoritas e agora quero verificar se essa refeição faz
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
apenas retornar as refeições favoritas, mas adicione um pouco mais de lógica e simplesmente adicione uma verificação
onde chamamos alguns, que também é um método interno que retorna
verdadeiro se a condição que estamos prestes a especificar for verdadeira para pelo menos um item desse item. matriz
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.
Então, aqui, recebo a refeiçãoId da refeição em que estamos carregando na tela de detalhes e
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.
Então, com isso, temos essa refeição atual como informação favorita, agora precisamos passá-la para as opções de navegação
e, novamente, podemos fazer isso com efeito de uso, talvez lá embaixo. Assim como antes, forneça uma função aqui em uma
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
talvez seja o parâmetro fav, o nome é seu, a refeição atual é o valor favorito, de modo que
o valor que acabamos de derivar e agora uma dependência dessa função, dessa chamada de efeito de
uso, quero dizer, é claro que a refeição atual é a favorita, quando isso mudar, eu quero
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.
Então, agora de volta às opções de navegação, podemos recuperar essas informações aqui, é a
favorita pode ser recuperada de navigationData. navegação com a ajuda de obter param e lá
nomeio isso como fav, aqui está, então esse é o nome
pelo qual podemos recuperá-lo.
Agora temos as informações favoritas no cabeçalho e agora podemos usá-las para renderizar um ícone diferente
aqui.
Então, em vez de sempre renderizar uma estrela do iOS, terei uma expressão dinâmica aqui e verificarei se o favorito
é verdadeiro, se for, então
eu quero usar a estrela do iOS, que é essa estrela do campo,
se não
for, eu ' renderizará o contorno em estrela do iOS e essa
será uma estrela vazia.
Com isso, esperamos ter uma configuração que funcione conforme o esperado.
Se eu for ao
espaguete, agora essa é uma estrela vazia e, se
clicar nela, é uma estrela cheia e faz parte dos favoritos.
Se eu for para a tela de detalhes aqui, você vê que demora um pouco até a
estrela ser preenchida aqui também, teremos que corrigir isso. Se eu clicar aqui agora e voltarmos para as refeições, lá
também será atualizado e essa é a mágica do Redux, ele atualizará uma parte do aplicativo se algo relacionado mudar em outra
parte, é exatamente como deve se comportar aqui. Para que geralmente funcione, a única
coisa que não era muito bonita é que essa estrela aqui inicialmente está vazia e só é preenchida depois que
ela é carregada, para que possamos corrigir
isso, mas, além disso, isso está funcionando como deveria. Agora, para corrigir essa estrela inicialmente vazia, novamente podemos
usar uma
solução alternativa que expliquei anteriormente para os dados iniciais do cabeçalho.
Não queremos esperar a conclusão da primeira
renderização; em vez disso, devemos passar esses dados iniciais para esse componente quando navegarmos para ele.
Portanto, está na hora da lista de refeições novamente, onde temos essa ação de
navegação para encaminhar também essa tecla fav, portanto, essa chave que tentei extrair aqui na tela de
detalhes da refeição, obtenha param é fav. Quero passar o valor atual quando carregamos esse componente, quando carregamos
essa tela aqui de dentro da lista de refeições, que é o componente que aciona essa
navegação para os
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
favoritos ou não,
mas é claro que podemos descobrir se é esse o caso ou não. Na lista de refeições,
também podemos acessar a loja Redux, não apenas os componentes da tela.
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
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
favoritas e agora, quando renderizamos um único
item de refeição, podemos usá-lo para descobrir se esse item faz parte dos
nossos favoritos. A propósito,
você não pode usar o seletor de
uso lá, isso não seria um uso válido, porque você deve usar ganchos React apenas no
nível raiz da sua função de componente, não em funções aninhadas ou
aninhadas se blocos ou algo assim, portanto,
não é permitido usar o seletor de uso aqui, mas podemos usar nossas refeições favoritas lá, é
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
.
item.
id, portanto, o ID da refeição que estamos processando no momento. Portanto, o favorito mantém o item que encontramos
lá; em alternativa, usamos aqui um método Javascript interno que retornará verdadeiro se algum item nas
refeições favoritas corresponder a essa condição.
Então, se o favorito é verdadeiro, sabemos que esse item é um favorito e, portanto, podemos usar o favorito como
um valor para fav, que passamos como um parâmetro inicial para a tela de detalhes da
refeição e agora essa estrela trêmula que inicialmente está vazia deve ser se foi.
Agora, se eu marcar como favorito aqui e deixar e voltar, ele será preenchido desde
o início,
também na tela favorita, é claro. É assim que, é assim que podemos trabalhar
com os favoritos. Agora, certifique-se de
mostrar algum texto fictício aqui na tela favorita, caso não tenhamos dados para exibir de
outra forma e, posteriormente, vamos
cuidar dos nossos filtros.