1 00:00:02,300 --> 00:00:08,300 Entonces, sigamos trabajando en esto y cambiemos esto a una función de controlador de cambio de 2 00:00:09,020 --> 00:00:10,390 texto, que ahora 3 00:00:10,400 --> 00:00:16,420 asignamos a onChange text aquí en el título, pero que también podemos agregar a nuestra imageUrl. 4 00:00:16,430 --> 00:00:22,640 Entonces, aquí para el texto onChange, también configuré esto en el controlador de cambio de texto y ahora para que esto 5 00:00:22,640 --> 00:00:28,030 funcione, debemos asegurarnos de que esta función obtenga información sobre la entrada para la que se activó, por 6 00:00:28,070 --> 00:00:32,390 lo tanto, si simplemente escribió el título o en el Entrada de imageUrl. 7 00:00:32,570 --> 00:00:36,580 Entonces, además de obtener el texto, también espero obtener un argumento 8 00:00:36,710 --> 00:00:42,290 diferente, espero obtener mi identificador de entrada o algo así, puede nombrarlo como desee para que 9 00:00:42,290 --> 00:00:47,420 esta función pueda reutilizarse para múltiples entradas de texto y aún así obtener información sobre 10 00:00:47,420 --> 00:00:48,560 qué entrada 11 00:00:48,680 --> 00:00:54,080 activó esto para que podamos reenviar esto a nuestro reductor, donde luego necesitaremos esta información para 12 00:00:54,080 --> 00:00:55,370 actualizar nuestro estado correctamente. 13 00:00:55,610 --> 00:01:01,520 Ahora para obtener esta funcionalidad de identificador de entrada, tenemos que ir a los lugares donde usamos el 14 00:01:01,520 --> 00:01:09,140 controlador de cambio de texto y allí, por ejemplo, podemos usar bind o usar una función de flecha anónima envolvente para vincular esto donde 15 00:01:09,140 --> 00:01:14,570 no me importa pero más lo más importante, para configurar los argumentos que obtendrá esta función 16 00:01:14,570 --> 00:01:19,700 y hay un argumento especial que quiero pasar y ese es el identificador de entrada. 17 00:01:19,990 --> 00:01:24,650 Y para esta función aquí, para esta función llamar a 18 00:01:24,650 --> 00:01:33,870 esta entrada de texto, esto por supuesto sería título. Para esta entrada allí abajo, habríamos vinculado esta imagenUrl y 19 00:01:34,060 --> 00:01:40,450 nuevamente este debería ser un identificador que también tiene en su estado allá arriba, 20 00:01:40,570 --> 00:01:49,110 en su estado de forma que pasa al reductor. Con eso agregado, nos aseguraremos de que el controlador de cambio de texto se ejecute 21 00:01:49,110 --> 00:01:51,710 y obtenga este argumento de identificador de entrada. 22 00:01:51,990 --> 00:01:56,430 El argumento de texto también se recibirá porque ese es el argumento predeterminado que 23 00:01:56,430 --> 00:02:01,740 React Native nos pasaría de todos modos y luego se recibirá automáticamente como último argumento en esa función. 24 00:02:01,800 --> 00:02:05,000 Por lo tanto, no tenemos que hacerlo y en realidad no 25 00:02:05,010 --> 00:02:07,410 podemos vincular esto aquí, se reenviará automáticamente. 26 00:02:07,680 --> 00:02:13,260 Ahora tenemos una función de controlador de cambio de texto reutilizable aquí y 27 00:02:13,440 --> 00:02:21,030 también podemos asignar esto a las otras entradas, como aquí a imageUrl, como aquí abajo por el precio, podemos vincular 28 00:02:21,060 --> 00:02:27,390 el controlador de cambio de texto, vincular esto y luego el precio es nuestro identificador aquí 29 00:02:27,720 --> 00:02:35,540 y, por supuesto, también para la descripción, allí pegamos esto y luego lo enlazamos y el identificador es la descripción. 30 00:02:35,780 --> 00:02:40,910 Ahora este mismo controlador se puede usar para todas las entradas, pero en este momento, por 31 00:02:40,910 --> 00:02:44,240 supuesto, hace una cosa, valida cada entrada para su longitud. 32 00:02:44,240 --> 00:02:46,990 Ahora, eso puede tener sentido y 33 00:02:47,030 --> 00:02:52,070 lo hace aquí, ninguna entrada debe estar vacía, pero es posible que también desee 34 00:02:52,070 --> 00:02:58,130 alguna otra validación, por ejemplo, mi precio aquí debería ser un número mayor que cero, digamos, 35 00:02:58,160 --> 00:03:05,360 por lo que el cero no está permitido como entrada. Eso, por otro lado, no es un criterio que 36 00:03:05,360 --> 00:03:10,670 me importe en otras entradas. Encontraremos una solución elegante para esto más adelante, por 37 00:03:10,670 --> 00:03:16,700 ahora sigamos con esta validación de denominador común más pequeña que podemos aplicar a todas las entradas para asegurarnos de que 38 00:03:16,700 --> 00:03:18,690 al menos no estén vacías y centrémonos 39 00:03:19,120 --> 00:03:23,040 en la función reductora y cómo nuestro estado de formulario debería cambiar cuando 40 00:03:23,060 --> 00:03:26,990 se envíe esta acción de actualización de entrada de formulario con todos esos datos 41 00:03:26,990 --> 00:03:28,720 porque ahora no pasará nada. 42 00:03:28,760 --> 00:03:33,920 Tenemos nuestro estado inicial en el reductor allí y eso se pasará o almacenará en el estado 43 00:03:33,920 --> 00:03:36,050 de formulario, pero este estado nunca cambiará. 44 00:03:36,080 --> 00:03:38,770 Bueno, por eso enviamos una acción, ¿verdad? 45 00:03:38,820 --> 00:03:40,550 Es por eso que hacemos esto 46 00:03:40,560 --> 00:03:46,190 aquí, es por eso que se envía la actualización de entrada de formulario y es por eso que queremos escribir algún 47 00:03:46,200 --> 00:03:49,190 código aquí en el reductor cuando esta acción nos llegue aquí. 48 00:03:49,500 --> 00:03:55,650 Ahora, si esta acción nos alcanza, al final el objetivo es asegurarnos de actualizar esta instantánea de estado, nuestra 49 00:03:55,650 --> 00:03:56,220 instantánea 50 00:03:56,220 --> 00:03:58,340 de estado actual de manera adecuada. 51 00:03:58,650 --> 00:04:04,470 Esto significa que, por ejemplo, necesitaremos algunos valores actualizados y para esto, creo un nuevo objeto porque 52 00:04:04,470 --> 00:04:05,910 mis valores de 53 00:04:06,030 --> 00:04:11,850 entrada aquí, ese es un objeto y crearé uno nuevo para reemplazarlo y, en primer lugar, 54 00:04:11,850 --> 00:04:14,340 copiaré el existente indicar valores de entrada. 55 00:04:14,400 --> 00:04:19,650 Tenga en cuenta que el estado aquí se pasa automáticamente, esa es nuestra instantánea del estado actual antes 56 00:04:19,650 --> 00:04:25,500 de actualizarla y, por lo tanto, inicialmente, esta es la instantánea del estado aquí, por ejemplo, y tendrá una clave 57 00:04:25,500 --> 00:04:27,610 de valores de entrada que a su 58 00:04:27,720 --> 00:04:29,420 vez contiene un objeto y 59 00:04:29,460 --> 00:04:35,910 eso es exactamente lo que Estoy copiando aquí, estoy copiando todos los pares clave-valor de esa instantánea de valores de entrada y luego 60 00:04:35,910 --> 00:04:40,230 quiero reemplazar el par clave-valor para la entrada para la que se envió esta acción, 61 00:04:40,230 --> 00:04:46,740 lo bueno es que adjuntamos la entrada Identificador de la acción. Entonces, podemos ir al reductor y 62 00:04:46,740 --> 00:04:52,360 anular dinámicamente una clave aquí en los valores de entrada copiados, 63 00:04:52,380 --> 00:04:57,900 la clave es acción. entrada, por supuesto, ese es nuestro identificador de entrada que adjuntamos a la acción 64 00:04:57,900 --> 00:05:00,420 y el valor debe ser acción. valor, eso 65 00:05:00,420 --> 00:05:06,840 es todo lo que necesitamos hacer. Por lo tanto, almacenamos dinámicamente el valor que 66 00:05:06,840 --> 00:05:12,060 se envió con la entrada también asignada dinámicamente y actualizamos nuestros valores de entrada copiados. 67 00:05:12,060 --> 00:05:17,360 Ahora podemos devolver un nuevo estado aquí porque ese es el objetivo de su propio reductor, como para 68 00:05:17,360 --> 00:05:21,360 el reductor Redux, al final tiene que devolver una nueva instantánea de estado y 69 00:05:21,840 --> 00:05:28,800 allí quiero copiar el estado existente pero anular los valores de entrada con el valores actualizados que copian mis valores anteriores para que no 70 00:05:28,800 --> 00:05:36,230 se pierdan datos y luego reemplazan uno de los pares clave-valor allí. Ahora, obviamente, no todo es solo reemplazar 71 00:05:36,260 --> 00:05:39,820 los valores o actualizar los valores, también 72 00:05:39,890 --> 00:05:42,810 quiero actualizar mis validaciones. 73 00:05:42,920 --> 00:05:48,700 Así que aquí están mis validaciones actualizadas y, al igual que con los valores, empiezo copiando mi clave 74 00:05:48,710 --> 00:05:53,240 de validez de entrada porque la validez de entrada es una clave aquí como 75 00:05:53,340 --> 00:05:54,050 puedes 76 00:05:57,300 --> 00:06:05,190 ver y luego quiero reemplazar una validez para la entrada que obtenemos en la acción , por lo tanto, title, imageUrl o lo que sea 77 00:06:05,220 --> 00:06:10,320 y reemplazar esto por acción es válida porque obtenemos la información de si es válida o 78 00:06:10,320 --> 00:06:13,790 no como parte de la acción que se envía, ¿verdad? 79 00:06:13,800 --> 00:06:17,400 Enviamos esto aquí en base a esta validación básica que tenemos aquí. 80 00:06:19,810 --> 00:06:24,160 Ahora con eso, solo necesitamos actualizar esto aquí, por lo que nuestras 81 00:06:24,340 --> 00:06:30,220 validaciones de entrada aquí son iguales a las validaciones actualizadas y ahora solo tenemos que administrar la 82 00:06:30,220 --> 00:06:33,430 validez general del formulario. Para eso, agrego 83 00:06:34,640 --> 00:06:41,270 una variable, una variable auxiliar, el formulario es válido, que inicialmente es verdadero y luego recorro todas 84 00:06:41,270 --> 00:06:43,160 mis validaciones actualizadas, que son 85 00:06:43,160 --> 00:06:45,050 mis antiguas validaciones copiadas y 86 00:06:45,080 --> 00:06:49,520 luego la validez actualizada para la entrada que acabamos de escribir. 87 00:06:49,580 --> 00:06:57,020 Entonces, aquí, tenemos un ciclo for / in donde revisamos todas las claves en las validaciones actualizadas y el objetivo es simple, verifico la 88 00:06:57,020 --> 00:07:03,170 validez de cada entrada de formulario y si todas las validaciones de entrada de formulario son válidas, si todas 89 00:07:03,170 --> 00:07:06,170 son verdaderas, entonces el total El formulario es válido. 90 00:07:06,230 --> 00:07:08,980 Si al menos uno de ellos es 91 00:07:09,000 --> 00:07:17,090 falso, el formulario general es falso, el formulario general no es válido. Por lo tanto, aquí el formulario es válido es igual al último estado válido 92 00:07:17,120 --> 00:07:24,320 del formulario que tenemos y luego la validez de validez actualizada para la entrada que estamos viendo actualmente, así que para esta clave y 93 00:07:24,330 --> 00:07:26,320 estamos revisando todas las entradas aquí. 94 00:07:26,480 --> 00:07:31,530 La forma en que funciona este operador booleano es que este falso anula verdadero, por lo que si 95 00:07:31,640 --> 00:07:37,730 alguna entrada es falsa, el formulario es válido se establecerá en falso y no se puede establecer en verdadero a partir de entonces. 96 00:07:37,730 --> 00:07:43,010 Entonces, si al menos una entrada es inválida, el formulario general será inválido y, por 97 00:07:43,010 --> 00:07:48,200 lo tanto, ahora ya no necesito copiar mi estado aquí porque reemplazaré toda la instantánea 98 00:07:48,200 --> 00:07:51,460 del estado y establecer el formulario es válido para 99 00:07:52,940 --> 00:08:02,910 que mi formulario derivado sea válido aquí y por supuesto, para evitar confusiones, también podríamos nombrar que este formulario actualizado es válido aquí y aquí y aquí y 100 00:08:03,540 --> 00:08:04,270 aquí. 101 00:08:06,030 --> 00:08:09,900 Ahora solo una cosa adicional, si no lo hacemos en este 102 00:08:09,930 --> 00:08:16,560 bloque if, así que si se envió alguna otra acción o cualquier otra cosa, simplemente devolveré el estado sin 103 00:08:16,560 --> 00:08:18,870 cambios aquí. Con eso, agregamos 104 00:08:18,870 --> 00:08:26,590 una lógica reductora que puede manejar cualquier entrada o escribir en cualquiera de nuestras entradas de texto, ahora solo necesitamos usar el estado 105 00:08:26,610 --> 00:08:31,560 del formulario que cambiará con cada pulsación de tecla, que es exactamente lo que sucedió 106 00:08:31,560 --> 00:08:38,010 antes, pero ahora todo centralizado y se fusionó en un estado administrado que creo que es mucho más limpio 107 00:08:38,190 --> 00:08:45,600 que tener toneladas de estados diferentes para validar y valorar. Y, por cierto, administrar todos estos estados de forma 108 00:08:45,600 --> 00:08:53,330 manual y por separado se habría convertido en un gran problema cuando luego desea validar la validez general del formulario. 109 00:08:53,340 --> 00:08:59,250 Así que ahora podemos usar el estado del formulario que cambiará con cada pulsación de tecla y lo 110 00:08:59,790 --> 00:09:07,610 usamos, por ejemplo, aquí en los valores. Volvemos al valor de esta entrada de texto accediendo a los valores de entrada del estado del formulario. título. 111 00:09:07,620 --> 00:09:15,160 Ahora, obviamente, hacemos lo mismo aquí para imageUrl, realimentamos esto, así que justo lo que hicimos antes y ahora 112 00:09:15,160 --> 00:09:19,710 con nuestro estado de formulario administrado con la ayuda del 113 00:09:19,720 --> 00:09:26,040 reductor, lo mismo por el precio, por supuesto, y lo mismo por el descripción, así. 114 00:09:29,530 --> 00:09:35,010 Ahora, además de cambiarlo aquí, también tenemos que cambiarlo en otros lugares, por ejemplo, aquí en 115 00:09:35,140 --> 00:09:39,730 el controlador de envío, por supuesto. Allí, el título es válido, esto 116 00:09:39,730 --> 00:09:50,540 ya no existe, pero podemos verificar el título de validez de entrada del estado del formulario, que es verdadero o falso y si es falso, significa que no es 117 00:09:50,540 --> 00:09:52,250 válido, por lo 118 00:09:52,250 --> 00:09:54,400 que esta verificación debería estar bien. 119 00:09:54,530 --> 00:09:59,960 Por supuesto, sin embargo, nos importa la validez de todas las entradas, por lo que en lugar 120 00:09:59,960 --> 00:10:05,270 de verificarlas todas manualmente concatenandolas en una declaración if larga, podemos verificar si la forma de 121 00:10:05,270 --> 00:10:10,880 estado del formulario es válida porque eso significa que alguna entrada es falsa y por lo tanto, 122 00:10:10,880 --> 00:10:11,750 mostramos este 123 00:10:11,750 --> 00:10:18,300 error, esa es la verificación más corta y, por supuesto, también es cuando queremos evitar que se envíe el formulario. 124 00:10:18,300 --> 00:10:23,450 Sin embargo, si el formulario se envía, la descripción del título y la imagenUrl, que ya no existe, en su 125 00:10:23,550 --> 00:10:29,380 lugar, ahora son valores de entrada del estado del formulario. título y así sucesivamente, así que 126 00:10:29,400 --> 00:10:30,950 hacemos lo 127 00:10:32,290 --> 00:10:40,790 mismo aquí para la descripción y para imageUrl. Derivamos nuestros valores del estado del 128 00:10:40,790 --> 00:10:50,250 formulario, el mismo, por supuesto, aquí para crear. Obtenemos el título y la descripción y el imageUrl y también, por supuesto, el 129 00:10:50,250 --> 00:10:55,200 precio que todavía convierto a un número con el signo más aquí, obtenemos todo eso 130 00:10:55,200 --> 00:11:02,130 de nuestro estado de forma de los valores de entrada. Por lo tanto, por supuesto, nuestra dependencia aquí no es título, descripción, 131 00:11:02,130 --> 00:11:08,490 imagenUrl, etc., sino que es solo el estado del formulario. Si el formulario indica cambios, lo que ocurrirá en cada 132 00:11:08,490 --> 00:11:13,170 pulsación de tecla, entonces esta función debe reconstruirse y debe reconstruirse porque la información 133 00:11:13,200 --> 00:11:14,790 que utiliza la función 134 00:11:14,790 --> 00:11:16,980 cambia con cada pulsación de tecla, 135 00:11:17,070 --> 00:11:23,750 la validez puede cambiar con cada pulsación de tecla, los valores que desee enviar puede cambiar con cada pulsación de tecla. 136 00:11:23,880 --> 00:11:29,820 Por supuesto, ahora también podemos usar esto para mostrar nuestro mensaje de error. En lugar de verificar que el 137 00:11:29,820 --> 00:11:31,330 título es 138 00:11:31,380 --> 00:11:41,850 válido y que ya no existe, verificamos formState. inputValidities. título, si eso es falso, entonces quiero mostrar este texto. 139 00:11:41,960 --> 00:11:42,680 Así que ahora 140 00:11:42,680 --> 00:11:47,440 con eso, si guardamos todo eso, deberíamos poder verificar esto. Si vamos a nuestra página aquí, 141 00:11:47,450 --> 00:11:49,320 vemos este error inicialmente. 142 00:11:49,340 --> 00:11:51,650 Si empiezo a escribir, desaparece, 143 00:11:51,690 --> 00:11:55,640 si trato de enviar esto, falla porque tengo tres entradas vacías. 144 00:11:55,640 --> 00:11:58,800 Si ingreso algo válido allí, por otro 145 00:11:58,850 --> 00:12:02,100 lado, esto funciona. Si intento editar, intentemos 146 00:12:02,270 --> 00:12:05,100 esto en Android, tal vez para mezclar las cosas. 147 00:12:05,420 --> 00:12:11,140 Entonces, si intento editar la camisa roja aquí, puedo enviar esto 148 00:12:11,150 --> 00:12:13,290 bien, ahora también intentemos 149 00:12:13,320 --> 00:12:18,080 enviar esto si está vacío, entonces recibo la alerta. 150 00:12:18,080 --> 00:12:20,620 Así que esto funciona de la manera en 151 00:12:24,840 --> 00:12:31,700 que debería funcionar, ahora con esta administración de formularios más elegante que usa el reductor de uso y, por supuesto, no solo puede 152 00:12:31,700 --> 00:12:33,020 usar el reductor de 153 00:12:33,080 --> 00:12:38,660 uso al trabajar con formularios, este es solo un ejemplo particularmente bueno para cuando tiene sentido fusionar múltiples estados 154 00:12:38,660 --> 00:12:42,250 juntos y, por lo tanto, tienen un código altamente reutilizable y eficiente. 155 00:12:42,270 --> 00:12:48,290 Sin embargo, todavía no he terminado porque toda esta repetición de código con las entradas aquí, que siempre están 156 00:12:48,320 --> 00:12:54,880 estructuradas de la misma manera y las posibilidades de personalización que faltan con respecto a la validación, estas son las cosas 157 00:12:55,040 --> 00:12:56,930 que quiero abordar a continuación.