1
00:00:02,290 --> 00:00:08,140
Nuestro enfoque aquí, por supuesto, funciona. Estamos almacenando las entradas en algún estado,

2
00:00:08,140 --> 00:00:16,090
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

3
00:00:16,120 --> 00:00:21,370
nuestras diferentes funciones de manejador de cambios aquí para nuestras diferentes entradas, eso funcionaría.

4
00:00:21,370 --> 00:00:26,560
Una nota importante por cierto antes de continuar, ya que verifico la validez del título aquí en el controlador

5
00:00:26,770 --> 00:00:29,950
de envío, por supuesto, también debemos agregarlo allí como una dependencia,

6
00:00:29,950 --> 00:00:35,820
por lo que el título es válido debe agregarse allí como una dependencia en la devolución de llamada de uso matriz

7
00:00:35,830 --> 00:00:36,980
de dependencia, eso

8
00:00:37,030 --> 00:00:40,570
es importante, de lo contrario esta función no se reconstruirá cuando cambie

9
00:00:40,660 --> 00:00:47,970
esa validez, lo que significa que no podremos enviarla a partir de entonces. El problema con nuestro enfoque actual es

10
00:00:47,970 --> 00:00:55,410
que administramos diferentes estados para almacenar la entrada para las diferentes entradas y luego también tenemos diferentes estados

11
00:00:55,410 --> 00:01:00,910
de validez, al menos potencialmente si comenzamos a administrar nuestra validez, así y

12
00:01:00,990 --> 00:01:07,400
para formas muy grandes, por supuesto esto significa mucha copia y pegado, mucha administración estatal.

13
00:01:07,410 --> 00:01:15,300
Ahora, si tiene tantos estados que están conectados, también puede hacerlo de una manera más elegante, en lugar de tener

14
00:01:15,330 --> 00:01:18,500
sus estados separados para cada entrada, puede tener

15
00:01:18,540 --> 00:01:25,720
un estado grande que combine todos los valores de entrada y que combine todas las validaciones y luego

16
00:01:25,740 --> 00:01:33,720
use un concepto llamado reductor, no un reductor de Redux, sino uno compatible con React out the box para administrar

17
00:01:33,720 --> 00:01:34,710
ese estado.

18
00:01:34,710 --> 00:01:40,210
Lo hace con el uso del gancho reductor, que de nuevo no tiene nada que ver con Redux, el

19
00:01:40,440 --> 00:01:47,550
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

20
00:01:47,580 --> 00:01:52,800
salida y, por lo tanto, React también es compatible con esto y verás cómo puedes usar esto

21
00:01:52,920 --> 00:01:54,190
en esta conferencia ahora.

22
00:01:54,900 --> 00:01:57,510
Entonces, ¿cuál es la idea de un reductor? Ahora, primero es importante comprender que

23
00:01:57,510 --> 00:02:03,030
el uso de reductor es un gancho que lo ayuda a tener una administración estatal. Por lo general, lo usa si tiene

24
00:02:03,090 --> 00:02:09,420
estados conectados o un estado más complejo y no desea tener un montón de llamadas de estado de

25
00:02:09,600 --> 00:02:16,340
uso individual y un montón de estados individuales que administra. Luego puede usar use reducer y así es

26
00:02:16,350 --> 00:02:17,510
como funciona.

27
00:02:19,060 --> 00:02:25,530
Comienza creando un reductor, digamos un reductor de formulario aquí, puede nombrarlo como desee y tenga en cuenta que lo creo fuera

28
00:02:25,570 --> 00:02:29,020
de mi componente de formulario, puede hacerlo allí, pero si no depende

29
00:02:29,020 --> 00:02:33,940
de accesorios, usted puede hacerlo fuera de allí para que esto no se reconstruya con cada ciclo

30
00:02:33,940 --> 00:02:39,250
de reproducción y ni siquiera tenga que usar la devolución de llamada de uso, que por supuesto también

31
00:02:39,280 --> 00:02:44,110
cuesta algo de rendimiento si lo usa. Por lo tanto, úselo fuera de

32
00:02:44,110 --> 00:02:49,690
allí, constrúyalo fuera de allí para evitar recreaciones innecesarias de esa función y ahora el reductor, al

33
00:02:49,690 --> 00:02:57,100
igual que un reductor Redux obtiene el estado actual y una acción, pero nuevamente no está relacionado con Redux, no lo usa Redux,

34
00:02:57,360 --> 00:03:02,240
las funciones reductoras siempre funcionan de esta manera. Ahora, de nuevo, al igual que en

