1 00:00:02,300 --> 00:00:08,300 Então, vamos continuar trabalhando nisso e vamos mudar para uma função de manipulador de alteração 2 00:00:09,020 --> 00:00:10,390 de texto, que 3 00:00:10,400 --> 00:00:16,420 agora atribuímos ao texto onChange aqui no título, mas que também podemos adicionar ao nosso imageUrl. 4 00:00:16,430 --> 00:00:22,640 Portanto, aqui para o texto onChange, eu também o defino como manipulador de alterações de texto e, agora, 5 00:00:22,640 --> 00:00:28,030 para que funcione, precisamos garantir que essa função obtenha informações sobre para qual entrada foi acionada, 6 00:00:28,070 --> 00:00:32,390 portanto, se você acabou de digitar o título ou o entrada imageUrl. 7 00:00:32,570 --> 00:00:36,580 Portanto, além de obter o texto, também espero obter um argumento diferente, 8 00:00:36,710 --> 00:00:42,290 espero obter meu identificador de entrada ou algo assim, você pode nomear o que quiser para que essa 9 00:00:42,290 --> 00:00:47,420 função possa ser reutilizada para várias entradas de texto e ainda assim obtermos informações sobre qual 10 00:00:47,420 --> 00:00:48,560 entrada desencadeou 11 00:00:48,680 --> 00:00:54,080 isso para que possamos encaminhar isso para o nosso redutor, onde mais tarde precisaremos dessas informações para 12 00:00:54,080 --> 00:00:55,370 atualizar nosso estado corretamente. 13 00:00:55,610 --> 00:01:01,520 Agora, para obter essa funcionalidade de identificador de entrada, precisamos ir para os locais onde usamos o manipulador 14 00:01:01,520 --> 00:01:09,140 de alterações de texto e, por exemplo, podemos usar bind ou usar uma função de seta anônima de quebra automática para vincular isso 15 00:01:09,140 --> 00:01:14,570 onde não me importo mais importante, para configurar os argumentos que essa função obterá e há 16 00:01:14,570 --> 00:01:19,700 um argumento especial que eu quero passar e esse é o identificador de entrada. 17 00:01:19,990 --> 00:01:24,650 E para esta função aqui, para esta chamada de função nesta 18 00:01:24,650 --> 00:01:33,870 entrada de texto, é claro que seria o título. Para essa entrada lá embaixo, teríamos vinculado esse imageUrl e, novamente, 19 00:01:34,060 --> 00:01:40,450 esse deve ser um identificador que você também possui em seu estado lá em cima, no 20 00:01:40,570 --> 00:01:49,110 estado do formulário que você passa para o redutor. Com isso adicionado, garantiremos que o manipulador de alterações de texto seja executado e 21 00:01:49,110 --> 00:01:51,710 obtenha esse argumento do identificador de entrada. 22 00:01:51,990 --> 00:01:56,430 O argumento de texto também será recebido porque esse é o argumento padrão pelo qual 23 00:01:56,430 --> 00:02:01,740 o React Native nos passaria de qualquer maneira e será automaticamente recebido como o último argumento nessa função. 24 00:02:01,800 --> 00:02:05,000 Portanto, não precisamos e, na verdade, não podemos vincular 25 00:02:05,010 --> 00:02:07,410 isso aqui, ele será encaminhado automaticamente. 26 00:02:07,680 --> 00:02:13,260 Agora temos uma função de manipulador de alteração de texto reutilizável aqui 27 00:02:13,440 --> 00:02:21,030 e também podemos atribuí-la a outras entradas, como aqui ao imageUrl, como aqui pelo preço, podemos vincular o 28 00:02:21,060 --> 00:02:27,390 manipulador de alteração de texto, vincular isso e então price é o nosso identificador 29 00:02:27,720 --> 00:02:35,540 aqui e, claro, também para a descrição, colamos isso e depois vinculamos a isso, e o identificador é description. 30 00:02:35,780 --> 00:02:40,910 Agora, esse mesmo manipulador pode ser usado para todas as entradas, mas, agora, é claro, ele 31 00:02:40,910 --> 00:02:44,240 faz uma coisa: valida cada entrada pelo seu comprimento. 32 00:02:44,240 --> 00:02:46,990 Agora que pode fazer sentido e 33 00:02:47,030 --> 00:02:52,070 faz aqui, nenhuma entrada deve estar vazia, mas você também pode querer 34 00:02:52,070 --> 00:02:58,130 alguma outra validação. Por exemplo, meu preço aqui deve ser um número maior que zero, 35 00:02:58,160 --> 00:03:05,360 digamos, para que zero não seja permitido como entrada. Por outro lado, isso não é um 36 00:03:05,360 --> 00:03:10,670 critério importante para outras informações. Encontraremos uma solução elegante para isso mais tarde, por 37 00:03:10,670 --> 00:03:16,700 enquanto, vamos continuar com a menor validação de denominador comum que podemos aplicar a todas as entradas para garantir que elas 38 00:03:16,700 --> 00:03:18,690 estejam pelo menos não vazias e vamos 39 00:03:19,120 --> 00:03:23,040 nos concentrar na função redutora e em como nosso estado de forma deve mudar 40 00:03:23,060 --> 00:03:26,990 quando esta ação de atualização de entrada de formulário com todos esses dados for 41 00:03:26,990 --> 00:03:28,720 despachada, porque agora nada acontecerá. 42 00:03:28,760 --> 00:03:33,920 Temos nosso estado inicial no redutor e isso será passado ou armazenado no estado do formulário, 43 00:03:33,920 --> 00:03:36,050 mas esse estado nunca será alterado. 44 00:03:36,080 --> 00:03:38,770 Bem, é por isso que despachamos uma ação, certo? 45 00:03:38,820 --> 00:03:40,550 É por isso que fazemos 46 00:03:40,560 --> 00:03:46,190 isso aqui, é por isso que a atualização de entrada de formulário é despachada e é por isso que queremos escrever 47 00:03:46,200 --> 00:03:49,190 algum código aqui no redutor quando essa ação nos chega aqui. 48 00:03:49,500 --> 00:03:55,650 Agora, se essa ação chegar até nós, no final, o objetivo é garantir que atualizemos esse instantâneo de 49 00:03:55,650 --> 00:03:56,220 estado, 50 00:03:56,220 --> 00:03:58,340 nosso instantâneo de estado atual adequadamente. 51 00:03:58,650 --> 00:04:04,470 Isso significa que, por exemplo, precisaremos de alguns valores atualizados e, para isso, crio um novo objeto 52 00:04:04,470 --> 00:04:05,910 porque meus valores de 53 00:04:06,030 --> 00:04:11,850 entrada aqui, esse é um objeto e criarei um novo para substituí-lo e, antes de tudo, copiarei 54 00:04:11,850 --> 00:04:14,340 o existente valores de entrada de estado. 55 00:04:14,400 --> 00:04:19,650 Lembre-se de que o estado aqui é passado automaticamente, esse é o nosso instantâneo de estado atual antes 56 00:04:19,650 --> 00:04:25,500 de atualizá-lo e, portanto, inicialmente, esse é o instantâneo de estado aqui, por exemplo, e terá uma chave de valores 57 00:04:25,500 --> 00:04:27,610 de entrada que, por sua vez, contém 58 00:04:27,720 --> 00:04:29,420 um objeto e é 59 00:04:29,460 --> 00:04:35,910 exatamente isso que Estou copiando aqui, copiando todos os pares de valores-chave dessa captura instantânea de valores de entrada e, em seguida, 60 00:04:35,910 --> 00:04:40,230 quero substituir o par de valores-chave pela entrada para a qual esta ação foi despachada, 61 00:04:40,230 --> 00:04:46,740 o bom é que anexemos a entrada identificador para a ação. Para que possamos ir ao redutor 62 00:04:46,740 --> 00:04:52,360 e substituir dinamicamente uma chave aqui nos valores de entrada copiados, 63 00:04:52,380 --> 00:04:57,900 a chave é ação. entrada, é claro, esse é o nosso identificador de entrada que anexamos à ação 64 00:04:57,900 --> 00:05:00,420 e o valor deve ser ação. valor, 65 00:05:00,420 --> 00:05:06,840 é tudo o que precisamos fazer. Portanto, armazenamos dinamicamente o valor que foi 66 00:05:06,840 --> 00:05:12,060 despachado com a entrada também atribuída dinamicamente e atualizamos nossos valores de entrada copiados. 67 00:05:12,060 --> 00:05:17,360 Agora, podemos retornar um novo estado aqui, porque esse é o objetivo do seu próprio redutor, como no 68 00:05:17,360 --> 00:05:21,360 redutor Redux, no final, ele deve retornar um novo instantâneo de estado e 69 00:05:21,840 --> 00:05:28,800 lá eu quero copiar o estado existente, mas substituir os valores de entrada com o valor valores atualizados que copiam meus valores antigos para 70 00:05:28,800 --> 00:05:36,230 que nenhum dado seja perdido e substituem um dos pares de valores-chave. Agora, obviamente, não é só substituir os 71 00:05:36,260 --> 00:05:39,820 valores ou atualizar os valores, também 72 00:05:39,890 --> 00:05:42,810 quero atualizar minhas validades. 73 00:05:42,920 --> 00:05:48,700 Portanto, aqui estão minhas validades atualizadas e, assim como com os valores, começo copiando minha chave 74 00:05:48,710 --> 00:05:53,240 de validez de entrada, porque a validez de entrada é uma chave 75 00:05:53,340 --> 00:05:54,050 aqui, 76 00:05:57,300 --> 00:06:05,190 como você pode ver, e quero substituir uma validade pela entrada que obtemos na ação , portanto, title, imageUrl ou o 77 00:06:05,220 --> 00:06:10,320 que quer que seja e substituí-lo por ação é válido porque obtemos as informações 78 00:06:10,320 --> 00:06:13,790 válidas ou não como parte da ação despachada, certo? 79 00:06:13,800 --> 00:06:17,400 Estamos encaminhando isso aqui com base nessa validação básica que temos aqui. 80 00:06:19,810 --> 00:06:24,160 Agora, com isso, precisamos apenas atualizar isso aqui, para que nossas 81 00:06:24,340 --> 00:06:30,220 validações de entrada sejam iguais às validações atualizadas e agora apenas precisamos gerenciar a validade 82 00:06:30,220 --> 00:06:33,430 geral do formulário. Para isso, adiciono uma 83 00:06:34,640 --> 00:06:41,270 variável, uma variável auxiliar, o formulário é válido, que inicialmente é verdadeiro e, em seguida, percorro todas as 84 00:06:41,270 --> 00:06:43,160 minhas validações atualizadas, que são 85 00:06:43,160 --> 00:06:45,050 minhas validades copiadas antigas e, 86 00:06:45,080 --> 00:06:49,520 em seguida, a validade atualizada para a entrada que acabamos de digitar. 87 00:06:49,580 --> 00:06:57,020 Então, aqui, temos um loop for / in onde analisamos todas as chaves nas validações atualizadas e o objetivo é simples, verifico 88 00:06:57,020 --> 00:07:03,170 cada validade de entrada de formulário e se todas as validações de entrada de formulário são válidas, se todas 89 00:07:03,170 --> 00:07:06,170 são verdadeiras, então o total formulário é válido. 90 00:07:06,230 --> 00:07:08,980 Se pelo menos um deles for falso, 91 00:07:09,000 --> 00:07:17,090 o formulário geral é falso, o formulário geral não é válido. Portanto, aqui o formulário é válido é igual ao estado mais recente é o 92 00:07:17,120 --> 00:07:24,320 estado válido que temos e, em seguida, a validade de validade atualizada para a entrada está sendo visualizada no momento, portanto, para esta chave 93 00:07:24,330 --> 00:07:26,320 e analisando todas as entradas aqui. 94 00:07:26,480 --> 00:07:31,530 A maneira como esse operador booleano funciona é tal que false substitui true; portanto, se qualquer entrada 95 00:07:31,640 --> 00:07:37,730 for falsa, o formulário é válido será definido como false e não poderá ser definido como true a partir de então. 96 00:07:37,730 --> 00:07:43,010 Portanto, se pelo menos uma entrada for inválida, o formulário geral será inválido e, portanto, 97 00:07:43,010 --> 00:07:48,200 agora não preciso mais copiar meu estado aqui porque substituirei todo o instantâneo do 98 00:07:48,200 --> 00:07:51,460 estado e o formulário definido é válido para o 99 00:07:52,940 --> 00:08:02,910 meu formulário derivado é válido aqui e é claro que, para evitar confusão, também podemos nomear que este formulário atualizado é válido aqui e aqui e aqui e 100 00:08:03,540 --> 00:08:04,270 aqui. 101 00:08:06,030 --> 00:08:09,900 Agora, apenas uma coisa adicional, se não entrarmos nesse 102 00:08:09,930 --> 00:08:16,560 bloco if, se alguma outra ação foi despachada ou qualquer outra coisa, retornarei o estado 103 00:08:16,560 --> 00:08:18,870 inalterado aqui. Com isso, adicionamos 104 00:08:18,870 --> 00:08:26,590 uma lógica redutora que é capaz de lidar com qualquer entrada ou digitação em qualquer uma das nossas entradas de texto, agora só 105 00:08:26,610 --> 00:08:31,560 precisamos usar o estado do formulário que será alterado a cada pressionamento de tecla, exatamente 106 00:08:31,560 --> 00:08:38,010 o que aconteceu antes, mas agora centralizado e mesclado em um estado gerenciado, que eu acho muito mais limpo do 107 00:08:38,190 --> 00:08:45,600 que ter toneladas de estados diferentes para validade e valores. A propósito, gerenciar todos esses estados manualmente 108 00:08:45,600 --> 00:08:53,330 e separadamente se tornaria um grande problema quando você deseja validar a validade geral do formulário. 109 00:08:53,340 --> 00:08:59,250 Então agora podemos usar o estado do formulário que será alterado a cada pressionamento de tecla 110 00:08:59,790 --> 00:09:07,610 e usá-lo, por exemplo, aqui nos valores. Retornamos o valor para esta entrada de texto acessando os valores de entrada do estado do formulário. título. 111 00:09:07,620 --> 00:09:15,160 Agora, obviamente, fazemos o mesmo aqui para o imageUrl, alimentamos isso de volta. Assim, o que fizemos antes e 112 00:09:15,160 --> 00:09:19,710 agora com nosso estado de formulário gerenciado com a ajuda 113 00:09:19,720 --> 00:09:26,040 do redutor, o mesmo pelo preço do curso e também o mesmo pelo descrição, assim. 114 00:09:29,530 --> 00:09:35,010 Agora, além de alterá-lo aqui, também precisamos alterá-lo em outros lugares, por exemplo, aqui, no 115 00:09:35,140 --> 00:09:39,730 manipulador de envio, é claro. Lá, o título é válido, isso 116 00:09:39,730 --> 00:09:50,540 não existe mais, mas podemos verificar o título das validades de entrada do estado do formulário, verdadeiro ou falso e, se for falso, significa que não 117 00:09:50,540 --> 00:09:52,250 é válido, portanto, 118 00:09:52,250 --> 00:09:54,400 essa verificação deve estar correta. 119 00:09:54,530 --> 00:09:59,960 É claro que, no entanto, nos preocupamos com a validade de todas as entradas, portanto, em 120 00:09:59,960 --> 00:10:05,270 vez de apenas checá-las manualmente aqui, concatenando-as em uma declaração if longa, podemos apenas verificar 121 00:10:05,270 --> 00:10:10,880 se o estado do formulário é válido, pois isso significa que alguma entrada é falsa e 122 00:10:10,880 --> 00:10:11,750 portanto, mostramos 123 00:10:11,750 --> 00:10:18,300 esse erro, que é a verificação mais curta e, claro, também é quando queremos evitar que o formulário seja enviado. 124 00:10:18,300 --> 00:10:23,450 Se o formulário for enviado, no entanto, a descrição do título e o imageUrl, que não 125 00:10:23,550 --> 00:10:29,380 existem mais, serão agora o estado do formulário inputValues. title e assim por diante, então 126 00:10:29,400 --> 00:10:30,950 fazemos o 127 00:10:32,290 --> 00:10:40,790 mesmo aqui para a descrição e para o imageUrl. Derivamos nossos valores do estado do formulário, 128 00:10:40,790 --> 00:10:50,250 o mesmo, é claro, aqui para a criação. Obtemos o título, a descrição e o imageUrl, e também, é claro, o preço 129 00:10:50,250 --> 00:10:55,200 que ainda converto em um número com o sinal de mais aqui. Tiramos tudo 130 00:10:55,200 --> 00:11:02,130 isso do estado da forma dos valores de entrada. Portanto, é claro que nossa dependência aqui não é título, descrição, 131 00:11:02,130 --> 00:11:08,490 imageUrl e assim por diante, mas apenas estado de forma. Se o formulário indicar alterações, o que ocorrerá a cada 132 00:11:08,490 --> 00:11:13,170 pressionamento de tecla, essa função deverá ser reconstruída e precisará ser reconstruída, pois as 133 00:11:13,200 --> 00:11:14,790 informações usadas pela função 134 00:11:14,790 --> 00:11:16,980 mudam a cada pressionamento de tecla, 135 00:11:17,070 --> 00:11:23,750 a validade pode mudar a cada pressionamento de tecla, os valores desejados enviar pode mudar a cada pressionamento de tecla. 136 00:11:23,880 --> 00:11:29,820 Agora também podemos, é claro, usar isso para mostrar nossa mensagem de erro. Em vez de verificar se o 137 00:11:29,820 --> 00:11:31,330 título é válido 138 00:11:31,380 --> 00:11:41,850 e que não existe mais, verificamos o formState. inputValidities. título, se for falso, quero mostrar este texto. 139 00:11:41,960 --> 00:11:42,680 Então agora, 140 00:11:42,680 --> 00:11:47,440 com isso, se salvarmos tudo isso, poderemos verificar isso. Se formos para a nossa página aqui, 141 00:11:47,450 --> 00:11:49,320 vemos esse erro inicialmente. 142 00:11:49,340 --> 00:11:51,650 Se eu começar a digitar, ele desaparecerá, 143 00:11:51,690 --> 00:11:55,640 se eu tentar enviar isso, ele falhará porque tenho três entradas vazias. 144 00:11:55,640 --> 00:11:58,800 Se eu inserir algo válido lá, por outro 145 00:11:58,850 --> 00:12:02,100 lado, isso funcionará. Se eu tentar editar, 146 00:12:02,270 --> 00:12:05,100 vamos tentar no Android, talvez para misturar as coisas. 147 00:12:05,420 --> 00:12:11,140 Então, se eu tentar editar a camisa vermelha aqui, posso enviar isso 148 00:12:11,150 --> 00:12:13,290 muito bem, agora vamos 149 00:12:13,320 --> 00:12:18,080 tentar enviar isso se estiver vazio, então recebo o alerta. 150 00:12:18,080 --> 00:12:20,620 Portanto, isso funciona da maneira que deve 151 00:12:24,840 --> 00:12:31,700 funcionar, agora com esse gerenciamento de formulário mais elegante usando o redutor de uso e, claro, você não pode usar o 152 00:12:31,700 --> 00:12:33,020 redutor de uso 153 00:12:33,080 --> 00:12:38,660 ao trabalhar com formulários, este é apenas um exemplo particularmente bom para quando faz sentido mesclar 154 00:12:38,660 --> 00:12:42,250 vários estados juntos e, portanto, possuem código altamente reutilizável e eficiente. 155 00:12:42,270 --> 00:12:48,290 Agora ainda não terminei, porque toda essa repetição de código com as entradas aqui, sempre estruturadas 156 00:12:48,320 --> 00:12:54,880 da mesma maneira e com as possibilidades de personalização ausentes em relação à validação, são essas as coisas 157 00:12:55,040 --> 00:12:56,930 que quero abordar a seguir.