1
00:00:02,100 --> 00:00:05,460
Para o botão excluir, vamos começar novamente com a lógica Redux.

2
00:00:05,490 --> 00:00:11,850
Portanto, aqui nas ações, por exemplo, podemos registrar um novo identificador, remover do carrinho soa como um

3
00:00:11,850 --> 00:00:17,120
nome adequado, uma vez que adicionamos ao carrinho antes, então remova do carrinho.

4
00:00:17,110 --> 00:00:22,710
Também adicionarei novamente uma função de criador de ação aqui, remova do carrinho.

5
00:00:22,740 --> 00:00:27,750
Agora, agora é necessário apenas o ID do produto que deve ser removido; portanto, apenas o ID do produto e,

6
00:00:27,750 --> 00:00:34,260
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

7
00:00:34,260 --> 00:00:40,800
do produto, para onde encaminhar o ID do produto que estou chegando aqui. Agora, no redutor, tínhamos esse estojo

8
00:00:40,800 --> 00:00:44,560
para adicionar ao carrinho, agora precisamos simplesmente

9
00:00:44,560 --> 00:00:48,280
adicionar outro estojo aqui e esse estojo

10
00:00:50,290 --> 00:00:53,030
é a remoção do estojo.

11
00:00:53,050 --> 00:00:57,960
Para isso, é necessário certificar-se de que você está importando o identificador de ação removido

12
00:00:58,000 --> 00:00:58,990
do carrinho

13
00:01:01,840 --> 00:01:03,670
do arquivo de ações do carrinho

14
00:01:03,670 --> 00:01:07,120
e, na caixa remover do carrinho aqui, temos dois casos novamente.

15
00:01:07,140 --> 00:01:12,660
Uma é que tínhamos apenas um item desse produto no carrinho, como para

16
00:01:12,660 --> 00:01:13,900
o tapete azul;

17
00:01:13,980 --> 00:01:16,760
nesse caso, precisamos removê-lo totalmente do objeto

18
00:01:16,770 --> 00:01:17,850
de itens

19
00:01:17,850 --> 00:01:23,400
do carrinho, portanto, desse objeto e, portanto, removê-lo dessa linha que nós produzimos aqui.

20
00:01:23,400 --> 00:01:27,870
Se tivermos dois ou mais itens, queremos reduzir a quantidade em 1.

21
00:01:27,870 --> 00:01:33,120
É claro que você sempre pode apagar esse item completamente, se quiser, mas quero mostrar como

22
00:01:33,120 --> 00:01:35,450
você pode diferenciar esses dois casos.

23
00:01:35,490 --> 00:01:41,130
Então, na verdade, se tivermos uma quantidade maior que uma, não quero apagar o item do

24
00:01:41,130 --> 00:01:43,870
carrinho, mas reduzir o valor em 1.

25
00:01:44,100 --> 00:01:51,210
Portanto, ao remover do carrinho, precisamos descobrir qual é a nossa quantidade. Portanto, nossa quantidade atual que eu armazeno nessa constante pode ser

26
00:01:51,210 --> 00:01:57,930
deduzida do nosso estado, é claro que, nos itens, precisamos encontrar o produto que procuramos e, é claro, podemos fazer isso

27
00:01:57,960 --> 00:02:00,000
com a ajuda do ID que

28
00:02:00,000 --> 00:02:04,770
é parte de nossa ação aqui no campo pid, porque agora os itens de estado

29
00:02:05,550 --> 00:02:11,440
são um objeto e, portanto, podemos acessar a ação. pid aqui, certo.

30
00:02:11,450 --> 00:02:16,680
Isso acessará dinamicamente o valor com a chave de ID do produto aqui em nosso item,

31
00:02:16,950 --> 00:02:18,380
portanto, com a

32
00:02:18,390 --> 00:02:21,220
ID do produto, estamos realizando essa ação e

33
00:02:21,240 --> 00:02:24,950
é assim que adicionamos itens ao nosso objeto de itens aqui.

34
00:02:24,960 --> 00:02:28,890
Usamos o nosso ID do produto como identificador. Agora é isso

35
00:02:28,920 --> 00:02:32,410
que uso aqui para ter acesso a ele.

36
00:02:32,430 --> 00:02:36,940
Isso terá uma quantidade, pois isso conterá um valor que é um item de produto.

37
00:02:36,990 --> 00:02:41,120
Você também pode adicionar uma verificação se esse item realmente faz parte do carrinho,

38
00:02:41,130 --> 00:02:46,290
mas, como construímos esse aplicativo, nunca devemos chegar a esse item. ação sem que esse produto faça

39
00:02:46,290 --> 00:02:51,690
parte do carrinho, porque só podemos acionar nossa ação de exclusão aqui de dentro da tela do carrinho,

40
00:02:51,690 --> 00:02:55,340
portanto, não precisamos verificar aqui, mas definitivamente precisamos obter a quantidade.

41
00:02:55,410 --> 00:03:03,780
Agora podemos verificar se a quantidade atual é maior que 1, o que significa que precisamos

