Vamos começar com os favoritos.
Quero ter certeza de que, quando estou em uma receita, posso clicar nessa estrela e adicioná-la como favorita e mostrá-la aqui na
tela favorita, onde atualmente não vejo nada porque removi esses favoritos fictícios.
Para isso,
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
para você, mas sim, esses dois arquivos de refeições. js aqui em ações
e refeições. js em redutores e nas ações de refeições. js, configurarei
algumas ações Redux que normalmente começam configurando alguns identificadores exclusivos que
eu armazeno em constantes e que serão alternados entre os favoritos.
Você pode usar o que quiser
aqui, o valor que você armazena aqui geralmente é o mesmo identificador,
portanto esse é o valor do identificador e é simplesmente armazenado em uma constante para que não tenhamos que digitar
manualmente mais tarde, mas sempre podemos importar esta constante e evitar erros
de digitação.
Novamente, se for
novo para você, verifique primeiro um recurso dedicado ao React Redux.
Agora também usarei o padrão de criador de
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,
porque uma ação não é apenas um identificador frequentemente e, nesse caso, é o caso,
também precisa de uma carga útil extra e, portanto, na verdade, temos uma ação que é um objeto
com identificador e carga útil e, portanto, aqui, adicionarei uma função que me cria um objeto de ação e nomeei
essa opção de alternância
como favorita, selecione o identificador mas no caso camel, essa é uma função que pode receber alguns
dados, porque eu vou chamá-lo e deve retornar um objeto Javascript que descreva essa ação, então digamos
um tipo, é assim que
você chama esse campo identificador mas geralmente você é livre para usar o que
quiser
lá e, no meu caso, será
o favorito alternado. Por isso, aponto para esse identificador. Utilizo essa string como identificador e qualquer dado extra que você
desejar, por exemplo, aqui eu ' precisará ad d o ID da refeição que deve ser alternado e
isso significa que essa função também precisa obter esse ID e uma entrada, porque, caso contrário,
não posso armazená-lo na ação que criei.
Portanto, este é o meu criador de ação para a ação favorita de alternância,
agora no redutor, quero agir quando receber uma ação favorita de alternância e, para isso, usarei um padrão que você provavelmente
já
viu se já trabalhou com o Redux antes , Usarei uma instrução switch aqui e ativarei meu tipo
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.
Então, eu ligo esse tipo de ação e lida com casos diferentes para as diferentes ações
que eu possa ter.
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 é
por isso que estou armazenando isso na constante separada, porque agora não preciso digitar manualmente alternar os favoritos onde
possa ter um erro de digitação lá, em
vez disso, apenas uso a constante em que a string está armazenada. E agora aqui, executo a lógica que desejo executar para,
então, trabalhar com essa ação e alterar meu estado, de modo que a refeição com o ID da refeição que
faça parte da minha ação seja adicionada às refeições favoritas ou removida de lá, se já fazia parte porque é uma
ação de alternância aqui.
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
caso padrão no qual acabei de retornar o estado inalterado.
Nós realmente não deveríamos alcançar isso, mas, caso o façamos, bem, é isso que fazemos, mas
voltando ao caso favorito de alternância. Agora, no final, quero
descobrir se minha refeição com o ID faz parte da ação porque estou adicionando o ID
da refeição à ação,
se essa refeição já faz parte
das refeições
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
refeições favoritas, porque se for -1, sei que não encontrei um índice, portanto não fazia parte, se é maior ou igual
a
zero, eu sei que o item fazia parte disso. Então, eu terei meu índice existente aqui e
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
atual que eu recebo e lá, teremos uma propriedade de refeições favoritas e posso use o método
find index, um método Javascript normal que eu possa usar em matrizes para obter o índice de um item
que corresponda a um determinado critério que eu configurei aqui em uma função que eu passo para encontrar o
índice, essa função é executada em todas as refeições no array e, se retornar true, fornece o índice do elemento para
o qual foi executado.
Então aqui eu quero retornar verdadeiro se refeição. id é igual a ação. mealId. Isso significa simplesmente que a refeição
que estou vendo em minhas refeições favoritas tem a mesma idéia que a refeição para a
qual essa ação ocorre e isso significa que, se isso for verdade para qualquer item das refeições favoritas, que a
refeição que estamos tentando alternar já faz parte dos favoritos, portanto, teremos que removê-lo, pois
agora
ele retornará o índice do item, portanto o índice existente será maior que -1 e, portanto, podemos usar esse
índice para removê-lo.
Se isso retornar verdadeiro para nenhum item, por isso, se no
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,
portanto, vou usá-lo aqui em uma instrução if e verificar se o índice
existente é maior ou igual a 0, o que significa que já temos essa refeição como parte das
refeições favoritas ou não.
Agora, no caso se, portanto, o item já faz parte das refeições favoritas, desejo removê-lo.
Então aqui, no final, retornarei um novo estado, porque no seu redutor, no final, você
precisará retornar um novo estado, que é um novo objeto, onde primeiro copio o estado existente com o operador de dispersão aqui para
retirar
todos os pares de valores-chave do estado existente, para que eu não perca nenhum
estado e não
substitua nenhum estado que não queira substituir e depois substituirei apenas as refeições favoritas, então adicionarei
isso novamente para substituir as refeições favoritas existentes pelas minhas novas refeições favoritas, que no final devem
ser as refeições favoritas antigas sem o item desse índice.
E agora aqui para obter minhas refeições favoritas atualizadas, criarei uma nova constante, updatedFavMeals.
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
para criar uma cópia dessa matriz para não manipular a matriz original se agora começar a
trabalhar nisso, porque agora quero usar meusFavMeals atualizados, chame a emenda aqui e remova o
item no índice existente e somente esse item.
Portanto, no final, isso pega o índice updatedFavMeals, edita-o e remove o item nesse índice e edita essa matriz,
por isso copiei-o para
não editar a matriz original e agora podemos usar essa matriz atualizadaFavMeals aqui e armazene isso de
volta como refeições favoritas em nossa loja, porque essa será a matriz de refeições favoritas
sem a refeição que acabamos de remover.
No caso contrário, que é obviamente relevante se não estivermos encontrando um produto, por isso queremos
adicioná-lo, aqui também quero retornar um novo estado em que primeiro copio o estado antigo e depois
substituirei as refeições favoritas por basicamente são minhas refeições favoritas antigas e agora eu posso
chamar concat, um método Javascript embutido em Javascript que retorna uma nova matriz que pega a
matriz antiga e adiciona um novo item e ali, quero adicionar a refeição para esse ID aqui e, é
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
estrutura de estado aqui, a propósito e agora aqui,
eu posso encontrar a refeição que eu quero adicionar e, como isso fica muito
por muito tempo, na verdade terceirizarei isso em uma nova
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,
se mealId for igual à ação. mealId, então eu tenho a refeição que quero adicionar e é essa
refeição que concateno com minhas refeições favoritas, para que eu adicione isso a essa matriz. Essa deve ser a
lógica que funciona e que gerencia nossos favoritos.
Agora precisamos ter certeza de que realmente enviaremos essa ação sempre que clicarmos no ícone de estrela em nosso
cabeçalho.
Para despachar a
ação, vamos para a tela de detalhes da refeição, porque é aqui que
temos nosso ícone de estrela aqui e, quando pressiono esse botão, no final, desejo despachar uma ação.
A boa notícia é que as ações de despacho
são muito fáceis, obtivemos
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.
A má notícia é que isso obviamente só pode ser usado no corpo do componente aqui, em nosso componente funcional e
não nas opções de navegação.
Então, novamente teremos que trabalhar com parâmetros definidos para nos comunicarmos entre as opções de navegação e o componente,
mas é claro que podemos fazer isso. Portanto, aqui na tela de detalhes das
refeições, começarei chamando use dispatch e o que isso faz é uma função de despacho, uma função que podemos chamar
para despachar novas ações e armazenarei em um despacho nomeado constante. Em seguida, quero criar um manipulador favorito
de alternância, que é uma função que, no final, deve despachar essa ação.
Então, aqui eu quero chamar o despacho que tenho disponível graças a esse gancho e agora
para despachar, preciso encaminhar a ação que quero despachar e, para isso,
usarei esse criador de ações para alternar o favorito aqui.
Então, nós apenas temos que importar isso, importar da
pasta da loja, das ações e das refeições. arquivo js, a partir daí eu quero importar alternar o
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
alternar entre favoritos como este e agora aqui precisamos encaminhar o ID
e, claro, é o mealId que já estamos extraindo lá
em cima ou selecionamos Refeição. Id também funcionaria, o que
você quiser, eu simplesmente irei para a refeição.
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
de navegação ads e agora aqui, vou nomear esse botão alternar fav, o nome é com você e apontar
para o meu manipulador favorito de alternância.
Agora, alternar o manipulador favorito deve, portanto, ser adicionado como uma dependência aqui e, para evitar
loops infinitos, usarei novamente o retorno de chamada de uso que importo do React para agrupar essa função aqui.
Portanto, aqui o retorno de chamada está envolvido nessa função e precisamos especificar dependências aqui e a dependência número
um é despachada, o React Redux garantirá que
isso nunca mude, portanto, essa é uma dependência que nunca muda, a dependência
dois é mealId,
que também não deve mudar enquanto estivermos
nesta página, ela sempre terá o mesmo valor. Portanto, com isso, essa função não deve realmente ser
recriada, o que significa que esse efeito nunca será executado novamente, a menos que seja recriado, o
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
ter um canal de comunicação seguro aqui.
Agora, no cabeçalho, agora podemos extrair esse manipulador, já que também não precisamos
mais do mealId aqui, agora
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 ,
então esse é o nome do parâmetro que podemos extrair e isso deve nos dar
acesso a essa função que passamos. Agora, alternar favorito é o que realmente deve ser executado quando
pressionamos este botão.
Então, aqui, apontarei para alternar entre favoritos, pois isso mantém um ponteiro nessa função e, portanto, essa
função será executada quando pressionarmos essa estrela agora. Bem, vamos ver se isso funciona.
Vamos salvar isso e voltar ao espaguete aqui e clicar nessa estrela e clicar nos favoritos. Parece
bom,
espaguete faz parte dos favoritos.
Vamos clicar na estrela novamente aqui e ir para os favoritos e ela se foi,
isso faz muito sentido.
Clique novamente, volte, vá para a página de detalhes aqui na guia Favoritos, clique na
estrela e volte, bem, acabou.
Vamos também verificá-lo no Android. Para o schnitzel, talvez, os favoritos estejam vazios no momento. Vamos voltar e clicar na estrela, ir
para os favoritos, aqui está
ela, voltar, clicar na estrela e ela se foi. Portanto, essa lógica geralmente funciona.
Ainda quero trabalhar em algumas coisas, por exemplo, quero alterar o ícone
com base no
status favorito, também quero mostrar algum texto na tela favorita quando estiver vazio, mas geralmente, despachar e
usar os dados funcionam mesmo se precisarmos em um cabeçalho.