Para garantir que também possamos receber pedidos neste aplicativo, repetiremos algo que fizemos antes,
trabalharemos na tela de pedidos e trabalharemos em nossa lógica Redux para que possamos armazenar pedidos.
Então, vou começar
adicionando um novo redutor, os pedidos. arquivo js que mantém nosso redutor de pedidos e, claro, também precisaremos de um arquivo de
ações em que gerenciamos nossas ações relacionadas a pedidos, os pedidos. arquivo js também.
Então, vamos começar com os pedidos. Os redutores js arquivam aqui e novamente, como sempre,
vamos querer ter um estado inicial aqui, que também define como nossos dados são modelados e os pedidos serão realmente
simples neste aplicativo, serão
apenas uma variedade de pedidos , é realmente tudo o que precisamos.
Em seguida, podemos exportar aqui uma função padrão, que é nosso redutor, que obviamente possui um estado inicializado com
o estado inicial, que recebe uma ação e que, é claro, tudo é tratado pelo Redux e retornamos nosso estado aqui, mas
é
claro que normalmente, também queremos ativar o tipo de ação e lidar com alguns casos diferentes aqui,
para que possamos adicionar esta declaração de opção. Agora, com relação aos casos
que queremos manipular, às ações que queremos manipular, há uma ação que desejo manipular
no momento e que são minhas ações de adicionar pedido, portanto, adicionar pedido também se parece com um identificador
adequado e depois exportarei meu adicione aqui o criador da ação do pedido, que deve receber duas coisas agora -
os itens do meu carrinho ou os itens que fazem parte do pedido, mas
esses são os itens do meu carrinho no final e, claro, o valor total e, é claro,
todos os dados que temos no carrinho no final, conseguimos no carrinho, certo?
Temos um valor total do carrinho, temos os itens do carrinho e, como solicitamos todo o carrinho,
é claro que faz sentido que esses dados terminem no pedido.
Agora, aqui no criador da ação, portanto, retornamos nosso novo objeto de ação e esse objeto
de ação tem um tipo que é adicionar pedido e, por exemplo, uma chave de dados do pedido onde mesclamos nossos itens de carrinho, os
armazenamos em uma propriedade de itens de carrinho e, em seguida, quantia mantém o valor total, por exemplo.
Agora depende de você passar isso em uma propriedade de dados de pedidos mesclados ou se você tiver duas
ou mais propriedades como parte do seu objeto de ação.
Esta é a ação, voltando ao redutor, o que deve acontecer quando recebermos um pedido?
Bem, eu quero criar um novo objeto de pedido e, para isso, assim como antes, trabalharei com meus próprios modelos.
Então, vamos à pasta de modelos e, em seguida, adicione pedidos. arquivo js onde temos uma ordem de classe que exportarei
para
não esquecer mais isso e, lá, obtemos um construtor que nos permite criar uma nova ordem.
Agora, como deve ser um pedido? É claro que um pedido deve ter um ID, que
não
é o ID do produto, porque é claro que podemos pedir o mesmo produto várias vezes e, portanto, um pedido é totalmente desanexado.
Além disso, um pedido pode conter mais de
um produto. No final, solicitamos todo o nosso carrinho.
Portanto, o pedido tem um ID
independente, ele receberá os itens, o valor total e um pedido também precisam de uma data, é claro, porque quando fazemos um
pedido, queremos armazenar essa data em que foi feito.
E então eu vou armazenar
todos esses dados, obter meu ID, obter meus itens aqui, obter o valor total e também obter a data. Com isso, vamos voltar ao redutor, ao redutor de pedidos e ver
o que podemos fazer com os pedidos lá. Lá, eu quero lidar com o caso de
adicionar pedido agora, que é a única ação que tenho.
Portanto, é claro que você precisa importar esse identificador de ação e, aí, quero criar um novo pedido, armazená-lo em uma nova
constante
de pedido com o modelo de pedido que acabamos de criar que, portanto, você também precisa importar.
Agora, com a nova palavra-chave, podemos criar um novo objeto Javascript com base nessa classe e, aí, precisamos do ID,
dos itens, da quantidade total e da data da criação.
Agora, apenas obtemos os itens e o valor total como parte de nossa ação aqui, como você pode perceber.
Agora, o ID é algo que mais tarde geraremos dinamicamente em um
servidor; por enquanto, usarei um idiota pseudo-único ID com nova data para string; a data do curso é um
objeto Javascript interno e isso no final gera um ID que é único.
Tecnicamente, poderíamos criar dois pedidos exatamente no mesmo timestamp, exatamente no mesmo milissegundo, embora em nosso aplicativo onde
limpamos o carrinho depois de pressionar adicionar pedido ou pedido agora,
isso realmente não seja possível.
Portanto, este é um bom ID fictício para o momento; ele deve ser uma
cadeia de caracteres, o que é
importante e, além disso, os itens, é claro, que podem ser armazenados. Conseguimos isso em nossa ação, certo, a
ação tem essa propriedade de dados do pedido e, lá, teremos os itens.
Então, dados de ordem de ação. itens nos fornece os itens e, para o valor total, podemos usar
a ação.
orderData.
e aí temos a propriedade de quantidade que podemos extrair
para que possamos usá-la.
Por último, mas não menos importante, para a data, é claro que quero gerar um registro de data e
hora aqui com nova data, esse construtor Javascript interno, se o executarmos dessa maneira, forneceremos o registro de data e
hora atual armazenado em um objeto Javascript no final.
Agora, esse novo pedido só precisa ser adicionado à nossa matriz de pedidos; portanto, retornamos um novo
instantâneo de estado aqui, onde copiamos
o estado antigo; novamente, não temos realmente nenhum outro estado aqui, portanto, copiar é
redundante se substituirmos de
qualquer maneira, mas caso você tenha um instantâneo de estado mais complexo aqui para esta fatia de sua
loja Redux, convém copiar o outro estado para não perdê-lo.
É por isso que adiciono aqui e, em seguida, defino pedidos iguais aos pedidos de estado e agora chamo concat nesta matriz, que
é uma função Javascript interna que adiciona um novo item a uma matriz e retorna uma nova matriz que
inclui esse item.
Portanto, a matriz antiga permanece intocada, a nova matriz é retornada e, é claro, nos permite atualizar isso de
uma maneira imutável, onde nunca tocamos nos dados originais, mas definimos o novo estado criando uma nova matriz que
inclui o novo objeto e lá simplesmente concatenar meu novo pedido. Com isso,
podemos acessar o aplicativo. js e importe o redutor de pedidos para a pasta da loja,
a pasta redutores e, para lá, os pedidos. arquivo js, é claro e mescla-o ao nosso
redutor raiz, talvez com um identificador de pedidos e depois apontando para o redutor de pedidos.
Agora isso deve estar disponível e agora podemos despachar ações, ou seja, aqui nossa ação de adicionar pedido e,
é claro, explorar essa fatia de estados e receber nossos pedidos. Enviar ações é a primeira coisa que quero
fazer, quero fazer isso de dentro da tela do carrinho quando pressionamos esse botão agora.
No momento, não estamos fazendo nada
lá, agora o objetivo é fazer um pedido e também limpar nosso carrinho. Então aqui na tela do carrinho, já
importamos o despacho de uso e o executamos para que tenhamos a função de despacho.
Portanto, tudo o que precisamos fazer é importar tudo como ações de pedidos de pedidos de ações da loja e, portanto, vou nomear
essas ações de pedidos para serem super precisas e
agora aqui, quando clicarmos neste botão, neste botão de ordem agora, podemos executar
um e nesta função, despachamos uma ação Redux, a ação orders, adicionamos order ao criador
da ação. Agora, precisamos passar duas coisas - os itens do carrinho e o valor total. É claro que ambos
estão disponíveis aqui, o valor total é armazenado no valor total do carrinho constante, os itens do
carrinho estão aqui, então apenas encaminhamos isso, encaminhamos o valor total do carrinho e esse deve ser o segundo
argumento, como primeiro argumento, na verdade os itens do carrinho, assim. Agora, observe que com isso, é claro, estou encaminhando itens do carrinho, eu sou
o carrinho de armazenamento que está na matriz e não no formato que eu tenho na minha
loja Redux do carrinho. Lá, eu tenho
um objeto, mas armazenar uma variedade de itens de carrinho em um pedido deve ficar bom,
então não há necessidade de obter esse objeto inalterado
também,
continuarei com a matriz que agora guardo.
Então agora despachamos isso, para visualizá-lo, agora
precisamos adicionar uma tela de pedidos e, para isso,
também quero adicionar um botão de menu e uma gaveta que nos permitam chegar lá como uma alternativa às telas
de nossa loja aqui.