42
00:03:03,780 --> 00:03:06,740
reduzi-la, precisamos reduzi-la, não apagá-la, caso

43
00:03:06,750 --> 00:03:08,940
contrário, precisamos apagá-la.

44
00:03:09,090 --> 00:03:11,790
Agora vamos começar com o caso de apagar.

45
00:03:11,850 --> 00:03:18,900
Então, aqui só precisamos retornar um novo objeto de itens que inclua todos os itens

46
00:03:18,930 --> 00:03:27,520
antigos, mas que não inclua mais esse item. Para que possamos ter nossos itens de carrinho atualizados aqui, onde

47
00:03:27,520 --> 00:03:36,870
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

48
00:03:36,870 --> 00:03:41,880
itens de carrinho atualizados para ação. pid.

49
00:03:41,880 --> 00:03:49,290
Portanto, isso excluirá este item do nosso objeto Javascript copiado aqui, excluirá esse item inteiramente, esse item do produto inteiramente

50
00:03:49,290 --> 00:03:57,020
do objeto de itens do carrinho. É assim que podemos apagá-lo. Agora, no outro caso, basta reduzi-lo,

51
00:03:57,020 --> 00:03:59,690
posso ter meu item de carrinho atualizado, para

52
00:04:01,040 --> 00:04:07,250
que esse item de carrinho único crie um novo item de carrinho com a classe de item de

53
00:04:07,280 --> 00:04:13,700
carrinho e, lá, deseje copiar os valores dos itens existentes. item do carrinho, mas simplesmente reduza a quantidade.

54
00:04:14,220 --> 00:04:17,910
Portanto, o item do carrinho leva a quantidade exatamente como

55
00:04:17,910 --> 00:04:25,290
os primeiros valores; agora, aqui, o objetivo é obter acesso aos itens de estado para o ID do produto que recebo

56
00:04:25,290 --> 00:04:33,450
na ação e, como repetir isso será complicado, eu o armazenarei em um ajudante uma constante , item de carrinho selecionado é este

57
00:04:33,510 --> 00:04:37,290
aqui, agora podemos substituí-lo aqui por item de carrinho selecionado e

58
00:04:37,290 --> 00:04:41,760
aqui eu posso usar cartItem selecionado. quantidade menos um.

59
00:04:41,760 --> 00:04:48,240
Agora, é claro que sabemos que isso não será zero porque a quantidade foi maior que 1 e agora podemos manter o

60
00:04:48,240 --> 00:04:49,820
restante dos dados, é claro.

61
00:04:49,830 --> 00:04:57,270
Então, mantemos o preço do produto aqui, mantemos o título do produto, que tudo não muda, mas

62
00:04:57,270 --> 00:05:00,840
a soma, é claro, muda e essa

63
00:05:00,910 --> 00:05:05,090
é a soma, a soma antiga menos o preço, é

64
00:05:05,100 --> 00:05:13,410
claro, menos o preço do produto, porque removemos um item, temos que reduzir a soma pelo preço de um item.

65
00:05:13,470 --> 00:05:21,870
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

66
00:05:21,870 --> 00:05:26,760
e criar itens de carrinho atualizados como uma variável aqui em vez de uma constante

67
00:05:26,760 --> 00:05:32,880
aqui no bloco else, para que eu apenas atualize esse valor de variáveis, para que aqui em o

68
00:05:33,240 --> 00:05:34,230
bloco if,

69
00:05:34,230 --> 00:05:40,530
também podemos usar o mesmo nome de variável, itens atualizados do carrinho, onde eu defino isso como uma cópia

70
00:05:40,530 --> 00:05:49,890
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

71
00:05:49,890 --> 00:05:56,610
antigo do carrinho com a quantidade e a soma atualizadas. Esses são os itens atualizados do carrinho, agora

72
00:05:56,700 --> 00:05:57,520
é

73
00:05:57,540 --> 00:06:02,550
claro que também precisaremos ajustar a quantidade total de nosso estado; portanto,

74
00:06:02,550 --> 00:06:10,800
após esse bloco, se retornarmos uma cópia do estado, os itens poderão ser definidos como itens atualizados do carrinho e,

75
00:06:11,160 --> 00:06:14,030
agora, o importante o valor total

76
00:06:14,100 --> 00:06:20,160
pode ser definido para indicar o valor total menos o preço do produto do

77
00:06:23,530 --> 00:06:31,030
item de carrinho selecionado, pois assim como atualizei a soma desse item de carrinho único, é claro que

78
00:06:31,060 --> 00:06:38,200
a soma total do carrinho também precisa ser reajustada. Agora, podemos tentar enviar essa ação remover do carrinho.

79
00:06:38,200 --> 00:06:46,940
Então, vamos para a tela do carrinho onde, no final, tenho a função remover e, agora,

80
00:06:46,940 --> 00:06:51,860
desejo despachar uma ação, portanto, precisarei acessar a

81
00:06:51,890 --> 00:07:03,040
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

82
00:07:03,550 --> 00:07:05,740
depois despachar isso lá em baixo.