35
00:03:02,310 --> 00:03:07,260
un reductor Redux porque, de nuevo, funcionan de esta manera, puede verificar diferentes tipos de

36
00:03:07,260 --> 00:03:11,520
acciones y aquí quiero verificar un tipo, esto también solo usa una declaración

37
00:03:11,520 --> 00:03:12,680
if, podría

38
00:03:12,690 --> 00:03:15,440
usar una declaración de cambio de caso también

39
00:03:15,750 --> 00:03:19,260
y que verifico la acción. escribir aquí depende totalmente

40
00:03:19,290 --> 00:03:24,030
de mí, puedes nombrar esto como quieras porque serás el que despache la acción

41
00:03:24,030 --> 00:03:29,800
más tarde y aquí verifico la acción de actualización que también es un identificador que elegí y

42
00:03:29,820 --> 00:03:39,050
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í,

43
00:03:39,620 --> 00:03:45,850
por ejemplo, su identificador de actualización del reductor como este y use esto en su lugar aquí si

44
00:03:45,920 --> 00:03:48,260
lo desea y puede nombrarlo como quiera.

45
00:03:48,380 --> 00:03:57,180
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

46
00:03:57,340 --> 00:04:00,850
esto, necesitamos entender cómo usamos el reductor de formularios.

47
00:04:00,920 --> 00:04:05,510
Así que dejémoslo así por el momento y bajemos al componente en sí, allí

48
00:04:05,600 --> 00:04:08,950
comenzamos a configurar nuestro estado de formulario aquí, así que

49
00:04:08,960 --> 00:04:15,200
aquí quiero llamar al reductor de usuario y ahora usar reductor, tomar una función de reductor por lo tanto pasaré

50
00:04:15,200 --> 00:04:19,540
mi reductor de forma que configuré aquí y que aún no está terminado.

51
00:04:19,940 --> 00:04:24,990
Usar reductor también toma un segundo argumento opcional que es el estado inicial

52
00:04:24,990 --> 00:04:30,860
que desea pasar y que puede ser cualquier cosa, pero aquí pasaré un objeto Javascript

53
00:04:30,860 --> 00:04:38,630
y el estado inicial que quiero usar aquí es al final un objeto que tiene valores de entrada, que luego

54
00:04:38,630 --> 00:04:39,990
es otro

55
00:04:40,220 --> 00:04:46,670
objeto anidado que pronto llenaré, validez de entrada que también es un objeto anidado y tal vez

56
00:04:46,670 --> 00:04:49,610
una validez general del formulario, lo nombraré

57
00:04:49,620 --> 00:04:55,700
como válido, lo que inicialmente es falso, digamos. Así que este es mi estado inicial que paso aquí y

58
00:04:55,700 --> 00:05:03,260
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

59
00:05:03,260 --> 00:05:06,070
depende de usted cómo lo nombre, que inicialmente es

60
00:05:06,070 --> 00:05:11,150
una cadena vacía, digamos, estos serán los valores iniciales que quiero establecer en mis entradas, esto será en

61
00:05:11,150 --> 00:05:15,980
el Al final, reemplace mi administración de estado allí, donde almaceno manualmente mis entradas en diferentes estados.

62
00:05:15,980 --> 00:05:20,220
Ahora fusionaré todo esto en un solo objeto administrado a través de ese reductor.

63
00:05:20,480 --> 00:05:25,610
Así que tengo mi título aquí y en realidad no siempre está vacío, por supuesto, pero en realidad solo

64
00:05:25,610 --> 00:05:27,410
está vacío si no tenemos un

65
00:05:27,410 --> 00:05:31,140
producto editado, por lo que copiaré este cheque desde allí y lo usaré aquí.

66
00:05:31,370 --> 00:05:34,590
Ahora, por supuesto, lo mismo para imageUrl,

67
00:05:35,410 --> 00:05:40,150
allí inicializo esto con editedProduct. imageUrl si está disponible y, de lo

68
00:05:40,150 --> 00:05:40,930
contrario, uso

69
00:05:40,930 --> 00:05:43,540
una cadena vacía, básicamente lo que hice allí también.

70
00:05:44,110 --> 00:05:48,030
Y, por supuesto, hago lo mismo para la descripción, aquí quiero

71
00:05:48,070 --> 00:05:52,990
verificar si el producto editado está configurado y uso esta descripción o lo configuro

72
00:05:53,080 --> 00:05:59,410
en una cadena vacía si no está disponible. Ahora, por último, pero no menos importante, tenemos el precio

