Para o recurso adicionar ao carrinho, precisamos trabalhar em duas coisas - é
claro que podemos ter uma tela de carrinho, que temos
um ícone aqui no cabeçalho que nos leva à tela do carrinho, onde podemos ver a soma total e os itens do carrinho
e onde temos esse botão agora, mas eu diria que
esse é o segundo passo, porque o primeiro passo mais importante é adicionarmos a lógica para gerenciar os
itens do carrinho e isso envolve o Redux. Para isso, adicionarei um redutor novinho em
folha, um segundo redutor que vou chamar de carrinho, carrinho. js e também um arquivo de ações, e agora esse é realmente
um arquivo de ação que iremos preencher.
Faremos isso com o arquivo de produtos mais
tarde, assim que começarmos a adicionar produtos, mas por enquanto, vamos começar com o recurso de carrinho. Então aqui no
carrinho. js na pasta reducers,
vou configurar meu estado inicial para essa fatia de carrinho e, novamente, são todos esses redutores
separados e os estados que eles conseguem compor a loja Redux total porque, no final, é
isso que você combina aqui com combinado reduz em um redutor de raiz e um grande estado no final.
Temos apenas esses sub-estados individuais para facilitar o gerenciamento dos dados.
Então aqui no redutor do carrinho, como deve ser o estado do nosso carrinho?
Bem, nosso carrinho terá um monte de itens, pode ser uma matriz e uma soma que inicialmente é zero, portanto, uma quantia total que você poderia dizer,
é claro que também poderia nomear essa quantia talvez para deixar bem claro o
que é isso.
Portanto, essas são as duas coisas que compõem meu carrinho aqui e,
como sempre, não posso enfatizar isso o suficiente, há mais de uma maneira de implementar isso. Portanto, se você deseja gerenciar alguns outros dados aqui
também, definitivamente faça-o, não há
uma abordagem
única certa ou errada, essa é apenas
a minha abordagem para criar este aplicativo.
Agora é importante que, para este carrinho de compras aqui, quero ter certeza de que, se já
tivermos um item no carrinho, digamos a camisa vermelha e clicar no
carrinho de compras pela segunda vez, não adiciono dois itens a essa matriz, mas Eu ainda tenho apenas um item lá e, em vez
disso, todos os itens nessa matriz de itens devem ser um objeto onde eu gerencie como o ID do produto, talvez, onde eu
tenha o título e a quantidade do item no
carrinho, para que então mude para 2 se eu clicar uma segunda vez.
Portanto, você também pode argumentar que os itens talvez não devam ser uma matriz, mas talvez um objeto Javascript, porque isso nos permite armazenar o ID
do produto como uma chave e o valor pode ser um objeto com o título, com
a quantidade, com o preço e isso é apenas uma alternativa, você
também pode fazer
isso tudo com uma matriz, mas essa é realmente a abordagem que vou usar.
Agora, o redutor que eu exporto, portanto, é um redutor que, obviamente, obtém um estado
que tem nosso estado inicial como valor padrão e uma ação como argumento que, no final, precisa retornar alguns dados.
Portanto, no final, ele precisa retornar um novo estado que é usado pelo Redux.
Agora precisamos de uma ação para continuar.
Então, aqui vou exportar uma constante, um identificador de ação e nomear esse item no carrinho, o identificador
é com você, irei adicionar o carrinho como este e, no arquivo de ações, criarei tal função
criador de ação.
Então aqui está outra
constante que vou nomear adicionar ao carrinho que recebe, digamos o objeto completo do produto que eu quero adicionar, para que eu
possa extrair as informações necessárias e, aqui, precisamos retornar um objeto de ação que tem
um tipo que é adicionar ao carrinho e, em seguida, nosso produto.
Essa é apenas uma maneira de criar essas ações que torna muito simples fazer isso dentro
de nossos componentes.
Portanto, no final, no redutor do carrinho, em todos os redutores, na verdade, mas no local do redutor do carrinho onde
nos importamos,
obteremos a ação adicionar ao carrinho, então aqui precisamos mudar o tipo de ação e lidar com o caso em que é adicionado ao carrinho e, portanto, você deve
importar adicionar ao carrinho dessa
pasta de ações e, a partir daí, do arquivo do carrinho. Agora, a propósito, essa ação quando é despachada é recebida
em todos os redutores, mas se você não lidar com ela com um caso separado, seu caso
padrão será acionado, o que normalmente deve retornar sua fatia de estado atual para esse redutor, o que normalmente significa que a fatia de
estado desse redutor não é alterada. Aqui, no entanto, no redutor do carrinho,
é claro que quero mudar meu estado, portanto, eu mantenho
a inclusão na caixa do carrinho
aqui e agora na inclusão no carrinho, o que
deve acontecer lá?
Bem, obtemos nosso produto adicionado, podemos retirá-lo da ação porque, na ação, teremos uma chave do produto, foi o que acabamos
de configurar
aqui no carrinho de ação. arquivo js, então eu vou pegar nosso
produto e o estou armazenando em um produto constante e adicionado aqui, com o qual podemos trabalhar
agora e teremos o preço do produto aqui, que é, naturalmente, adicionadoProduto. preço e teremos o título do
produto que é adicionadoProduto. título. Antes de continuarmos, vamos definir como
o item do carrinho deve ser o que armazenamos aqui, o valor que temos lá.
Então, vou para a pasta modelos e adiciono um item de carrinho. js aqui e, em seguida, adicione uma classe de
item do carrinho que recebe
um construtor e antes que eu esqueça novamente, que precisa ser exportado aqui
e agora nesse construtor, espero obter a quantidade do produto que vamos adicionar, o preço
do produto, título do produto e soma deste item, se tivermos três vezes a camisa vermelha, nossa soma será três vezes
29. 99,
aproximadamente US $ 90.
Agora, o que não chego aqui é o ID do produto, porque vou usá-lo como uma chave dentro do meu objeto, cujos itens são
mantidos e depois ficarão mais claros quando o implementarmos.
Portanto, aqui no item do carrinho,
apenas armazeno todos os dados que recebo, quantidade, preço do produto
e tenho esses dados que precisam ser apresentados posteriormente, para que o título do produto e a soma, assim e agora de volta no redutor,
é claro que podemos importar essa classe de item do carrinho da pasta modelos e do
item do carrinho aqui e agora de volta ao estojo do carrinho, precisamos primeiro
descobrir se esse produto já faz parte dos nossos itens.
Agora, como mencionei, adicionarei todos os novos produtos adicionando uma nova chave aos itens que são o ID desse produto, já que
isso é único, sempre temos
cada chave apenas uma vez e, em seguida, o valor será um item do carrinho, conforme defini-lo em
modelos e, portanto, eu sei se o ID do produto que estou recebendo aqui já é uma chave de
itens, então isso já tem nosso item como um item de carrinho.
Então, aqui, podemos simplesmente verificar se há itens para o produto adicionado. O ID existe; portanto, se isso retorna algo
verdadeiro, não indefinido, já temos o item no carrinho, o que está bom, mas precisamos alterar a
quantidade, caso contrário,
precisamos adicionar um novo item.
Então, vamos começar com o caso else, porque é o caso que encontraremos
pela primeira vez
quando adicionarmos algo pela primeira vez, é preciso um novo item de carrinho, eu
crio isso com a nova palavra-chave e a classe de item de carrinho que defini e lá , precisamos fornecer
a quantidade que obviamente é uma
se adicionarmos um novo item, precisamos fornecer o preço do produto, o título do produto aqui e a soma e a soma do curso
inicialmente é apenas o preço do produto, certo?
Como se adicionarmos um item desse preço, a soma desse item do carrinho será o preço do produto e agora esse novo
item do carrinho deverá ser adicionado aos itens do carrinho aqui.
Então, aqui, retornamos uma cópia do nosso estado e definimos itens
iguais a um novo objeto em que copio todos os meus itens de estado existentes, para que copie meu
objeto de
itens existente aqui e depois adiciono uma nova chave com esta sintaxe dinâmica com os colchetes
em que o nome da chave é adicionadoProduct. ID, foi o que eu quis dizer com o ID do produto sendo a chave no
objeto de nossos itens e o valor é o nosso novo item de carrinho.
Esta é apenas uma sintaxe que você precisa conhecer, é Javascript básico, é assim que você pode adicionar ou acessar
aqui uma propriedade dinâmica em vez de codificá-la como uma string aqui. A propósito, isso aqui em cima
também deve ser estatal. itens, meu erro. Portanto, com isso, devemos adicionar um novo item de carrinho aqui.
Agora, se você já possui um item no carrinho, é claro que não
criamos um novo item, mas queremos atualizar o existente. Portanto, terei meu item de carrinho atualizado
aqui e, para isso, ainda crio um novo item de
carrinho, mas preencherei previamente com alguns dados existentes, por exemplo, a quantidade aqui. Nós obtemos isso dos itens de estado para o ID do produto adicionado, porque isso já deve fazer parte
dos itens de estado, estamos verificando isso aqui e isso terá uma chave de quantidade, é claro,
porque esse item aqui nos meus itens é apenas de digite itens de carrinho, para que ele tenha
uma propriedade
de quantidade e simplesmente adicionamos um a isso porque estamos adicionando
um novo item de carrinho, então precisamos incrementá-lo. Agora, o item do carrinho como segundo argumento leva o preço do produto. Então, é claro, como criaremos o aplicativo
de forma que o preço nunca mude, o que adicionaria muita complexidade aqui, teríamos que
gerenciar o carrinho de uma maneira totalmente diferente nesse caso, teríamos que armazenar cada item do
carrinho como um lista de transações para este item do carrinho que é demais para isso aqui.
Então, como isso nunca muda, já que o preço nunca muda, no final, podemos apenas pegar
o preço do produto que estamos recebendo ou o preço existente que armazenamos antes, porque isso nunca mais mudará.
O título pode mudar e eu quero armazenar o título mais recente aqui, então, definitivamente, pegarei o
produto que estamos chegando aqui, em vez do meu instantâneo antigo e, por último,
mas não menos importante, o último valor aqui, minha soma total para este item do carrinho,
é claro que é a soma atual, portanto, eu acesso itens de estado para o ID aqui, soma mais o preço do produto porque adicionamos um novo
item aqui, precisamos adicionar o preço vezes 1 à soma atual. Esse é o item do
carrinho atualizado.
Agora, com isso, podemos retornar nossa nova fatia de estado aqui, copiando os estados antigos e definindo itens iguais e agora importantes
para um objeto em que copiamos o estado. itens, mas onde agora definimos novamente o addedProduct. ID e sim, isso já existe, mas com
isso simplesmente o substituímos por nosso item de carrinho atualizado, por isso fazemos a mesma atualização que
fazemos lá em baixo. Agora que, no entanto,
não é tudo o que precisamos fazer, precisamos
alterar também o valor total, porque isso, é claro, muda.
Portanto, quando adicionamos um item pela primeira vez, o valor total deve ser basicamente nosso valor total antigo, portanto, indique o valor
total mais o preço do produto e será o mesmo se adicionarmos um
item a um carrinho existente ou quando ele já existir lá porque no final, nosso total sempre é apenas o
total antigo mais o preço, porque sempre adicionamos um item desse produto; é assim
que esse aplicativo funciona.
Portanto, nossa declaração de atualização aqui
é quase a mesma, a única coisa que difere é aqui como criamos esse item
do carrinho, portanto, é claro, também podemos reutilizar esse código, movê-lo para fora do bloco if else e
em vez de ter duas constantes diferentes aqui , podemos criar
uma variável antes de inserir a instrução if,
atualizada ou talvez um novo item do carrinho, que poderia ser um nome,
porque não sabemos o que será antecipadamente e, então, aqui na ramificação if aqui, atualizamos ou novo item de carrinho para esse item de carrinho
atualizado, aqui, por outro lado, o definimos para este novo item de carrinho e aqui, sempre usamos o
item de carrinho atualizado ou novo e, com isso, temos reutilização de código aqui e
não repetir a nós mesmos, o que é sempre bom. Uma outra observação: copiar o estado aqui, é claro,
é sempre redundante, porque você sempre define os itens e o valor total.
Portanto, se você sempre tem apenas esses dois campos aqui e sempre altera os dois, não
precisa copiar o estado existente; se você introduzir outro pedaço de dados na sua fatia de estado aqui, que não
muda aqui no entanto, você precisa copiar seu estado antigo para não perder esses dados
adicionais.
Portanto, aqui deixarei essa funcionalidade de cópia, mesmo que não seja tecnicamente necessária aqui,
mas se alguma vez mudarmos nosso estado onde foram salvos, não
esquecemos de copiá-la e, portanto, perdemos dados.
Bem, houve muito trabalho; com
isso, podemos começar a despachar essa ação
e, é claro, quero despachá-la da visão geral do produto e dos
detalhes do produto, porque nas duas telas adicionei botões ao carrinho.
Então, vamos começar na tela de visão geral dos produtos. Para despachar as
ações do Redux,
precisamos incluir o gancho de despacho de uso aqui. Com isso, podemos simplesmente acessar esta função de despacho chamando o uso
de despacho como este e agora, quando clicamos em adicionar para carrinho lá em baixo, podemos despachar nossa ação
aqui e, é claro, a propósito, em vez de usar funções inline
aqui, você pode ter funções armazenadas
em constantes separadas dentro de seu componente funcional aqui. Como alternativa, vou me ater a funções inline para agora e importarei todas
as minhas ações aqui como ações do carrinho da pasta store e ali, a pasta actions, o arquivo cart.
Agora, esta é uma sintaxe de importação que mescla todas as exportações do arquivo
em um único objeto; temos apenas uma exportação aqui;
portanto, você também pode direcionar essa
exportação específica; posteriormente, teremos várias exportações e, portanto, utilizarei essa abordagem.
Então aqui despachamos a ação do carrinho.
adicione ao carrinho e esta é uma função que precisamos executar, essa é a nossa função criadora
de ação e isso como
argumento leva o nosso produto. Portanto, no final, precisamos passar o itemData. item que é apenas o nosso produto aqui na tela de detalhes
do produto.
Portanto, fazemos exatamente a mesma coisa, importamos use dispatch do React Redux; portanto, aqui podemos obter acesso
à função de despacho chamando use dispatch e, em seguida, para
esse botão aqui na função inline ou em uma função nomeada separada, se você gosta
disso , você pode
chamar despacho, agora precisamos importar nossas ações e usarei a mesma sintaxe de
antes, onde importo tudo como ações do carrinho da pasta da loja, pasta de ações, arquivo do carrinho e agora ações do carrinho, chamada add to carrinho
aqui e encaminhar o produto selecionado, que é o nosso produto, queremos adicionar ao carrinho aqui.
Esperamos que isso despache ações de forma que o item seja adicionado ao carrinho, mas é claro que
agora não podemos confirmar isso.
Bem, na verdade nós podemos. Você pode ativar o depurador do React Native e eu não
o usei antes, mas lá dentro, agora você pode pressionar o comando ou o controle t para abrir uma nova
guia,
confirmar a importação
aqui e, em seguida, acessar os aplicativos e abrir o menu de depuração no iOS com o comando D, no
Android com controle ou comando M e clique em depurar Javascript remoto. Agora, o meu foi aberto na porta 19003, então eu abri o depurador
React Native na
porta errada, selecione-me novamente, pressione o comando T ou controle T no depurador e escolha 19003, use qualquer porta
aberta para você no Chrome, clique em confirmar e agora isso se conecta ao seu aplicativo React em execução aqui no depurador, feche o
depurador do Chrome e recarregue o aplicativo. Agora, ele deve se conectar
aqui e agora não apenas você pode inspecionar o aplicativo aqui,
como expliquei anteriormente, não,
você
também pode dê uma olhada na parte lá em cima e esse é o seu depurador Redux,
aí você pode ver o que o Redux está fazendo por você.
A única coisa que você precisa fazer para fazê-lo funcionar é instalar um novo
pacote com o npm install --save dev, porque é uma dependência de
desenvolvimento que precisamos apenas durante o desenvolvimento e, instale a extensão Redux dev tools,
acesse seu aplicativo . arquivo js depois
e importe a partir desta
extensão de ferramentas de desenvolvimento Redux. Você pode importar o compor com as ferramentas de desenvolvimento a partir
daí e essa é uma função que você passa para criar a loja como um segundo
argumento, você pode simplesmente executá-lo assim. A propósito, esse é o
código, a importação
e o uso que você deve remover antes de implantar o aplicativo, porque isso é apenas algo que deve
estar em execução durante o desenvolvimento, não no aplicativo de produção, é necessário removê-lo
antes de implantar o aplicativo mas durante o desenvolvimento, tudo bem. E com isso adicionado, se você agora salvar isso,
verá que aqui neste Redux Inspector, você vê uma ação init sendo despachada, você nunca viu isso antes.
Essa é uma ação que é despachada automaticamente quando o aplicativo é iniciado.
Se agora eu clicar no carrinho aqui, você também verá a ação adicionar ao carrinho
e agora aqui, poderá ver detalhes sobre essa ação, como os dados que foram anexados a ela e sobre
o seu estado aqui e ali, por exemplo, é o estado do meu produto e onde está o
estado do meu carrinho?
Bem, é claro que falta, porque enquanto temos o redutor na ação configurada, no aplicativo. arquivo js, em redutores
combinados, não estamos incluindo o estado do carrinho.
Então, vamos importar o redutor do carrinho de. / StoreReducers / cart e agora com isso importado, podemos adicioná-lo ao nosso
objeto de redutores combinados e, agora, adicionamos uma fatia do carrinho, por exemplo, aponte para o redutor do carrinho e,
portanto, agora isso é incluído na nossa loja Redux. Com isso, se você agora esperar que isso seja recarregado
e clicar no carrinho novamente, agora nesta ação adicionar ao carrinho, no estado, verá que agora
há uma fatia do carrinho e agora há um valor total, você vê que há um
item com a chave P1, que é o nosso produto com uma quantidade de
1, esse preço, a soma disso e se agora clicar no carrinho pela segunda vez aqui, há outra ação despachada e se tivermos uma olhe
o estado após esta ação, vemos agora, resfrie apenas um item, mas agora com a
quantidade dois, o preço do produto por item é este, mas a
soma é essa.
Esta é
a camisa, se agora eu também despachar o tapete
azul, temos que adicionar ao carrinho mais uma vez e lá no estado, agora vemos
de fato dois itens, P1
e P2, P1 permanece inalterado, mas P2 foi adicionado agora e o valor total também parece bom para mim.
Portanto, isso parece funcionar e é assim que você pode olhar para o seu estado Redux enquanto o aplicativo está sendo executado
sem exibi-lo aqui.
Agora, é claro, também queremos exibi-lo visualmente, mas esta é uma boa maneira de analisar
seu estado nos bastidores com a ajuda do depurador React Native.
Agora vamos fechá-lo aqui, porque diminui um pouco o aplicativo e, portanto, aqui
no menu de depuração, também pararei minha depuração remota e fecharei o inspetor aqui.
Também de volta no aplicativo. js, vou me livrar da coisa de compor com
ferramentas de desenvolvimento aqui,
para não esquecê-lo mais tarde, mas você sempre pode adicioná-lo aqui ou deixá-lo aqui enquanto estiver desenvolvendo, para
que possa ver sua loja.
O principal argumento para nós aqui é que
isso parece funcionar e, com isso, é claro que agora podemos trabalhar adicionando um botão de ação aqui ao cabeçalho e garantir
que possamos ir para a página do carrinho a partir dele ou com a ajuda desse botão de ação para que,
na página do carrinho, possamos exibir as informações do carrinho.