1
00:00:02,370 --> 00:00:07,800
Agora, estamos realmente perto do final deste módulo, portanto, precisamos garantir que agora despachem ações para

2
00:00:07,800 --> 00:00:11,370
criar um novo produto ou atualizar um produto e, portanto,

3
00:00:11,410 --> 00:00:16,080
antes de tudo, precisamos adicionar essas ações aqui em nossa pasta de ações .

4
00:00:16,210 --> 00:00:28,830
Então, eu exportarei uma constante aqui, criará um produto como este aqui, criará produto e também aqui, outro identificador para atualização em produto

5
00:00:28,860 --> 00:00:38,500
com atualização de produto e atualização de produto como esta e criará criadores de ação adequados ou criará

6
00:00:38,500 --> 00:00:47,670
produto e agora é com você como você deseja estruturar isso, quais dados você espera obter

7
00:00:47,670 --> 00:00:50,270
ao criar um produto.

8
00:00:50,340 --> 00:00:56,370
Eu sou um fã de criar o produto realmente aqui na ação ou

9
00:00:56,490 --> 00:01:04,590
no redutor, então, na verdade, espero obter um título aqui, uma descrição, um imageUrl e um preço, digamos,

10
00:01:04,590 --> 00:01:14,070
e então retorno um objeto de ação onde o tipo é criar produto e os dados do produto são simplesmente todos esses

11
00:01:14,070 --> 00:01:15,220
dados mesclados.

12
00:01:15,450 --> 00:01:22,710
Então, aqui tenho meu título, que é mapeado para o título que recebemos como argumento, descrição mapeada para

13
00:01:23,340 --> 00:01:28,230
descrição e, portanto, também podemos usar um atalho Javascript moderno, onde se

14
00:01:28,230 --> 00:01:31,490
o nome da propriedade e o nome da

15
00:01:31,530 --> 00:01:36,810
variável de valor forem iguais, basta escrever assim, por isso, se é o

16
00:01:36,810 --> 00:01:38,610
mesmo que price: price,

17
00:01:38,610 --> 00:01:45,880
podemos simplesmente escrever isso aqui, é claro que também é possível para título e descrição, para mapearmos todos esses

18
00:01:45,880 --> 00:01:54,460
argumentos em propriedades com o mesmo nome nesse objeto e se atualizarmos um produto relativamente igual, atualize o produto, para que geralmente

19
00:01:54,460 --> 00:01:59,920
possamos copiá-lo, mas há uma diferença importante. Aqui também precisamos do ID do produto que precisa ser alterado, para

20
00:01:59,920 --> 00:02:08,370
obtê-lo como um argumento extra e podemos armazená-lo em nossa ação, portanto, em uma propriedade separada do nosso objeto de ação. Agora, no redutor, é claro que

21
00:02:08,370 --> 00:02:09,510
precisamos

22
00:02:09,510 --> 00:02:10,920
lidar com

23
00:02:10,920 --> 00:02:20,900
isso, precisamos lidar com a criação e atualização. Então, vamos adicionar um novo caso aqui no redutor de produtos para criar

24
00:02:20,930 --> 00:02:28,940
produto e, para isso, certifique-se de importar o produto a partir de produtos de ações e, é claro, um para atualizar

25
00:02:28,940 --> 00:02:33,740
um produto com o produto de atualização, certifique-se de importá-lo também.

26
00:02:35,970 --> 00:02:42,300
Na criação de produto, é claro que precisamos criar um novo produto e eu o armazenarei em constante

27
00:02:42,300 --> 00:02:45,230
aqui com a nova palavra-chave no modelo de

28
00:02:45,230 --> 00:02:51,780
produto que criamos anteriormente, para isso, basta importar o modelo de produto aqui da a pasta models e esse

29
00:02:51,780 --> 00:02:58,260
produto aqui recebem um ID que, por enquanto, pode gerar manualmente com nova data para string para ter um

30
00:02:58,260 --> 00:03:04,350
tipo de ID fictício pseudo-exclusivo para o momento posterior; isso será gerado em um servidor, mas ainda não

31
00:03:04,350 --> 00:03:05,600
o temos. .

32
00:03:05,970 --> 00:03:11,580
O ID do proprietário no momento é codificado para U1 porque não temos usuários neste aplicativo no momento, mas

33
00:03:11,580 --> 00:03:17,910
o título e assim por diante podem ser preenchidos com dados da ação, porque na ação para criar um produto, temos a

34
00:03:17,940 --> 00:03:22,040
chave de dados do produto e que contém um objeto com título, descrição, imageUrl

35
00:03:22,050 --> 00:03:24,010
e preço e esses são os