73
00:05:59,410 --> 00:06:02,450
y siempre tengo una cadena vacía porque no la

74
00:06:02,470 --> 00:06:05,830
necesitamos en el caso de un producto editado, entonces no me

75
00:06:05,860 --> 00:06:08,140
importa su valor o lo necesitamos,

76
00:06:08,140 --> 00:06:15,020
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

77
00:06:15,020 --> 00:06:16,790
aquí y nuevamente verificar si editedProduct está configurado,

78
00:06:16,850 --> 00:06:19,010
si está configurado, entonces sé que estoy editando, por

79
00:06:19,040 --> 00:06:21,320
lo que habremos rellenado previamente el título, por lo que

80
00:06:21,320 --> 00:06:22,700
inicialmente lo hará ser válido,

81
00:06:22,700 --> 00:06:24,950
por lo que en este caso mi valor inicial sería

82
00:06:24,950 --> 00:06:32,250
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,

83
00:06:32,250 --> 00:06:33,080
por lo

84
00:06:33,080 --> 00:06:36,650
tanto, será válido inicialmente, por lo que establecemos esto en

85
00:06:36,650 --> 00:06:39,550
verdadero; de lo contrario, lo configuro en falso.

86
00:06:39,740 --> 00:06:44,420
Para mi descripción aquí, es lo mismo: verdadero o falso y por el

87
00:06:44,540 --> 00:06:46,760
precio, es un poco igual,

88
00:06:46,760 --> 00:06:49,090
por supuesto, no prepoblamos el precio si

89
00:06:49,100 --> 00:06:55,200
estamos editando, pero si estamos editando no me importa el precio de todos modos porque no será modificable

90
00:06:55,310 --> 00:07:00,890
Por lo tanto, sé que si estoy editando, debería tratar esto como válido porque no se puede cambiar de todos

91
00:07:00,890 --> 00:07:02,420
modos y, por lo tanto,

92
00:07:02,440 --> 00:07:09,680
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.

93
00:07:09,980 --> 00:07:13,110
Por lo tanto, lo estableceré en verdadero si no se planea editarlo, si no

94
00:07:13,190 --> 00:07:18,770
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

95
00:07:18,770 --> 00:07:24,230
lo hará estar vacío inicialmente, eso es lo que estamos configurando aquí. Y ahora la validez general del formulario, bueno, de

96
00:07:24,320 --> 00:07:26,150
nuevo puedo verificar si tenemos

97
00:07:26,150 --> 00:07:31,130
un producto editado, lo que significa que estamos editando, entonces el formulario es verdadero, el formulario

98
00:07:31,130 --> 00:07:33,590
es válido inicialmente, de lo contrario es

99
00:07:33,590 --> 00:07:39,240
falso inicialmente si estamos agregando un nuevo producto . Ahora, este es mi estado inicial aquí,

100
00:07:39,260 --> 00:07:45,050
ahora esta función reductora debería ser capaz de cambiar ese estado cuando se envían acciones y

101
00:07:45,050 --> 00:07:48,660
se debe enviar una acción, sea lo que sea

102
00:07:48,730 --> 00:07:58,190
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

103
00:07:58,220 --> 00:08:05,780
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

104
00:08:05,790 --> 00:08:09,610
reductor para cada pulsación de tecla que hagamos en una entrada.

105
00:08:09,710 --> 00:08:18,670
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

106
00:08:18,740 --> 00:08:22,770
momento, en cambio, allá abajo, quiero enviar la actualización del reductor y ahora

107
00:08:22,790 --> 00:08:28,960
esto se hace con el resultado de la llamada de uso reductor porque usar reductor, por supuesto, devuelve algo,

108
00:08:28,960 --> 00:08:35,000
tal como lo hizo el estado de uso. También devuelve una matriz con exactamente dos elementos

109
00:08:35,000 --> 00:08:40,710
y, por lo tanto, podemos desestructurarla con esta sintaxis de desestructuración de matriz que también utilizamos en

110
00:08:40,730 --> 00:08:47,450
el estado de uso y allí obtengo mi estado de formulario como primer valor y una función de envío como

111
00:08:47,450 --> 00:08:48,250
segundo valor.

112
00:08:48,290 --> 00:08:55,280
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,

113
00:08:55,280 --> 00:08:55,770
así

114
00:08:55,790 --> 00:09:01,490
que cada vez que la cambie, este componente se volverá a mostrar y le dará una nueva instantánea de

115
00:09:01,550 --> 00:09:07,160
estado y una función, el envío al final es una función eso le permite enviar acciones contra este reductor.

