Nuestro enfoque aquí, por supuesto, funciona. Estamos almacenando las entradas en algún estado,
estamos almacenando la validez en algún estado y podríamos hacer esta gestión de validez para todas nuestras entradas aquí y simplemente tener
nuestras diferentes funciones de manejador de cambios aquí para nuestras diferentes entradas, eso funcionaría.
Una nota importante por cierto antes de continuar, ya que verifico la validez del título aquí en el controlador
de envío, por supuesto, también debemos agregarlo allí como una dependencia,
por lo que el título es válido debe agregarse allí como una dependencia en la devolución de llamada de uso matriz
de dependencia, eso
es importante, de lo contrario esta función no se reconstruirá cuando cambie
esa validez, lo que significa que no podremos enviarla a partir de entonces. El problema con nuestro enfoque actual es
que administramos diferentes estados para almacenar la entrada para las diferentes entradas y luego también tenemos diferentes estados
de validez, al menos potencialmente si comenzamos a administrar nuestra validez, así y
para formas muy grandes, por supuesto esto significa mucha copia y pegado, mucha administración estatal.
Ahora, si tiene tantos estados que están conectados, también puede hacerlo de una manera más elegante, en lugar de tener
sus estados separados para cada entrada, puede tener
un estado grande que combine todos los valores de entrada y que combine todas las validaciones y luego
use un concepto llamado reductor, no un reductor de Redux, sino uno compatible con React out the box para administrar
ese estado.
Lo hace con el uso del gancho reductor, que de nuevo no tiene nada que ver con Redux, el
concepto de un reductor no es exclusivo de Redux, un reductor al final es solo una función que toma entrada y escupe algo de
salida y, por lo tanto, React también es compatible con esto y verás cómo puedes usar esto
en esta conferencia ahora.
Entonces, ¿cuál es la idea de un reductor? Ahora, primero es importante comprender que
el uso de reductor es un gancho que lo ayuda a tener una administración estatal. Por lo general, lo usa si tiene
estados conectados o un estado más complejo y no desea tener un montón de llamadas de estado de
uso individual y un montón de estados individuales que administra. Luego puede usar use reducer y así es
como funciona.
Comienza creando un reductor, digamos un reductor de formulario aquí, puede nombrarlo como desee y tenga en cuenta que lo creo fuera
de mi componente de formulario, puede hacerlo allí, pero si no depende
de accesorios, usted puede hacerlo fuera de allí para que esto no se reconstruya con cada ciclo
de reproducción y ni siquiera tenga que usar la devolución de llamada de uso, que por supuesto también
cuesta algo de rendimiento si lo usa. Por lo tanto, úselo fuera de
allí, constrúyalo fuera de allí para evitar recreaciones innecesarias de esa función y ahora el reductor, al
igual que un reductor Redux obtiene el estado actual y una acción, pero nuevamente no está relacionado con Redux, no lo usa Redux,
las funciones reductoras siempre funcionan de esta manera. Ahora, de nuevo, al igual que en
un reductor Redux porque, de nuevo, funcionan de esta manera, puede verificar diferentes tipos de
acciones y aquí quiero verificar un tipo, esto también solo usa una declaración
if, podría
usar una declaración de cambio de caso también
y que verifico la acción. escribir aquí depende totalmente
de mí, puedes nombrar esto como quieras porque serás el que despache la acción
más tarde y aquí verifico la acción de actualización que también es un identificador que elegí y
que al igual que en Redux, también podrías guarde este identificador en una constante independiente aquí, para que pueda tener su acción de actualización del reductor aquí,
por ejemplo, su identificador de actualización del reductor como este y use esto en su lugar aquí si
lo desea y puede nombrarlo como quiera.
Así que ahora estoy verificando esta acción y si ocurre esta acción, quiero almacenar un valor de entrada y validarlo, pero para entender
esto, necesitamos entender cómo usamos el reductor de formularios.
Así que dejémoslo así por el momento y bajemos al componente en sí, allí
comenzamos a configurar nuestro estado de formulario aquí, así que
aquí quiero llamar al reductor de usuario y ahora usar reductor, tomar una función de reductor por lo tanto pasaré
mi reductor de forma que configuré aquí y que aún no está terminado.
Usar reductor también toma un segundo argumento opcional que es el estado inicial
que desea pasar y que puede ser cualquier cosa, pero aquí pasaré un objeto Javascript
y el estado inicial que quiero usar aquí es al final un objeto que tiene valores de entrada, que luego
es otro
objeto anidado que pronto llenaré, validez de entrada que también es un objeto anidado y tal vez
una validez general del formulario, lo nombraré
como válido, lo que inicialmente es falso, digamos. Así que este es mi estado inicial que paso aquí y
ese es el estado que luego quiero cambiar desde el interior del reductor de forma. Ahora en los valores de entrada, podemos, por ejemplo, agregar nuestro título y
depende de usted cómo lo nombre, que inicialmente es
una cadena vacía, digamos, estos serán los valores iniciales que quiero establecer en mis entradas, esto será en
el Al final, reemplace mi administración de estado allí, donde almaceno manualmente mis entradas en diferentes estados.
Ahora fusionaré todo esto en un solo objeto administrado a través de ese reductor.
Así que tengo mi título aquí y en realidad no siempre está vacío, por supuesto, pero en realidad solo
está vacío si no tenemos un
producto editado, por lo que copiaré este cheque desde allí y lo usaré aquí.
Ahora, por supuesto, lo mismo para imageUrl,
allí inicializo esto con editedProduct. imageUrl si está disponible y, de lo
contrario, uso
una cadena vacía, básicamente lo que hice allí también.
Y, por supuesto, hago lo mismo para la descripción, aquí quiero
verificar si el producto editado está configurado y uso esta descripción o lo configuro
en una cadena vacía si no está disponible. Ahora, por último, pero no menos importante, tenemos el precio
y siempre tengo una cadena vacía porque no la
necesitamos en el caso de un producto editado, entonces no me
importa su valor o lo necesitamos,
bueno entonces quiero inicializarlo con un valor vacío de todos modos. Ahora, por supuesto, cada entrada también tiene una validez, por lo que podemos agregar un título
aquí y nuevamente verificar si editedProduct está configurado,
si está configurado, entonces sé que estoy editando, por
lo que habremos rellenado previamente el título, por lo que
inicialmente lo hará ser válido,
por lo que en este caso mi valor inicial sería
verdadero, de lo contrario será falso y ahora esto también es algo que podemos repetir para imageUrl. Si tenemos un producto editado, sabemos que se rellenó previamente,
por lo
tanto, será válido inicialmente, por lo que establecemos esto en
verdadero; de lo contrario, lo configuro en falso.
Para mi descripción aquí, es lo mismo: verdadero o falso y por el
precio, es un poco igual,
por supuesto, no prepoblamos el precio si
estamos editando, pero si estamos editando no me importa el precio de todos modos porque no será modificable
Por lo tanto, sé que si estoy editando, debería tratar esto como válido porque no se puede cambiar de todos
modos y, por lo tanto,
no me importa esta entrada, pero no quiero bloquear el envío del formulario debido a establecer esto en falso cuando No puedo editarlo de todos modos.
Por lo tanto, lo estableceré en verdadero si no se planea editarlo, si no
estamos editando un producto pero estamos agregando uno, el precio será editable y, por lo tanto, comenzaremos en un estado falso porque la entrada de precio
lo hará estar vacío inicialmente, eso es lo que estamos configurando aquí. Y ahora la validez general del formulario, bueno, de
nuevo puedo verificar si tenemos
un producto editado, lo que significa que estamos editando, entonces el formulario es verdadero, el formulario
es válido inicialmente, de lo contrario es
falso inicialmente si estamos agregando un nuevo producto . Ahora, este es mi estado inicial aquí,
ahora esta función reductora debería ser capaz de cambiar ese estado cuando se envían acciones y
se debe enviar una acción, sea lo que sea
que escribamos en una de nuestras entradas de texto, ese será el desencadenante. Por lo tanto, ahora podemos deshacernos de todas estas asignaciones de estado aquí y, por
lo tanto, también podemos deshacernos de toda la importación de estado de uso incluso y asegurarnos de que despachemos la acción de actualización del
reductor para cada pulsación de tecla que hagamos en una entrada.
Entonces, aquí en el controlador de cambio de título, al final eliminaré este código, dejaré el if check por ahora pero no tendré ningún código allí por el
momento, en cambio, allá abajo, quiero enviar la actualización del reductor y ahora
esto se hace con el resultado de la llamada de uso reductor porque usar reductor, por supuesto, devuelve algo,
tal como lo hizo el estado de uso. También devuelve una matriz con exactamente dos elementos
y, por lo tanto, podemos desestructurarla con esta sintaxis de desestructuración de matriz que también utilizamos en
el estado de uso y allí obtengo mi estado de formulario como primer valor y una función de envío como
segundo valor.
Esto es siempre lo que utilizará el reductor de uso, una instantánea de estado que se actualiza cada vez que la cambie, por supuesto,
así
que cada vez que la cambie, este componente se volverá a mostrar y le dará una nueva instantánea de
estado y una función, el envío al final es una función eso le permite enviar acciones contra este reductor.
Por supuesto, puede nombrar estos dos elementos como quiera, pero creo que este
es un nombre razonable,
esta es nuestra instantánea del estado, esta es una función. Ahora, despacho, por cierto, es un nombre que ya utilicé aquí de
Redux, así que aquí nombraré este estado del formulario de envío para evitar un choque de
nombres, puede nombrarlo como quiera.
Entonces, el estado del formulario de envío ahora se puede usar aquí en mi controlador de cambio de título, solo lo
llamo y necesito pasar un objeto allí que describa mi acción y este objeto tendrá una propiedad de
tipo, no es necesario
que tenga una propiedad de tipo , puede nombrar este ID o identificador o lo que quiera,
pero uso el tipo aquí porque realmente compruebo la propiedad de tipo dentro de mi función reductora y
esta función reductora se ejecutará para cada nueva acción que envíe. Entonces, si vuelvo allí, el tipo será actualización de reductor
o tal vez un mejor nombre en realidad sería actualización de formulario, así que eso es lo que usaré aquí, por supuesto, y
aquí arriba, así que actualización de formulario, tal vez
entrada de formulario actualización, el nombre, por supuesto, depende de usted, pero debe quedar claro lo que hace, así que aquí, también
tendré una
actualización de entrada de formulario, sí, eso
se ve bien.
Entonces, la actualización
de entrada de formulario, eso es
lo que envié allí, también
tenemos que cambiarlo aquí y, por supuesto, también puede pasar cualquier otro dato que desee usar dentro de su
reductor y tengo algunos otros datos que quiero utilizar. Ese sería el valor y solo nombraré este valor
aquí, esta propiedad,
puede nombrarlo como quiera, ese
es el texto que se
ingresó, así que simplemente lo reenvío al reductor para que podamos almacenarlo en nuestro estado allí y la validez de
esta entrada.
Por lo tanto, aquí, en realidad agregaré un accesorio válido que inicialmente digamos que es falso y ahora eliminaré este caso y comprobaré si somos mayores que cero aquí, lo que
significaría que debería ser cierto porque luego configuro es válido igual a verdadero,
de lo contrario seguirá siendo falso y con eso, también podemos agregar
es válido como una clave para la acción y reenviar el valor almacenado dentro de
nuestra variable
válida y esto será falso inicialmente, pero si nuestra longitud de entrada para el título
es mayor que cero, entonces será realmente cierto y ahora, por supuesto, también debemos informarle a nuestro reductor qué entrada provocó esto.
Así que agregaré un campo de ID de entrada aquí o simplemente ingrese, lo que quiera y use el título aquí y esta clave aquí
debería ser una clave que también tenga dentro de su estado, como aquí en valores de entrada
y validez de entrada porque esto permitirá que escriba un código reductor que haremos
pronto que es altamente reutilizable y altamente flexible porque ahora podemos dar el siguiente paso y asegurarnos de que transformamos
esto para que sea una función que realmente funcione para todas las entradas y que sea realmente flexible con respecto cómo
lo usamos