36
00:03:24,010 --> 00:03:25,800
dados que podemos recuperar agora.

37
00:03:25,980 --> 00:03:36,000
Então aqui para título, temos a ação productData. título, para o imageUrl, é ação. informações do

38
00:03:36,360 --> 00:03:43,800
produto. imageUrl, sem surpresa para a descrição, é ação. informações do produto. descrição e

39
00:03:44,380 --> 00:03:52,780
pelo preço, é ação. informações do produto. preço. Agora este é um novo produto que eu crio.

40
00:03:53,070 --> 00:03:58,890
Agora precisamos adicioná-lo à nossa loja retornando nosso estado atualizado aqui, onde primeiro copio o estado existente

41
00:03:58,890 --> 00:04:03,840
e agora preciso adicioná-lo aos produtos disponíveis e aos produtos de usuário porque o

42
00:04:03,840 --> 00:04:09,690
criamos, certamente pertence para nós, então ele precisa fazer parte das matrizes e dos produtos disponíveis. Bem, podemos

43
00:04:09,690 --> 00:04:15,480
pegar esses produtos disponíveis e usar o concat para obter uma nova matriz que é a matriz

44
00:04:15,480 --> 00:04:21,990
antiga, além de adicionar um novo elemento e, aqui, o novo produto é esse novo elemento e eu fazemos exatamente

45
00:04:21,990 --> 00:04:25,040
a mesma coisa aqui para produtos de usuários.

46
00:04:25,110 --> 00:04:34,220
Então, aqui eu uso produtos de usuários estaduais e concordo com meu novo produto. Agora, e a atualização? Para atualizar, precisamos primeiro encontrar o

47
00:04:34,220 --> 00:04:37,430
índice do produto atual, para que o

48
00:04:37,430 --> 00:04:46,580
índice do produto possa ser um nome constante, acessando nossos produtos de usuário e, com o índice find, que é um

49
00:04:46,580 --> 00:04:51,570
método Javascript interno, podemos encontrar o índice de um determinado elemento.

50
00:04:51,590 --> 00:04:57,440
Novamente, isso leva uma função que é executada em todos os elementos dessa matriz e que precisa retornar

51
00:04:57,440 --> 00:05:02,930
true para que tenhamos um índice. Lá, examinarei os IDs e procurarei os IDs onde é

52
00:05:02,930 --> 00:05:05,330
igual ao meu pid, minha ação

53
00:05:05,330 --> 00:05:11,520
pid, porque se você se lembra de como configuramos essa ação; para atualizar, temos o campo pid aqui que

54
00:05:11,520 --> 00:05:13,980
contém os IDs do produto que estamos recebendo.

55
00:05:13,980 --> 00:05:19,470
Então, eu estou procurando esse produto e, em seguida, eu armazeno o índice desse produto na matriz

56
00:05:19,620 --> 00:05:21,890
de produtos do usuário no índice do

57
00:05:21,900 --> 00:05:27,720
produto aqui, agora podemos criar um produto atualizado aqui que é tecnicamente um novo objeto de produto, mas,

58
00:05:27,720 --> 00:05:29,570
é claro, pré-preenchido com alguns dados,

59
00:05:29,670 --> 00:05:31,200
por exemplo, mantemos o

60
00:05:31,230 --> 00:05:34,320
ID e, portanto, realizamos uma ação pid como um valor.

61
00:05:34,320 --> 00:05:40,080
Também mantenho o ID do proprietário e, para isso, posso acessar produtos de usuário de estado para o índice que

62
00:05:40,080 --> 00:05:46,070
acabamos de descobrir, portanto, para esse índice de produto,. ownerID, não vou mudar isso.

63
00:05:46,290 --> 00:05:48,800
Claro que vou guardar o novo

64
00:05:48,900 --> 00:05:59,430
título, então aqui vou guardar a ação. informações do produto. título, vou armazenar o novo imageUrl, então ação. informações do

65
00:05:59,430 --> 00:06:03,180
produto. imageUrl e eu armazenamos

66
00:06:03,180 --> 00:06:11,190
uma nova descrição, então ação. informações do produto. descrição. No entanto, mencionei que o preço não deve

67
00:06:11,520 --> 00:06:24,750
ser editável; portanto, como valor, manterei o preço original, para indicar o índice de produtos dos usuários. preço aqui.

68
00:06:24,840 --> 00:06:30,150
A propósito, isso também significa que nossa ação não é totalmente correta; também espero um preço; não devo fazê-lo porque

69
00:06:30,150 --> 00:06:36,060
não podemos inseri-lo em nossos insumos de qualquer maneira, não precisamos disso, portanto não devemos espere aqui, não devemos encaminhá-lo como parte

