Agora, estamos realmente perto do final deste módulo, portanto, precisamos garantir que agora despachem ações para
criar um novo produto ou atualizar um produto e, portanto,
antes de tudo, precisamos adicionar essas ações aqui em nossa pasta de ações .
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
com atualização de produto e atualização de produto como esta e criará criadores de ação adequados ou criará
produto e agora é com você como você deseja estruturar isso, quais dados você espera obter
ao criar um produto.
Eu sou um fã de criar o produto realmente aqui na ação ou
no redutor, então, na verdade, espero obter um título aqui, uma descrição, um imageUrl e um preço, digamos,
e então retorno um objeto de ação onde o tipo é criar produto e os dados do produto são simplesmente todos esses
dados mesclados.
Então, aqui tenho meu título, que é mapeado para o título que recebemos como argumento, descrição mapeada para
descrição e, portanto, também podemos usar um atalho Javascript moderno, onde se
o nome da propriedade e o nome da
variável de valor forem iguais, basta escrever assim, por isso, se é o
mesmo que price: price,
podemos simplesmente escrever isso aqui, é claro que também é possível para título e descrição, para mapearmos todos esses
argumentos em propriedades com o mesmo nome nesse objeto e se atualizarmos um produto relativamente igual, atualize o produto, para que geralmente
possamos copiá-lo, mas há uma diferença importante. Aqui também precisamos do ID do produto que precisa ser alterado, para
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
precisamos
lidar com
isso, precisamos lidar com a criação e atualização. Então, vamos adicionar um novo caso aqui no redutor de produtos para criar
produto e, para isso, certifique-se de importar o produto a partir de produtos de ações e, é claro, um para atualizar
um produto com o produto de atualização, certifique-se de importá-lo também.
Na criação de produto, é claro que precisamos criar um novo produto e eu o armazenarei em constante
aqui com a nova palavra-chave no modelo de
produto que criamos anteriormente, para isso, basta importar o modelo de produto aqui da a pasta models e esse
produto aqui recebem um ID que, por enquanto, pode gerar manualmente com nova data para string para ter um
tipo de ID fictício pseudo-exclusivo para o momento posterior; isso será gerado em um servidor, mas ainda não
o temos. .
O ID do proprietário no momento é codificado para U1 porque não temos usuários neste aplicativo no momento, mas
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
chave de dados do produto e que contém um objeto com título, descrição, imageUrl
e preço e esses são os
dados que podemos recuperar agora.
Então aqui para título, temos a ação productData. título, para o imageUrl, é ação. informações do
produto. imageUrl, sem surpresa para a descrição, é ação. informações do produto. descrição e
pelo preço, é ação. informações do produto. preço. Agora este é um novo produto que eu crio.
Agora precisamos adicioná-lo à nossa loja retornando nosso estado atualizado aqui, onde primeiro copio o estado existente
e agora preciso adicioná-lo aos produtos disponíveis e aos produtos de usuário porque o
criamos, certamente pertence para nós, então ele precisa fazer parte das matrizes e dos produtos disponíveis. Bem, podemos
pegar esses produtos disponíveis e usar o concat para obter uma nova matriz que é a matriz
antiga, além de adicionar um novo elemento e, aqui, o novo produto é esse novo elemento e eu fazemos exatamente
a mesma coisa aqui para produtos de usuários.
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
índice do produto atual, para que o
índice do produto possa ser um nome constante, acessando nossos produtos de usuário e, com o índice find, que é um
método Javascript interno, podemos encontrar o índice de um determinado elemento.
Novamente, isso leva uma função que é executada em todos os elementos dessa matriz e que precisa retornar
true para que tenhamos um índice. Lá, examinarei os IDs e procurarei os IDs onde é
igual ao meu pid, minha ação
pid, porque se você se lembra de como configuramos essa ação; para atualizar, temos o campo pid aqui que
contém os IDs do produto que estamos recebendo.
Então, eu estou procurando esse produto e, em seguida, eu armazeno o índice desse produto na matriz
de produtos do usuário no índice do
produto aqui, agora podemos criar um produto atualizado aqui que é tecnicamente um novo objeto de produto, mas,
é claro, pré-preenchido com alguns dados,
por exemplo, mantemos o
ID e, portanto, realizamos uma ação pid como um valor.
Também mantenho o ID do proprietário e, para isso, posso acessar produtos de usuário de estado para o índice que
acabamos de descobrir, portanto, para esse índice de produto,. ownerID, não vou mudar isso.
Claro que vou guardar o novo
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
produto. imageUrl e eu armazenamos
uma nova descrição, então ação. informações do produto. descrição. No entanto, mencionei que o preço não deve
ser editável; portanto, como valor, manterei o preço original, para indicar o índice de produtos dos usuários. preço aqui.
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
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
dos dados do produto para atualização, para um novo produto que precisamos, mas para atualização, não precisamos.
Então, com isso, temos nosso produto atualizado com alguns dados novos e antigos, agora
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
com esta sintaxe aqui para criar uma cópia e, em seguida, defino produtos de usuário atualizados para o
índice de produto selecionado iguais ao produto atualizado, então substituo o produto nesse índice pelo novo produto atualizado em minha cópia,
não na matriz original, mas em minha cópia. Preciso fazer o mesmo nos produtos disponíveis, mas
primeiro preciso encontrar o índice, porque esse índice aqui só funciona para os produtos
do usuário, o índice nos produtos disponíveis é muito provavelmente um diferente,
então eu tenho o meu disponível índice do produto aqui, se você quiser chamá-lo assim, que geralmente possui a
mesma lógica de seleção, para que possamos copiá-lo, mas é claro que examinarei a matriz
de produtos disponíveis em vez da matriz de produtos do usuário. E agora, novamente, aqui podemos ter os produtos disponíveis atualizados,
onde eu copio meus produtos disponíveis no estado e, em seguida, defino os produtos disponíveis atualizados para
o índice de produto especificado igual, com licença para o índice de produto disponível, é claro, igual ao produto atualizado,
para que Substituo meu produto existente pelo produto atualizado nos produtos disponíveis
e na matriz de produtos do usuário. Bem, agora precisamos apenas retornar nosso novo estado, antes
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
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
eventos de dentro da tela do produto adicionado. Portanto, aqui precisamos importar o despacho
de uso do React Redux e importar nossas ações; portanto, importe tudo como ações de produtos
da pasta store, da pasta actions e do arquivo products e, em seguida, despache essas coisas no
manipulador de envio, é claro. Aqui, o que enviamos depende de estarmos editando
ou adicionando amd,
como mencionei, podemos descobrir qual é o caso com a ajuda do produto editado, se estiver
definido, estamos editando, se não estiver definido, estamos adicionando.
Portanto, aqui, no manipulador de envio, podemos adicionar um if check e se o produto editado, se estiver definido, estivermos
editando,
então desejo despachar meu evento de atualização do produto, para que, antes de tudo, eu precisa criar
essa função de despacho com a ajuda do uso de despacho e agora com o criado, lá em baixo podemos chamar ações
de despacho, atualizar produto, porque é isso que estamos fazendo aqui e agora
encaminhar todos os dados que
precisamos aqui, que é o meu
ID de produto , esse é o ID do produto
que estamos editando, estamos extraindo isso aqui e, é claro, além disso, também encaminhe o título, encaminhe a descrição,
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
que estamos adicionando, então
desejo despachar a ação dos produtos. criar produto, aqui
encaminhamos título, descrição, imageUrl e também o preço e, com isso, devemos ter uma configuração
na qual esperamos poder adicionar e editar produtos.
Então, vamos
salvar isso e vamos dar uma olhada. Se agora formos para a área de administração aqui e eu adicionei isso
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
o preço dos adereços para fixo.
Parece que perdi meu preço aqui ao tentar atualizar isso.
Bem, tudo bem, antes de corrigirmos isso, vamos ver se a adição de um novo produto funciona.
Se eu adicionar um produto aqui com test, test que obviamente não é um imageUrl válido, portanto
não veremos uma imagem, mas pelo menos saboreamos algo, isso também é um teste.
Se tentarmos isso e eu clicar em enviar, isso também não
funcionará, então, de alguma forma, salvar o preço
não funciona e acho que o problema está aqui, é claro, o problema aqui é que o preço é realmente
uma string aqui, mas deve ser um número, para que possamos convertê-lo facilmente em um número,
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,
ele normalmente deve manter o preço que já tinha .
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
qualquer maneira, mas vamos ver se há outro problema. Então teste, teste, doze, digite
apenas números aqui, não algum texto que você possa atualmente, mas que o quebraria,
teste isso, pressione este botão, sim, isso não parece muito ruim, temos algum problema com a imagem aqui, mas
se rolarmos para baixo, na verdade aqui, se descartarmos isso, podemos ver aqui o nosso
produto, então o preço está faltando, então algo está
errado lá e também não parecemos salvar a imagem corretamente,
não apenas porque ela não é exibida, mas por
causa de esse aviso que recebemos,
mas geralmente funciona.
No entanto, por exemplo, aqui, se eu tentar atualizar e salvar isso, ainda temos um
erro, então ainda há algo errado.
Portanto, uma coisa errada está nas ações, é claro, para atualizar o produto aqui, o tipo deve ser a atualização do produto e
não a criação do produto; caso
contrário, acionamos a ação errada no redutor, o que explica o erro de preço que recebemos lá.
Portanto, isso deve ser um produto de atualização aqui para atualizar um produto sem surpresa.
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
aqui para quebrar o manipulador de envio corretamente e faço
isso para evitar recriações desnecessárias das funções.
O problema é que eu inicialmente configurei isso para ter uma matriz vazia como uma lista de dependências, o que
significa que isso nunca é recriado, o que fazia sentido quando só tínhamos log de
console lá, mas agora estamos fazendo coisas lá e agora realmente temos dependências.
No momento, nunca recriei essa função, o que significa que ela nunca é recriada para seus valores atualizados.
Portanto, quando enviamos nosso formulário, nunca levamos em conta o que o usuário digitou.
Então, na verdade, agora precisamos
especificar dependências aqui, a função de despacho, mas mais importante ainda, o ID do produto, o título, a
descrição e o imageUrl e, claro, o preço. Agora, com isso, se salvarmos isso, ficaremos bem e todos os problemas
deverão ter desaparecido.
Então, vamos esperar
que isso seja recarregado, vá para o administrador agora e comece a editá-lo, talvez e agora, se adicionarmos um ponto de exclamação
no título e na descrição e salvarmos e voltarmos, vemos isso aqui e se formos para produtos , também
vemos aqui e nos detalhes, também vemos esse ponto de exclamação.
Agora, se voltarmos para o administrador e criarmos
um novo produto,
testemos, testamos, doze, testemos isso e eu salvarei isso e voltarei, agora isso
também será exibido lá embaixo. É claro que a imagem não
aparece porque não inserimos um URL válido, mas todos os outros dados são
exibidos. Portanto, isso geralmente está funcionando e, é claro, você pode
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,
por isso selecionei o URL de uma prateleira que encontrei na Internet para 199. 99, esta é uma boa
prateleira como esta. Se agora salvarmos isso e voltarmos, isso parece bom, aqui está a
nossa imagem e também a vemos aqui na tela do produto, e também podemos vê-la aqui.
Então, isso
parece funcionar e, com isso, geralmente temos uma configuração que funciona.
Agora, há algumas coisas em que quero trabalhar, por exemplo, antes de excluir, seria bom ter
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
clicamos em salvar aqui, navegamos automaticamente de volta.
Portanto, essas são apenas pequenas coisas, é claro, mas acho que elas representam uma boa final aqui neste módulo.