Para o botão excluir, vamos começar novamente com a lógica Redux.
Portanto, aqui nas ações, por exemplo, podemos registrar um novo identificador, remover do carrinho soa como um
nome adequado, uma vez que adicionamos ao carrinho antes, então remova do carrinho.
Também adicionarei novamente uma função de criador de ação aqui, remova do carrinho.
Agora, agora é necessário apenas o ID do produto que deve ser removido; portanto, apenas o ID do produto e,
em seguida, isso retorna um novo objeto de ação em que o tipo de curso é removido do carrinho e onde temos o pid, o ID
do produto, para onde encaminhar o ID do produto que estou chegando aqui. Agora, no redutor, tínhamos esse estojo
para adicionar ao carrinho, agora precisamos simplesmente
adicionar outro estojo aqui e esse estojo
é a remoção do estojo.
Para isso, é necessário certificar-se de que você está importando o identificador de ação removido
do carrinho
do arquivo de ações do carrinho
e, na caixa remover do carrinho aqui, temos dois casos novamente.
Uma é que tínhamos apenas um item desse produto no carrinho, como para
o tapete azul;
nesse caso, precisamos removê-lo totalmente do objeto
de itens
do carrinho, portanto, desse objeto e, portanto, removê-lo dessa linha que nós produzimos aqui.
Se tivermos dois ou mais itens, queremos reduzir a quantidade em 1.
É claro que você sempre pode apagar esse item completamente, se quiser, mas quero mostrar como
você pode diferenciar esses dois casos.
Então, na verdade, se tivermos uma quantidade maior que uma, não quero apagar o item do
carrinho, mas reduzir o valor em 1.
Portanto, ao remover do carrinho, precisamos descobrir qual é a nossa quantidade. Portanto, nossa quantidade atual que eu armazeno nessa constante pode ser
deduzida do nosso estado, é claro que, nos itens, precisamos encontrar o produto que procuramos e, é claro, podemos fazer isso
com a ajuda do ID que
é parte de nossa ação aqui no campo pid, porque agora os itens de estado
são um objeto e, portanto, podemos acessar a ação. pid aqui, certo.
Isso acessará dinamicamente o valor com a chave de ID do produto aqui em nosso item,
portanto, com a
ID do produto, estamos realizando essa ação e
é assim que adicionamos itens ao nosso objeto de itens aqui.
Usamos o nosso ID do produto como identificador. Agora é isso
que uso aqui para ter acesso a ele.
Isso terá uma quantidade, pois isso conterá um valor que é um item de produto.
Você também pode adicionar uma verificação se esse item realmente faz parte do carrinho,
mas, como construímos esse aplicativo, nunca devemos chegar a esse item. ação sem que esse produto faça
parte do carrinho, porque só podemos acionar nossa ação de exclusão aqui de dentro da tela do carrinho,
portanto, não precisamos verificar aqui, mas definitivamente precisamos obter a quantidade.
Agora podemos verificar se a quantidade atual é maior que 1, o que significa que precisamos
reduzi-la, precisamos reduzi-la, não apagá-la, caso
contrário, precisamos apagá-la.
Agora vamos começar com o caso de apagar.
Então, aqui só precisamos retornar um novo objeto de itens que inclua todos os itens
antigos, mas que não inclua mais esse item. Para que possamos ter nossos itens de carrinho atualizados aqui, onde
clonamos itens de estado, como este e agora para remover uma propriedade, podemos usar a palavra-chave excluir que o Javascript conhece e lá podemos excluir
itens de carrinho atualizados para ação. pid.
Portanto, isso excluirá este item do nosso objeto Javascript copiado aqui, excluirá esse item inteiramente, esse item do produto inteiramente
do objeto de itens do carrinho. É assim que podemos apagá-lo. Agora, no outro caso, basta reduzi-lo,
posso ter meu item de carrinho atualizado, para
que esse item de carrinho único crie um novo item de carrinho com a classe de item de
carrinho e, lá, deseje copiar os valores dos itens existentes. item do carrinho, mas simplesmente reduza a quantidade.
Portanto, o item do carrinho leva a quantidade exatamente como
os primeiros valores; agora, aqui, o objetivo é obter acesso aos itens de estado para o ID do produto que recebo
na ação e, como repetir isso será complicado, eu o armazenarei em um ajudante uma constante , item de carrinho selecionado é este
aqui, agora podemos substituí-lo aqui por item de carrinho selecionado e
aqui eu posso usar cartItem selecionado. quantidade menos um.
Agora, é claro que sabemos que isso não será zero porque a quantidade foi maior que 1 e agora podemos manter o
restante dos dados, é claro.
Então, mantemos o preço do produto aqui, mantemos o título do produto, que tudo não muda, mas
a soma, é claro, muda e essa
é a soma, a soma antiga menos o preço, é
claro, menos o preço do produto, porque removemos um item, temos que reduzir a soma pelo preço de um item.
Agora, este item atualizado do carrinho precisa substituir o item atual em nosso objeto de itens do carrinho. Para que também possamos reutilizar algum código, vou mudar um pouco isso
e criar itens de carrinho atualizados como uma variável aqui em vez de uma constante
aqui no bloco else, para que eu apenas atualize esse valor de variáveis, para que aqui em o
bloco if,
também podemos usar o mesmo nome de variável, itens atualizados do carrinho, onde eu defino isso como uma cópia
dos itens existentes, mas substituo minha ação aqui, então meu ID do produto, meu identificador, o valor com o item do carrinho atualizado, que é o meu item
antigo do carrinho com a quantidade e a soma atualizadas. Esses são os itens atualizados do carrinho, agora
é
claro que também precisaremos ajustar a quantidade total de nosso estado; portanto,
após esse bloco, se retornarmos uma cópia do estado, os itens poderão ser definidos como itens atualizados do carrinho e,
agora, o importante o valor total
pode ser definido para indicar o valor total menos o preço do produto do
item de carrinho selecionado, pois assim como atualizei a soma desse item de carrinho único, é claro que
a soma total do carrinho também precisa ser reajustada. Agora, podemos tentar enviar essa ação remover do carrinho.
Então, vamos para a tela do carrinho onde, no final, tenho a função remover e, agora,
desejo despachar uma ação, portanto, precisarei acessar a
função despachar com a ajuda do gancho de despacho de uso. Agora podemos usar isso aqui em cima, obter acesso chamando apenas usar despacho como este e
depois despachar isso lá em baixo.
Agora, despache importe todas as ações necessárias, importe tudo como ações do carrinho da pasta da loja, do carrinho de ações como este, novamente usando essa importação em
pacote configurável que é totalmente opcional, você também pode direcionar as coisas específicas que precisa, portanto, as
específicas criadores de
ação, neste caso, remover do criador de carrinho de que precisaríamos e, em seguida, lá
em baixo, basta executar esse criador de
ação, no meu caso, usando ações de carrinho. removeFromCart, encaminhe o ID do produto que é claro que
chegamos aqui, é itemData. item.
e agora lembre-se de que estamos percorrendo itens dessa forma, por isso teremos um campo de ID
do produto e, portanto, podemos usá-lo aqui para encaminhar isso para remover do carrinho. Esperamos
que isso nos permita atualizar esta. E isso deve ser tudo, o
Redux deve fazer o resto nos bastidores e renderizar automaticamente a tela do carrinho
sempre que o carrinho mudar, portanto, sempre que removermos itens. Então eu adicionei duas camisas vermelhas e um tapete azul e se eu remover
uma camisa
vermelha, de fato, um dos problemas que temos é a troca de pedidos, teremos
que corrigir isso, mas você vê que a quantidade foi atualizada corretamente.
Se agora remover isso, o valor total também será atualizado corretamente. Se agora remover isso, ele desapareceu completamente
e agora também está desativado.
Então isso geralmente funciona, mas é claro que a ordem está sendo trocada, não é
algo que eu queira que aconteça aqui.
Agora, para evitar que a ordem mude, podemos simplesmente ir para a tela do carrinho, onde eu altero meus itens
para ser uma matriz, e só precisamos garantir que essa matriz seja sempre classificada da mesma
maneira, porque esse seletor sempre será acionar e buscar novamente nossos dados sempre que nosso estado Redux mudar.
Portanto, aqui, sempre obteremos o instantâneo de dados mais recente que temos lá e, portanto, é
aqui que precisamos apenas classificá-lo da mesma maneira o tempo todo e, portanto, sempre renderizá-lo
da mesma maneira.
Portanto, precisamos apenas garantir que nossa matriz de itens de carrinho transformados seja classificada chamando a classificação lá.
Se eu chamá-lo assim, começo a adicionar alguns dados aqui, agora você vê apenas isso
não deu certo, porque não estamos dizendo como classificá-lo e não
sabe como fazer isso para objetos fora de a caixa, mas podemos passar uma função para classificar
onde sempre comparamos dois itens, a e b, um para o outro e, em seguida, classificar
deve retornar um número no final que determina o
que vem primeiro e lá, é
claro que você pode classificar isso você deseja, por exemplo, por ID do produto, para que possamos simplesmente retornar uma comparação em que verificamos a
ID do produto de A, comparamos com a ID do produto de B e, se for maior, com uma expressão
ternária aqui, retornei uma, caso contrário retornarei menos uma .
Essa é a função de classificação normal que o Javascript acompanha e agora isso garante que
sempre classifiquemos
da mesma maneira; portanto, agora você vê se eu removo isso, o curto vermelho permanece em seu lugar e, portanto, nossa lógica de carrinho está concluída.
Agora podemos ter certeza de que também podemos clicar nesse botão do pedido agora e o adicionamos como um pedido que, a
partir de então, podemos visitar com a útil gaveta aqui que nos permite ir para a tela de pedidos que,
obviamente, ainda não temos Adicionar, acrescentar.