70
00:06:36,390 --> 00:06:41,090
dos dados do produto para atualização, para um novo produto que precisamos, mas para atualização, não precisamos.

71
00:06:41,500 --> 00:06:46,600
Então, com isso, temos nosso produto atualizado com alguns dados novos e antigos, agora

72
00:06:46,600 --> 00:06:55,090
precisamos atualizar nosso estado, é claro, e para isso, temos os produtos de usuário atualizados, onde, no final, copio meus produtos de usuário existentes

73
00:06:55,210 --> 00:07:01,960
com esta sintaxe aqui para criar uma cópia e, em seguida, defino produtos de usuário atualizados para o

74
00:07:01,960 --> 00:07:09,460
índice de produto selecionado iguais ao produto atualizado, então substituo o produto nesse índice pelo novo produto atualizado em minha cópia,

75
00:07:09,460 --> 00:07:15,790
não na matriz original, mas em minha cópia. Preciso fazer o mesmo nos produtos disponíveis, mas

76
00:07:15,790 --> 00:07:20,770
primeiro preciso encontrar o índice, porque esse índice aqui só funciona para os produtos

77
00:07:20,770 --> 00:07:25,230
do usuário, o índice nos produtos disponíveis é muito provavelmente um diferente,

78
00:07:25,750 --> 00:07:32,200
então eu tenho o meu disponível índice do produto aqui, se você quiser chamá-lo assim, que geralmente possui a

79
00:07:32,200 --> 00:07:37,330
mesma lógica de seleção, para que possamos copiá-lo, mas é claro que examinarei a matriz

80
00:07:37,420 --> 00:07:45,660
de produtos disponíveis em vez da matriz de produtos do usuário. E agora, novamente, aqui podemos ter os produtos disponíveis atualizados,

81
00:07:45,660 --> 00:07:53,280
onde eu copio meus produtos disponíveis no estado e, em seguida, defino os produtos disponíveis atualizados para

82
00:07:53,340 --> 00:08:02,110
o índice de produto especificado igual, com licença para o índice de produto disponível, é claro, igual ao produto atualizado,

83
00:08:02,410 --> 00:08:07,810
para que Substituo meu produto existente pelo produto atualizado nos produtos disponíveis

84
00:08:07,810 --> 00:08:15,030
e na matriz de produtos do usuário. Bem, agora precisamos apenas retornar nosso novo estado, antes

85
00:08:15,030 --> 00:08:23,490
de tudo copiar o existente e agora definir produtos disponíveis iguais aos produtos disponíveis atualizados e definir produtos do usuário iguais aos

86
00:08:23,490 --> 00:08:32,790
produtos atualizados do usuário, portanto, para minhas matrizes atualizadas, estou configurando há. Com isso, esperamos ter toda a lógica de que precisamos, agora vamos despachar esses

87
00:08:32,790 --> 00:08:38,880
eventos de dentro da tela do produto adicionado. Portanto, aqui precisamos importar o despacho

88
00:08:38,880 --> 00:08:46,440
de uso do React Redux e importar nossas ações; portanto, importe tudo como ações de produtos

89
00:08:46,530 --> 00:08:54,910
da pasta store, da pasta actions e do arquivo products e, em seguida, despache essas coisas no

90
00:08:55,360 --> 00:09:01,060
manipulador de envio, é claro. Aqui, o que enviamos depende de estarmos editando

91
00:09:01,150 --> 00:09:02,540
ou adicionando amd,

92
00:09:02,650 --> 00:09:08,110
como mencionei, podemos descobrir qual é o caso com a ajuda do produto editado, se estiver

93
00:09:08,110 --> 00:09:11,100
definido, estamos editando, se não estiver definido, estamos adicionando.

94
00:09:11,100 --> 00:09:18,370
Portanto, aqui, no manipulador de envio, podemos adicionar um if check e se o produto editado, se estiver definido, estivermos

95
00:09:18,460 --> 00:09:19,170
editando,

96
00:09:19,300 --> 00:09:25,660
então desejo despachar meu evento de atualização do produto, para que, antes de tudo, eu precisa criar

97
00:09:25,660 --> 00:09:33,650
essa função de despacho com a ajuda do uso de despacho e agora com o criado, lá em baixo podemos chamar ações

98
00:09:34,310 --> 00:09:39,410
de despacho, atualizar produto, porque é isso que estamos fazendo aqui e agora

99
00:09:40,570 --> 00:09:42,700
encaminhar todos os dados que

100
00:09:42,700 --> 00:09:44,980
precisamos aqui, que é o meu