116
00:09:07,250 --> 00:09:11,760
Por supuesto, puede nombrar estos dos elementos como quiera, pero creo que este

117
00:09:11,780 --> 00:09:13,270
es un nombre razonable,

118
00:09:13,280 --> 00:09:20,100
esta es nuestra instantánea del estado, esta es una función. Ahora, despacho, por cierto, es un nombre que ya utilicé aquí de

119
00:09:20,100 --> 00:09:24,460
Redux, así que aquí nombraré este estado del formulario de envío para evitar un choque de

120
00:09:24,480 --> 00:09:25,980
nombres, puede nombrarlo como quiera.

121
00:09:26,760 --> 00:09:33,350
Entonces, el estado del formulario de envío ahora se puede usar aquí en mi controlador de cambio de título, solo lo

122
00:09:33,410 --> 00:09:39,170
llamo y necesito pasar un objeto allí que describa mi acción y este objeto tendrá una propiedad de

123
00:09:39,170 --> 00:09:40,820
tipo, no es necesario

124
00:09:40,820 --> 00:09:46,130
que tenga una propiedad de tipo , puede nombrar este ID o identificador o lo que quiera,

125
00:09:46,130 --> 00:09:52,010
pero uso el tipo aquí porque realmente compruebo la propiedad de tipo dentro de mi función reductora y

126
00:09:52,010 --> 00:09:59,260
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

127
00:09:59,500 --> 00:10:07,650
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

128
00:10:07,650 --> 00:10:10,830
aquí arriba, así que actualización de formulario, tal vez

129
00:10:10,830 --> 00:10:18,750
entrada de formulario actualización, el nombre, por supuesto, depende de usted, pero debe quedar claro lo que hace, así que aquí, también

130
00:10:18,750 --> 00:10:19,790
tendré una

131
00:10:19,800 --> 00:10:22,110
actualización de entrada de formulario, sí, eso

132
00:10:22,180 --> 00:10:23,280
se ve bien.

133
00:10:23,280 --> 00:10:24,510
Entonces, la actualización

134
00:10:24,510 --> 00:10:26,120
de entrada de formulario, eso es

135
00:10:26,130 --> 00:10:27,600
lo que envié allí, también

136
00:10:27,600 --> 00:10:33,100
tenemos que cambiarlo aquí y, por supuesto, también puede pasar cualquier otro dato que desee usar dentro de su

137
00:10:33,210 --> 00:10:38,250
reductor y tengo algunos otros datos que quiero utilizar. Ese sería el valor y solo nombraré este valor

138
00:10:38,250 --> 00:10:39,270
aquí, esta propiedad,

139
00:10:39,300 --> 00:10:40,730
puede nombrarlo como quiera, ese

140
00:10:40,740 --> 00:10:42,390
es el texto que se

141
00:10:42,420 --> 00:10:48,490
ingresó, así que simplemente lo reenvío al reductor para que podamos almacenarlo en nuestro estado allí y la validez de

142
00:10:48,490 --> 00:10:49,400
esta entrada.

143
00:10:49,470 --> 00:11:02,110
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

144
00:11:02,110 --> 00:11:07,480
significaría que debería ser cierto porque luego configuro es válido igual a verdadero,

145
00:11:07,480 --> 00:11:12,850
de lo contrario seguirá siendo falso y con eso, también podemos agregar

146
00:11:12,850 --> 00:11:19,050
es válido como una clave para la acción y reenviar el valor almacenado dentro de

147
00:11:19,060 --> 00:11:20,230
nuestra variable

148
00:11:20,350 --> 00:11:26,320
válida y esto será falso inicialmente, pero si nuestra longitud de entrada para el título

149
00:11:26,320 --> 00:11:35,230
es mayor que cero, entonces será realmente cierto y ahora, por supuesto, también debemos informarle a nuestro reductor qué entrada provocó esto.

150
00:11:35,330 --> 00:11:43,730
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í

151
00:11:43,730 --> 00:11:49,670
debería ser una clave que también tenga dentro de su estado, como aquí en valores de entrada

152
00:11:49,790 --> 00:11:54,800
y validez de entrada porque esto permitirá que escriba un código reductor que haremos

153
00:11:54,890 --> 00:12:01,920
pronto que es altamente reutilizable y altamente flexible porque ahora podemos dar el siguiente paso y asegurarnos de que transformamos

154
00:12:01,920 --> 00:12:09,210
esto para que sea una función que realmente funcione para todas las entradas y que sea realmente flexible con respecto cómo

155
00:12:09,210 --> 00:12:10,080
lo usamos