1 00:00:02,260 --> 00:00:08,030 Para garantir que também possamos receber pedidos neste aplicativo, repetiremos algo que fizemos antes, 2 00:00:08,050 --> 00:00:13,940 trabalharemos na tela de pedidos e trabalharemos em nossa lógica Redux para que possamos armazenar pedidos. 3 00:00:14,020 --> 00:00:15,980 Então, vou começar 4 00:00:16,060 --> 00:00:22,060 adicionando um novo redutor, os pedidos. arquivo js que mantém nosso redutor de pedidos e, claro, também precisaremos de um arquivo de 5 00:00:22,060 --> 00:00:26,280 ações em que gerenciamos nossas ações relacionadas a pedidos, os pedidos. arquivo js também. 6 00:00:27,010 --> 00:00:33,910 Então, vamos começar com os pedidos. Os redutores js arquivam aqui e novamente, como sempre, 7 00:00:33,910 --> 00:00:41,020 vamos querer ter um estado inicial aqui, que também define como nossos dados são modelados e os pedidos serão realmente 8 00:00:41,020 --> 00:00:42,640 simples neste aplicativo, serão 9 00:00:42,640 --> 00:00:46,660 apenas uma variedade de pedidos , é realmente tudo o que precisamos. 10 00:00:47,390 --> 00:00:53,630 Em seguida, podemos exportar aqui uma função padrão, que é nosso redutor, que obviamente possui um estado inicializado com 11 00:00:53,630 --> 00:01:00,830 o estado inicial, que recebe uma ação e que, é claro, tudo é tratado pelo Redux e retornamos nosso estado aqui, mas 12 00:01:00,830 --> 00:01:01,520 é 13 00:01:01,520 --> 00:01:07,580 claro que normalmente, também queremos ativar o tipo de ação e lidar com alguns casos diferentes aqui, 14 00:01:08,300 --> 00:01:13,350 para que possamos adicionar esta declaração de opção. Agora, com relação aos casos 15 00:01:13,380 --> 00:01:19,130 que queremos manipular, às ações que queremos manipular, há uma ação que desejo manipular 16 00:01:19,130 --> 00:01:26,500 no momento e que são minhas ações de adicionar pedido, portanto, adicionar pedido também se parece com um identificador 17 00:01:26,510 --> 00:01:34,390 adequado e depois exportarei meu adicione aqui o criador da ação do pedido, que deve receber duas coisas agora - 18 00:01:34,910 --> 00:01:40,450 os itens do meu carrinho ou os itens que fazem parte do pedido, mas 19 00:01:40,550 --> 00:01:47,180 esses são os itens do meu carrinho no final e, claro, o valor total e, é claro, 20 00:01:47,180 --> 00:01:52,550 todos os dados que temos no carrinho no final, conseguimos no carrinho, certo? 21 00:01:52,550 --> 00:01:58,760 Temos um valor total do carrinho, temos os itens do carrinho e, como solicitamos todo o carrinho, 22 00:01:58,760 --> 00:02:03,380 é claro que faz sentido que esses dados terminem no pedido. 23 00:02:03,520 --> 00:02:08,900 Agora, aqui no criador da ação, portanto, retornamos nosso novo objeto de ação e esse objeto 24 00:02:08,900 --> 00:02:17,240 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 25 00:02:17,240 --> 00:02:23,270 armazenamos em uma propriedade de itens de carrinho e, em seguida, quantia mantém o valor total, por exemplo. 26 00:02:23,270 --> 00:02:29,660 Agora depende de você passar isso em uma propriedade de dados de pedidos mesclados ou se você tiver duas 27 00:02:30,140 --> 00:02:33,690 ou mais propriedades como parte do seu objeto de ação. 28 00:02:33,720 --> 00:02:37,710 Esta é a ação, voltando ao redutor, o que deve acontecer quando recebermos um pedido? 29 00:02:38,580 --> 00:02:45,040 Bem, eu quero criar um novo objeto de pedido e, para isso, assim como antes, trabalharei com meus próprios modelos. 30 00:02:45,090 --> 00:02:52,110 Então, vamos à pasta de modelos e, em seguida, adicione pedidos. arquivo js onde temos uma ordem de classe que exportarei 31 00:02:52,110 --> 00:02:52,800 para 32 00:02:52,830 --> 00:02:58,890 não esquecer mais isso e, lá, obtemos um construtor que nos permite criar uma nova ordem. 33 00:02:58,890 --> 00:03:04,320 Agora, como deve ser um pedido? É claro que um pedido deve ter um ID, que 34 00:03:04,320 --> 00:03:04,700 não 35 00:03:04,770 --> 00:03:10,970 é o ID do produto, porque é claro que podemos pedir o mesmo produto várias vezes e, portanto, um pedido é totalmente desanexado. 36 00:03:11,040 --> 00:03:13,650 Além disso, um pedido pode conter mais de 37 00:03:13,650 --> 00:03:16,380 um produto. No final, solicitamos todo o nosso carrinho. 38 00:03:16,380 --> 00:03:18,570 Portanto, o pedido tem um ID 39 00:03:18,750 --> 00:03:26,160 independente, ele receberá os itens, o valor total e um pedido também precisam de uma data, é claro, porque quando fazemos um 40 00:03:26,160 --> 00:03:29,430 pedido, queremos armazenar essa data em que foi feito. 41 00:03:29,940 --> 00:03:31,500 E então eu vou armazenar 42 00:03:31,500 --> 00:03:42,160 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 43 00:03:42,170 --> 00:03:49,310 o que podemos fazer com os pedidos lá. Lá, eu quero lidar com o caso de 44 00:03:49,340 --> 00:03:53,260 adicionar pedido agora, que é a única ação que tenho. 45 00:03:53,270 --> 00:04:01,140 Portanto, é claro que você precisa importar esse identificador de ação e, aí, quero criar um novo pedido, armazená-lo em uma nova 46 00:04:01,160 --> 00:04:01,820 constante 47 00:04:01,820 --> 00:04:07,960 de pedido com o modelo de pedido que acabamos de criar que, portanto, você também precisa importar. 48 00:04:08,030 --> 00:04:14,030 Agora, com a nova palavra-chave, podemos criar um novo objeto Javascript com base nessa classe e, aí, precisamos do ID, 49 00:04:14,180 --> 00:04:17,330 dos itens, da quantidade total e da data da criação. 50 00:04:17,330 --> 00:04:23,040 Agora, apenas obtemos os itens e o valor total como parte de nossa ação aqui, como você pode perceber. 51 00:04:23,240 --> 00:04:28,630 Agora, o ID é algo que mais tarde geraremos dinamicamente em um 52 00:04:28,640 --> 00:04:36,530 servidor; por enquanto, usarei um idiota pseudo-único ID com nova data para string; a data do curso é um 53 00:04:36,560 --> 00:04:42,140 objeto Javascript interno e isso no final gera um ID que é único. 54 00:04:42,140 --> 00:04:48,230 Tecnicamente, poderíamos criar dois pedidos exatamente no mesmo timestamp, exatamente no mesmo milissegundo, embora em nosso aplicativo onde 55 00:04:48,230 --> 00:04:52,340 limpamos o carrinho depois de pressionar adicionar pedido ou pedido agora, 56 00:04:52,340 --> 00:04:54,230 isso realmente não seja possível. 57 00:04:54,230 --> 00:04:57,470 Portanto, este é um bom ID fictício para o momento; ele deve ser uma 58 00:04:57,470 --> 00:04:59,050 cadeia de caracteres, o que é 59 00:05:00,110 --> 00:05:06,170 importante e, além disso, os itens, é claro, que podem ser armazenados. Conseguimos isso em nossa ação, certo, a 60 00:05:06,170 --> 00:05:10,770 ação tem essa propriedade de dados do pedido e, lá, teremos os itens. 61 00:05:11,060 --> 00:05:16,580 Então, dados de ordem de ação. itens nos fornece os itens e, para o valor total, podemos usar 62 00:05:16,580 --> 00:05:17,280 a ação. 63 00:05:17,330 --> 00:05:20,250 orderData. 64 00:05:20,450 --> 00:05:23,810 e aí temos a propriedade de quantidade que podemos extrair 65 00:05:23,810 --> 00:05:25,650 para que possamos usá-la. 66 00:05:25,850 --> 00:05:31,700 Por último, mas não menos importante, para a data, é claro que quero gerar um registro de data e 67 00:05:31,700 --> 00:05:37,730 hora aqui com nova data, esse construtor Javascript interno, se o executarmos dessa maneira, forneceremos o registro de data e 68 00:05:37,940 --> 00:05:41,060 hora atual armazenado em um objeto Javascript no final. 69 00:05:41,060 --> 00:05:46,700 Agora, esse novo pedido só precisa ser adicionado à nossa matriz de pedidos; portanto, retornamos um novo 70 00:05:47,000 --> 00:05:48,960 instantâneo de estado aqui, onde copiamos 71 00:05:49,010 --> 00:05:53,650 o estado antigo; novamente, não temos realmente nenhum outro estado aqui, portanto, copiar é 72 00:05:53,750 --> 00:05:55,410 redundante se substituirmos de 73 00:05:55,460 --> 00:06:01,160 qualquer maneira, mas caso você tenha um instantâneo de estado mais complexo aqui para esta fatia de sua 74 00:06:01,160 --> 00:06:04,550 loja Redux, convém copiar o outro estado para não perdê-lo. 75 00:06:04,550 --> 00:06:11,510 É por isso que adiciono aqui e, em seguida, defino pedidos iguais aos pedidos de estado e agora chamo concat nesta matriz, que 76 00:06:11,510 --> 00:06:17,450 é uma função Javascript interna que adiciona um novo item a uma matriz e retorna uma nova matriz que 77 00:06:17,450 --> 00:06:18,530 inclui esse item. 78 00:06:18,560 --> 00:06:24,040 Portanto, a matriz antiga permanece intocada, a nova matriz é retornada e, é claro, nos permite atualizar isso de 79 00:06:24,040 --> 00:06:29,450 uma maneira imutável, onde nunca tocamos nos dados originais, mas definimos o novo estado criando uma nova matriz que 80 00:06:29,450 --> 00:06:36,590 inclui o novo objeto e lá simplesmente concatenar meu novo pedido. Com isso, 81 00:06:36,770 --> 00:06:45,590 podemos acessar o aplicativo. js e importe o redutor de pedidos para a pasta da loja, 82 00:06:45,590 --> 00:06:52,040 a pasta redutores e, para lá, os pedidos. arquivo js, é claro e mescla-o ao nosso 83 00:06:52,100 --> 00:06:57,750 redutor raiz, talvez com um identificador de pedidos e depois apontando para o redutor de pedidos. 84 00:06:57,780 --> 00:07:04,160 Agora isso deve estar disponível e agora podemos despachar ações, ou seja, aqui nossa ação de adicionar pedido e, 85 00:07:04,230 --> 00:07:11,740 é claro, explorar essa fatia de estados e receber nossos pedidos. Enviar ações é a primeira coisa que quero 86 00:07:11,740 --> 00:07:18,220 fazer, quero fazer isso de dentro da tela do carrinho quando pressionamos esse botão agora. 87 00:07:18,220 --> 00:07:19,990 No momento, não estamos fazendo nada 88 00:07:20,020 --> 00:07:26,790 lá, agora o objetivo é fazer um pedido e também limpar nosso carrinho. Então aqui na tela do carrinho, já 89 00:07:26,800 --> 00:07:33,270 importamos o despacho de uso e o executamos para que tenhamos a função de despacho. 90 00:07:33,340 --> 00:07:45,490 Portanto, tudo o que precisamos fazer é importar tudo como ações de pedidos de pedidos de ações da loja e, portanto, vou nomear 91 00:07:45,520 --> 00:07:50,140 essas ações de pedidos para serem super precisas e 92 00:07:50,290 --> 00:07:57,450 agora aqui, quando clicarmos neste botão, neste botão de ordem agora, podemos executar 93 00:07:57,450 --> 00:08:05,500 um e nesta função, despachamos uma ação Redux, a ação orders, adicionamos order ao criador 94 00:08:05,580 --> 00:08:10,500 da ação. Agora, precisamos passar duas coisas - os itens do carrinho e o valor total. É claro que ambos 95 00:08:10,500 --> 00:08:16,680 estão disponíveis aqui, o valor total é armazenado no valor total do carrinho constante, os itens do 96 00:08:16,680 --> 00:08:23,580 carrinho estão aqui, então apenas encaminhamos isso, encaminhamos o valor total do carrinho e esse deve ser o segundo 97 00:08:23,580 --> 00:08:32,420 argumento, como primeiro argumento, na verdade os itens do carrinho, assim. Agora, observe que com isso, é claro, estou encaminhando itens do carrinho, eu sou 98 00:08:32,430 --> 00:08:37,620 o carrinho de armazenamento que está na matriz e não no formato que eu tenho na minha 99 00:08:37,620 --> 00:08:40,310 loja Redux do carrinho. Lá, eu tenho 100 00:08:40,380 --> 00:08:48,130 um objeto, mas armazenar uma variedade de itens de carrinho em um pedido deve ficar bom, 101 00:08:48,130 --> 00:08:52,500 então não há necessidade de obter esse objeto inalterado 102 00:08:52,510 --> 00:08:53,340 também, 103 00:08:53,340 --> 00:08:56,690 continuarei com a matriz que agora guardo. 104 00:08:56,720 --> 00:08:58,460 Então agora despachamos isso, para visualizá-lo, agora 105 00:08:58,460 --> 00:09:00,860 precisamos adicionar uma tela de pedidos e, para isso, 106 00:09:00,980 --> 00:09:06,140 também quero adicionar um botão de menu e uma gaveta que nos permitam chegar lá como uma alternativa às telas 107 00:09:06,140 --> 00:09:07,520 de nossa loja aqui.