101
00:09:45,130 --> 00:09:49,060
ID de produto , esse é o ID do produto

102
00:09:51,850 --> 00:09:59,020
que estamos editando, estamos extraindo isso aqui e, é claro, além disso, também encaminhe o título, encaminhe a descrição,

103
00:09:59,050 --> 00:10:07,630
todas essas constantes de estado que temos aqui, imageUrl e não o preço, porque não precisa disso e, no caso contrário, isso significa

104
00:10:07,630 --> 00:10:09,060
que estamos adicionando, então

105
00:10:09,130 --> 00:10:13,560
desejo despachar a ação dos produtos. criar produto, aqui

106
00:10:13,660 --> 00:10:21,850
encaminhamos título, descrição, imageUrl e também o preço e, com isso, devemos ter uma configuração

107
00:10:21,900 --> 00:10:26,580
na qual esperamos poder adicionar e editar produtos.

108
00:10:26,640 --> 00:10:28,040
Então, vamos

109
00:10:28,050 --> 00:10:36,060
salvar isso e vamos dar uma olhada. Se agora formos para a área de administração aqui e eu adicionei isso

110
00:10:36,120 --> 00:10:43,460
e adiciono um ponto de exclamação aqui e também um aqui na descrição e clico em salvar, fico indefinido não é um objeto, avaliando

111
00:10:43,460 --> 00:10:45,440
o preço dos adereços para fixo.

112
00:10:45,530 --> 00:10:49,540
Parece que perdi meu preço aqui ao tentar atualizar isso.

113
00:10:49,850 --> 00:10:54,140
Bem, tudo bem, antes de corrigirmos isso, vamos ver se a adição de um novo produto funciona.

114
00:10:54,260 --> 00:11:00,890
Se eu adicionar um produto aqui com test, test que obviamente não é um imageUrl válido, portanto

115
00:11:00,890 --> 00:11:06,750
não veremos uma imagem, mas pelo menos saboreamos algo, isso também é um teste.

116
00:11:06,830 --> 00:11:10,250
Se tentarmos isso e eu clicar em enviar, isso também não

117
00:11:10,250 --> 00:11:13,220
funcionará, então, de alguma forma, salvar o preço

118
00:11:13,220 --> 00:11:19,700
não funciona e acho que o problema está aqui, é claro, o problema aqui é que o preço é realmente

119
00:11:19,700 --> 00:11:24,890
uma string aqui, mas deve ser um número, para que possamos convertê-lo facilmente em um número,

120
00:11:24,890 --> 00:11:33,580
adicionando um sinal de mais aqui antes de passá-lo para criar um produto; para atualização, por outro lado, se dermos uma olhada no redutor de nossos produtos,

121
00:11:33,580 --> 00:11:36,790
ele normalmente deve manter o preço que já tinha .

122
00:11:36,850 --> 00:11:42,870
Então, vamos ver se esse plus corrige isso para adicionar ou se há um problema diferente também, essa foi uma alteração necessária de

123
00:11:42,880 --> 00:11:48,060
qualquer maneira, mas vamos ver se há outro problema. Então teste, teste, doze, digite

124
00:11:48,060 --> 00:11:54,330
apenas números aqui, não algum texto que você possa atualmente, mas que o quebraria,

125
00:11:54,330 --> 00:12:02,950
teste isso, pressione este botão, sim, isso não parece muito ruim, temos algum problema com a imagem aqui, mas

126
00:12:02,950 --> 00:12:09,920
se rolarmos para baixo, na verdade aqui, se descartarmos isso, podemos ver aqui o nosso

127
00:12:09,920 --> 00:12:14,030
produto, então o preço está faltando, então algo está

128
00:12:14,040 --> 00:12:18,290
errado lá e também não parecemos salvar a imagem corretamente,

129
00:12:18,390 --> 00:12:22,380
não apenas porque ela não é exibida, mas por

130
00:12:22,380 --> 00:12:25,400
causa de esse aviso que recebemos,

131
00:12:25,740 --> 00:12:27,570
mas geralmente funciona.

132
00:12:27,570 --> 00:12:31,650
No entanto, por exemplo, aqui, se eu tentar atualizar e salvar isso, ainda temos um

133
00:12:31,650 --> 00:12:33,320
erro, então ainda há algo errado.

134
00:12:33,360 --> 00:12:39,270
Portanto, uma coisa errada está nas ações, é claro, para atualizar o produto aqui, o tipo deve ser a atualização do produto e

135
00:12:39,270 --> 00:12:41,100
não a criação do produto; caso