83
00:07:05,740 --> 00:07:17,150
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

84
00:07:17,150 --> 00:07:24,080
pacote configurável que é totalmente opcional, você também pode direcionar as coisas específicas que precisa, portanto, as

85
00:07:24,080 --> 00:07:25,760
específicas criadores de

86
00:07:25,790 --> 00:07:31,610
ação, neste caso, remover do criador de carrinho de que precisaríamos e, em seguida, lá

87
00:07:32,480 --> 00:07:35,400
em baixo, basta executar esse criador de

88
00:07:35,420 --> 00:07:41,780
ação, no meu caso, usando ações de carrinho. removeFromCart, encaminhe o ID do produto que é claro que

89
00:07:41,780 --> 00:07:45,030
chegamos aqui, é itemData. item.

90
00:07:45,110 --> 00:07:50,810
e agora lembre-se de que estamos percorrendo itens dessa forma, por isso teremos um campo de ID

91
00:07:50,810 --> 00:07:55,840
do produto e, portanto, podemos usá-lo aqui para encaminhar isso para remover do carrinho. Esperamos

92
00:07:55,850 --> 00:08:00,770
que isso nos permita atualizar esta. E isso deve ser tudo, o

93
00:08:00,770 --> 00:08:05,470
Redux deve fazer o resto nos bastidores e renderizar automaticamente a tela do carrinho

94
00:08:05,570 --> 00:08:12,060
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

95
00:08:13,260 --> 00:08:13,790
uma camisa

96
00:08:13,800 --> 00:08:17,000
vermelha, de fato, um dos problemas que temos é a troca de pedidos, teremos

97
00:08:17,010 --> 00:08:19,800
que corrigir isso, mas você vê que a quantidade foi atualizada corretamente.

98
00:08:19,920 --> 00:08:25,620
Se agora remover isso, o valor total também será atualizado corretamente. Se agora remover isso, ele desapareceu completamente

99
00:08:26,360 --> 00:08:28,080
e agora também está desativado.

100
00:08:28,080 --> 00:08:31,970
Então isso geralmente funciona, mas é claro que a ordem está sendo trocada, não é

101
00:08:31,980 --> 00:08:34,140
algo que eu queira que aconteça aqui.

102
00:08:34,380 --> 00:08:40,620
Agora, para evitar que a ordem mude, podemos simplesmente ir para a tela do carrinho, onde eu altero meus itens

103
00:08:40,620 --> 00:08:45,960
para ser uma matriz, e só precisamos garantir que essa matriz seja sempre classificada da mesma

104
00:08:45,990 --> 00:08:51,690
maneira, porque esse seletor sempre será acionar e buscar novamente nossos dados sempre que nosso estado Redux mudar.

105
00:08:52,320 --> 00:08:57,540
Portanto, aqui, sempre obteremos o instantâneo de dados mais recente que temos lá e, portanto, é

106
00:08:57,540 --> 00:09:02,670
aqui que precisamos apenas classificá-lo da mesma maneira o tempo todo e, portanto, sempre renderizá-lo

107
00:09:02,670 --> 00:09:03,790
da mesma maneira.

108
00:09:03,900 --> 00:09:11,250
Portanto, precisamos apenas garantir que nossa matriz de itens de carrinho transformados seja classificada chamando a classificação lá.

109
00:09:11,410 --> 00:09:17,310
Se eu chamá-lo assim, começo a adicionar alguns dados aqui, agora você vê apenas isso

110
00:09:17,410 --> 00:09:21,820
não deu certo, porque não estamos dizendo como classificá-lo e não

111
00:09:21,820 --> 00:09:28,480
sabe como fazer isso para objetos fora de a caixa, mas podemos passar uma função para classificar

112
00:09:28,480 --> 00:09:34,490
onde sempre comparamos dois itens, a e b, um para o outro e, em seguida, classificar

113
00:09:34,600 --> 00:09:38,140
deve retornar um número no final que determina o

114
00:09:38,190 --> 00:09:40,780
que vem primeiro e lá, é

115
00:09:40,800 --> 00:09:50,530
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

116
00:09:50,530 --> 00:09:58,110
ID do produto de A, comparamos com a ID do produto de B e, se for maior, com uma expressão

117
00:09:58,150 --> 00:10:02,210
ternária aqui, retornei uma, caso contrário retornarei menos uma .

118
00:10:02,370 --> 00:10:07,620
Essa é a função de classificação normal que o Javascript acompanha e agora isso garante que

119
00:10:07,620 --> 00:10:08,610
sempre classifiquemos

120
00:10:08,670 --> 00:10:17,520
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.

121
00:10:17,520 --> 00:10:23,620
Agora podemos ter certeza de que também podemos clicar nesse botão do pedido agora e o adicionamos como um pedido que, a

122
00:10:23,610 --> 00:10:29,250
partir de então, podemos visitar com a útil gaveta aqui que nos permite ir para a tela de pedidos que,

123
00:10:29,250 --> 00:10:31,190
obviamente, ainda não temos Adicionar, acrescentar.