Nossa abordagem aqui, é claro, funciona. Estamos armazenando as entradas em algum estado,
armazenando a validade em algum estado e poderíamos fazer esse gerenciamento de validade para todas as nossas entradas aqui e simplesmente ter
nossas diferentes funções de manipulador de alterações aqui para nossas diferentes entradas, que funcionariam.
Uma observação importante a propósito antes de prosseguirmos, já que eu verifico a validade do título aqui no
manipulador de envio, é claro que também devemos adicioná-la como
uma dependência, para que o título seja válido deve ser adicionado lá como uma dependência no retorno de chamada de
uso matriz de
dependência, isso é importante; caso contrário, essa função não será reconstruída quando
a validade for alterada, o que significa que não poderemos enviá-la posteriormente. O problema com nossa abordagem atual é que
gerenciamos diferentes estados para armazenar as entradas para as diferentes entradas e, em seguida, também temos diferentes estados de
validade, pelo menos potencialmente se começarmos a gerenciar nossa validade, assim e para
formas muito grandes, é claro que isso significa muita cópia e colagem, muita administração do estado.
Agora, se você tiver tantos estados que estão meio conectados, também poderá fazer isso de uma maneira mais elegante. Em
vez de ter estados separados para cada entrada,
você poderá ter um grande estado que mescla todos os valores de entrada e que mescla todas as
validades. e, em seguida, use um conceito chamado redutor, não um redutor Redux, mas um suportado pelo React, pronto para gerenciar
esse estado.
Você faz isso com o gancho de redutor de uso, que novamente não tem nada a ver
com Redux, o conceito de redutor não é exclusivo do Redux, um redutor no final é apenas uma função que recebe entrada e
cospe alguma saída e, portanto, o React também suporta isso. e você verá como pode usar isso
nesta palestra agora.
Então, qual é a ideia de um redutor? Agora, primeiro é importante entender que o
redutor de uso é um gancho que ajuda você a ter um gerenciamento de estado. Geralmente, você o usa se tiver
estados conectados ou um estado mais complexo e não desejar várias chamadas de estado de uso
individual e muitos estados individuais que você gerencia. Você pode usar o redutor e aqui está como
ele funciona.
Você começa criando um redutor, digamos um redutor de formulário aqui, você pode nomear o que quiser e, por favor, note que eu
o crio fora do meu componente de formulário, você pode fazê-lo lá,
mas se não depender de adereços, você você pode fazer isso fora de lá para que isso não
seja reconstruído a cada ciclo de re-renderização e você nem precisa usar o retorno de chamada, o que obviamente
também custa algum desempenho se você o usar. Portanto, use-o fora de lá, construa-o
fora de lá para evitar recriações desnecessárias dessa função e agora o redutor, assim como um
redutor de Redux obtém o estado atual e uma ação, mas novamente não está relacionado ao Redux, não é usado pelo
Redux, funções redutoras sempre funcionam como este. Agora, lá dentro, novamente como em um
redutor Redux, porque, novamente, eles funcionam assim, você pode verificar diferentes tipos de ação e
aqui eu quero verificar um tipo, isso também é só usar uma instrução
if, você
pode usar uma instrução switch case também e
que eu verifique a ação. tipo aqui depende totalmente
de mim, você pode nomear isso o que quiser, porque você será o responsável
por despachar a ação posteriormente e aqui eu verifico a ação de atualização, que também é um
identificador que eu escolhi e que, assim como no Redux, você também pode armazene esse identificador em uma constante autônoma aqui, para que você possa ter sua ação
de atualização de redutor aqui, por exemplo, seu identificador de atualização de redutor assim e use-o aqui se
quiser e pode nomear isso como quiser.
Portanto, agora estou verificando esta ação e, se ocorrer, quero armazenar um valor de entrada e validá-lo, mas para entender isso,
precisamos entender como usamos o redutor de formulário.
Então, vamos deixar assim por um momento e descer para o componente
em si. Começamos a configurar nosso estado de
formulário aqui em baixo, então aqui eu quero chamar redutor de usuário e agora usar redutor. meu
redutor de formulário que eu montei aqui e que ainda está inacabado.
Use reducer também usa algum segundo argumento opcional, que é o estado inicial
que você deseja passar e que pode ser qualquer coisa, mas aqui eu passo um objeto
Javascript e o estado inicial que eu quero usar aqui é no final um objeto que possui valores de entrada, que
são outro objeto
aninhado que em breve preencherei, validades de entrada que também são objetos aninhados e talvez uma validade
geral do formulário, o nome do formulário
é válido, o que inicialmente é falso, digamos. Portanto, este é agora o meu estado inicial que passo aqui e
esse é o estado que mais tarde quero mudar de dentro do redutor de formulário. Agora, sobre os valores de entrada, podemos, por exemplo, adicionar nosso título e
isso depende de você como o nomeia, que
é uma string vazia, digamos inicialmente, esses serão os valores iniciais que eu quero definir nas minhas entradas.
fim substitua meu gerenciamento de estado lá em baixo, onde armazeno manualmente minhas entradas em diferentes estados.
Agora vou mesclar tudo isso em um objeto gerenciado através desse redutor.
Então, eu tenho meu título aqui e, na verdade, isso nem sempre está vazio, é claro, mas, na verdade,
só está vazio se não tivermos
um produto editado, então copio essa verificação de lá e a uso aqui.
Agora o mesmo, é claro, para o imageUrl, eu
inicializo isso com o EditProduct. imageUrl, se estiver disponível, caso contrário, uso
uma
string vazia, basicamente o que fiz lá também.
E é claro que faço o mesmo para a descrição, aqui
quero verificar se o produto editado está definido e utilizo essa descrição ou defina-o
como uma sequência vazia, se não estiver disponível. Agora, por último, mas não menos importante, temos o preço
e sempre tenho uma string vazia porque não precisamos dela
no caso de um produto editado, então não me importo com
seu valor ou precisamos dele, bem
então eu quero inicializá-lo com um valor vazio de qualquer maneira. Agora, é claro que cada entrada também tem uma validade, para que possamos adicionar
um título aqui e novamente verificar se
o EditProduct está definido, se estiver definido, então eu
sei que estou editando, então teremos pré-preenchido o título,
portanto, inicialmente ser válido,
portanto, neste caso, meu valor inicial seria verdadeiro, caso
contrário, será falso e agora isso também é algo que podemos repetir para o imageUrl. Se tivermos um produto editado, sabemos que ele
foi
pré-preenchido e, portanto, será válido inicialmente; portanto, configuramos
como true, caso contrário, defino-o como false.
Para a minha descrição aqui, é o mesmo - verdadeiro ou falso e,
pelo preço, é quase igual,
é claro que não preenchemos o preço
se estivermos editando, mas se estivermos editando, não me importo com o preço. porque não será mutável.
Portanto, eu sei que, se estiver editando, devo tratá-lo como válido, pois não pode ser alterado de qualquer
maneira e, portanto, não
me importo com essa entrada, mas não quero bloquear o envio de formulários, pois defini-lo como falso quando não pode editá-lo de qualquer maneira.
Então, definirei como true se não for planejado editar, se não estivermos
editando um produto, mas adicionando um, o preço será editável e, portanto, iniciaremos em um estado falso porque a entrada de preço
será estar vazio inicialmente, é isso que estamos criando aqui. E agora a validade geral do formulário, bem
lá novamente, posso verificar se
temos um produto editado, o que significa que estamos editando, então o formulário é verdadeiro, o
formulário é válido inicialmente, caso contrário, é
falso inicialmente se estivermos adicionando um novo produto . Agora, este é o meu estado inicial
aqui, agora essa função redutora deve poder mudar esse estado quando as ações são despachadas
e uma ação deve ser despachada, independentemente do que
digitarmos em uma de nossas entradas de texto, que será o gatilho. Portanto, agora podemos nos livrar de todas essas atribuições de estado aqui e, portanto,
também podemos nos livrar de toda a importação de estado de uso e garantir a expedição da ação de atualização do redutor
para cada pressionamento de tecla que fazemos em uma entrada.
Então aqui no manipulador de mudança de título, no fim, removerei esse código, deixarei o if check por enquanto, mas não terei nenhum código lá no
momento. Em vez disso, quero enviar a atualização do redutor e agora
isso é feito com o resultado da chamada de redutor de uso, porque o redutor de uso certamente
retorna algo, assim como o estado de uso. Ele também retorna uma matriz com exatamente dois
elementos e, portanto, podemos desestruturá-la com esta sintaxe de desestruturação da matriz, que também usamos no estado
de uso, e lá recebo meu estado do formulário como um primeiro valor e uma função de despacho como um
segundo valor.
É sempre isso que o redutor de uso retornará, um instantâneo de estado que é atualizado sempre que você o altera,
portanto,
sempre que você o altera, este componente é renderizado novamente e fornece um novo instantâneo de estado
e uma função, despachar no final é uma função que permite despachar ações contra esse redutor.
Claro, você pode nomear esses dois elementos da maneira que quiser, mas acho que esse
é um nome sensato,
esse é o instantâneo do nosso estado, essa é uma função. Agora despacho a propósito é um nome que eu já usei aqui no
Redux, então aqui vou nomear esse estado do formulário de despacho para evitar um conflito de nomes,
você pode nomeá-lo como quiser.
Portanto, o estado do formulário de despacho agora pode ser usado aqui no meu manipulador de alterações de título, basta chamá-lo
e preciso passar um objeto para lá que descreva minha ação e esse objeto terá uma propriedade de
tipo, você não precisa
ter uma propriedade de tipo , você pode nomear esse ID ou identificador ou o que quiser,
mas eu uso type aqui porque, na verdade, verifico a propriedade type dentro da minha função redutora e essa
função redutora será executada para cada nova ação que você enviar. Então, se eu voltar lá em baixo, o tipo será
atualização redutora ou talvez um nome melhor seja atualização de formulário, eu acho, então é isso que eu vou usar aqui, é
claro e aqui, então, atualização de formulário, talvez
entrada de formulário update, o nome do curso depende de você, mas deve ficar claro sobre o que ele faz; portanto, aqui
também terei
atualização de entrada de formulário, sim,
isso parece bom.
Então, na atualização de
entrada de formulário, foi o que
eu enviei lá em baixo,
precisamos alterá-lo aqui também e, é claro, você também pode passar quaisquer outros dados que queira usar dentro do seu
redutor e eu tenho outros dados que quero usar. Esse seria o valor e vou apenas nomear esse
valor aqui, essa
propriedade, você pode nomear como
quiser, esse é o texto
que foi digitado, então eu o encaminhei ao redutor para que possamos armazená-lo em nosso estado lá e a validade
dessa entrada.
Portanto, aqui, na verdade, adicionarei um prop válido, que inicialmente vamos dizer que é falso e agora removerei esse caso e verificarei se somos maiores que zero aqui, o que significaria
que deveria ser verdade, porque então defini como válido igual a true, caso
contrário, permanecerá falso e, com isso, também podemos adicionar é válido como
uma chave para a ação e encaminhar o valor armazenado dentro de nossa variável é
válida e
isso será falso inicialmente, mas se o tamanho da entrada para o título é
maior que zero, então será realmente verdade e agora é claro que também precisamos informar nosso redutor sobre qual entrada acionou isso.
Então, adicionarei um campo de ID de entrada aqui ou apenas insira, o que você quiser e use o título aqui e essa chave
aqui deve ser uma chave que você também tenha dentro do seu estado, como aqui nos valores
e validades de entrada, porque isso permitirá você deve escrever um código redutor que
faremos em breve que seja altamente reutilizável e altamente flexível, porque agora podemos dar o próximo passo e garantir que
transformemos isso em uma função que realmente funciona para todas as entradas e que seja realmente flexível em relação a como
a usamos.