136
00:12:41,100 --> 00:12:45,710
contrário, acionamos a ação errada no redutor, o que explica o erro de preço que recebemos lá.

137
00:12:45,720 --> 00:12:50,190
Portanto, isso deve ser um produto de atualização aqui para atualizar um produto sem surpresa.

138
00:12:50,400 --> 00:12:57,060
Portanto, esse é um problema, mas outro grande problema pode ser encontrado na tela do produto adicionado. Eu uso meu método de retorno de chamada de uso

139
00:12:57,060 --> 00:13:00,580
aqui para quebrar o manipulador de envio corretamente e faço

140
00:13:00,660 --> 00:13:03,480
isso para evitar recriações desnecessárias das funções.

141
00:13:03,480 --> 00:13:08,730
O problema é que eu inicialmente configurei isso para ter uma matriz vazia como uma lista de dependências, o que

142
00:13:08,730 --> 00:13:12,740
significa que isso nunca é recriado, o que fazia sentido quando só tínhamos log de

143
00:13:13,230 --> 00:13:17,100
console lá, mas agora estamos fazendo coisas lá e agora realmente temos dependências.

144
00:13:17,100 --> 00:13:22,710
No momento, nunca recriei essa função, o que significa que ela nunca é recriada para seus valores atualizados.

145
00:13:22,710 --> 00:13:28,180
Portanto, quando enviamos nosso formulário, nunca levamos em conta o que o usuário digitou.

146
00:13:28,200 --> 00:13:30,930
Então, na verdade, agora precisamos

147
00:13:31,020 --> 00:13:40,590
especificar dependências aqui, a função de despacho, mas mais importante ainda, o ID do produto, o título, a

148
00:13:40,680 --> 00:13:49,380
descrição e o imageUrl e, claro, o preço. Agora, com isso, se salvarmos isso, ficaremos bem e todos os problemas

149
00:13:49,380 --> 00:13:50,880
deverão ter desaparecido.

150
00:13:50,880 --> 00:13:52,220
Então, vamos esperar

151
00:13:52,290 --> 00:13:59,510
que isso seja recarregado, vá para o administrador agora e comece a editá-lo, talvez e agora, se adicionarmos um ponto de exclamação

152
00:13:59,510 --> 00:14:05,660
no título e na descrição e salvarmos e voltarmos, vemos isso aqui e se formos para produtos , também

153
00:14:05,720 --> 00:14:09,090
vemos aqui e nos detalhes, também vemos esse ponto de exclamação.

154
00:14:09,170 --> 00:14:12,910
Agora, se voltarmos para o administrador e criarmos

155
00:14:13,080 --> 00:14:15,200
um novo produto,

156
00:14:15,390 --> 00:14:21,790
testemos, testamos, doze, testemos isso e eu salvarei isso e voltarei, agora isso

157
00:14:21,890 --> 00:14:26,780
também será exibido lá embaixo. É claro que a imagem não

158
00:14:26,810 --> 00:14:31,480
aparece porque não inserimos um URL válido, mas todos os outros dados são

159
00:14:31,550 --> 00:14:35,410
exibidos. Portanto, isso geralmente está funcionando e, é claro, você pode

160
00:14:35,410 --> 00:14:44,450
inserir um imageUrl válido e que também pode quebrar, vamos testar rapidamente também. Então, vamos voltar à seção de administração e adicionar uma prateleira aqui, talvez,

161
00:14:44,470 --> 00:14:53,970
por isso selecionei o URL de uma prateleira que encontrei na Internet para 199. 99, esta é uma boa

162
00:14:53,970 --> 00:15:00,870
prateleira como esta. Se agora salvarmos isso e voltarmos, isso parece bom, aqui está a

163
00:15:00,870 --> 00:15:05,260
nossa imagem e também a vemos aqui na tela do produto, e também podemos vê-la aqui.

164
00:15:05,730 --> 00:15:07,070
Então, isso

165
00:15:07,080 --> 00:15:11,610
parece funcionar e, com isso, geralmente temos uma configuração que funciona.

166
00:15:11,610 --> 00:15:16,410
Agora, há algumas coisas em que quero trabalhar, por exemplo, antes de excluir, seria bom ter

167
00:15:16,410 --> 00:15:23,310
uma pequena caixa de diálogo de confirmação e, além disso, quero ter certeza de que, quando adicionamos ou editamos um produto, quando

168
00:15:23,400 --> 00:15:26,140
clicamos em salvar aqui, navegamos automaticamente de volta.

169
00:15:26,130 --> 00:15:31,590
Portanto, essas são apenas pequenas coisas, é claro, mas acho que elas representam uma boa final aqui neste módulo.