1
00:00:03,650 --> 00:00:08,090
Ahora, que hemos completado la actualización del lado del servidor.

2
00:00:08,090 --> 00:00:11,045
Es hora de pasar al cliente reaccionar.

3
00:00:11,045 --> 00:00:15,060
Para su comodidad, le he proporcionado el repositorio de GitHub,

4
00:00:15,060 --> 00:00:20,330
que contiene la versión final del cliente que es capaz de comunicarse con

5
00:00:20,330 --> 00:00:26,300
nuestro servidor API REST y luego renderizar las diversas vistas para nuestro cliente.

6
00:00:26,300 --> 00:00:30,095
Por lo tanto, he tomado la reaplicación que desarrollamos en

7
00:00:30,095 --> 00:00:34,040
el segundo curso de la especialización y luego la modificamos.

8
00:00:34,040 --> 00:00:39,175
Haremos un breve recorrido por el código un poco más tarde.

9
00:00:39,175 --> 00:00:43,520
Ahora, clonará el repositorio de Git en su computadora,

10
00:00:43,520 --> 00:00:49,955
luego iniciará su cliente y luego lo verá comunicarse con nuestro conjunto de servidores.

11
00:00:49,955 --> 00:00:53,655
Veamos los detalles a continuación.

12
00:00:53,655 --> 00:00:56,985
Para comenzar con este ejercicio,

13
00:00:56,985 --> 00:01:00,460
en su terminal o ventana de comandos,

14
00:01:00,460 --> 00:01:06,429
vaya a su ubicación conveniente y, a continuación, escriba git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, y luego deje que

16
00:01:22,280 --> 00:01:27,315
la aplicación React se clone en su computadora.

17
00:01:27,315 --> 00:01:29,210
Una vez completada la clonación,

18
00:01:29,210 --> 00:01:34,350
muévase a la carpeta Confusion-React

19
00:01:34,350 --> 00:01:38,625
que acaba de crearse cuando clonó este repositorio de Git.

20
00:01:38,625 --> 00:01:43,965
Luego, inmediatamente notará que ya hay un montón de archivos allí.

21
00:01:43,965 --> 00:01:50,565
Ahora, en el símbolo del sistema, escriba yarn install, con el

22
00:01:50,565 --> 00:01:54,350
fin de instalar todos los módulos de nodo de los

23
00:01:54,350 --> 00:01:58,155
que depende esta aplicación React.

24
00:01:58,155 --> 00:02:03,140
Por lo tanto, una vez que los módulos de nodo están todos instalados,

25
00:02:03,140 --> 00:02:11,810
entonces podemos iniciar nuestro hilo empezar a compilar y servir a nuestra aplicación React.

26
00:02:11,810 --> 00:02:13,840
Una vez que todo esté dentro,

27
00:02:13,840 --> 00:02:18,650
asegúrese de que su servidor MongoDB está

28
00:02:18,650 --> 00:02:23,775
funcionando y también su servidor de API REST también está en funcionamiento.

29
00:02:23,775 --> 00:02:26,030
De lo contrario, el cliente no funcionará.

30
00:02:26,030 --> 00:02:30,650
Por lo tanto, ahora que ha instalado su cliente en su computadora,

31
00:02:30,650 --> 00:02:33,200
agregue el inicio del hilo de tipo de solicitud

32
00:02:33,200 --> 00:02:38,610
y su aplicación se volverá a compilar y servirá en un corto tiempo.

33
00:02:38,610 --> 00:02:42,434
Una vez que su aplicación se haya compilado correctamente,

34
00:02:42,434 --> 00:02:45,650
vaya al navegador y verá que

35
00:02:45,650 --> 00:02:51,095
su aplicación React se inicia y es visible en la pantalla aquí.

36
00:02:51,095 --> 00:02:54,290
Usted notará inmediatamente que su aplicación es

37
00:02:54,290 --> 00:02:57,440
capaz de obtener los datos del servidor y luego representar

38
00:02:57,440 --> 00:03:00,815
las diversas partes de su aplicación como lo

39
00:03:00,815 --> 00:03:06,070
hizo al final de su curso React.

40
00:03:06,100 --> 00:03:08,635
Cuando vaya a la carpeta Acerca de,

41
00:03:08,635 --> 00:03:14,025
también verá que la página Acerca de también representa la información.

42
00:03:14,025 --> 00:03:16,880
Como tal anteriormente en el menú,

43
00:03:16,880 --> 00:03:21,845
verá los elementos en el menú que se muestran al igual que vimos con la aplicación.

44
00:03:21,845 --> 00:03:23,950
Ahora, además, he agregado en

45
00:03:23,950 --> 00:03:28,475
una página más a la aplicación de una sola página llamada Mis favoritos,

46
00:03:28,475 --> 00:03:31,150
a la que no puede navegar,

47
00:03:31,150 --> 00:03:35,170
porque ningún usuario ha iniciado sesión en su sistema.

48
00:03:35,170 --> 00:03:38,330
Por lo tanto, ve que no tengo ningún usuario iniciado sesión en el sistema.

49
00:03:38,330 --> 00:03:42,160
Por lo tanto, es por eso que no tiene sentido indicar mis favoritos porque no sabes

50
00:03:42,160 --> 00:03:47,950
qué usuario como favoritos debe mostrarse aquí y la página de contacto como de costumbre.

51
00:03:47,950 --> 00:03:49,710
Ahora, vamos a iniciar sesión.

52
00:03:49,710 --> 00:03:51,555
Para iniciar sesión en nuestra aplicación,

53
00:03:51,555 --> 00:03:58,020
haremos clic en el botón de inicio de sesión y luego verá que aparece el cuadro de diálogo de inicio de sesión.

54
00:03:58,020 --> 00:04:04,989
A continuación, permítanme iniciar sesión como uno de los usuarios

55
00:04:04,989 --> 00:04:09,650
registrados, que nos registramos como parte de este curso anteriormente.

56
00:04:09,650 --> 00:04:11,445
Por lo tanto, una vez que inicie sesión,

57
00:04:11,445 --> 00:04:16,530
inmediatamente notará que en la esquina derecha,

58
00:04:16,530 --> 00:04:19,760
verá que el botón de inicio de sesión se ha convertido en

59
00:04:19,760 --> 00:04:24,200
cierre de sesión y el nombre del usuario se indica aquí.

60
00:04:24,200 --> 00:04:26,810
Por lo tanto, quienquiera que haya iniciado sesión se indica aquí.

61
00:04:26,810 --> 00:04:33,280
También puede, en principio, reemplazar esto con la imagen del usuario.

62
00:04:33,280 --> 00:04:36,080
Ahora, para eso necesita hacer más modificaciones

63
00:04:36,080 --> 00:04:40,290
tanto al cliente como al servidor para admitir la visualización de la imagen aquí.

64
00:04:40,290 --> 00:04:42,160
Pero por el momento, solo te estoy mostrando

65
00:04:42,160 --> 00:04:46,640
cómo podemos mostrar fácilmente la información del usuario aquí.

66
00:04:46,640 --> 00:04:50,405
Por lo tanto, esto requirió una modificación menor en el jefe del componente,

67
00:04:50,405 --> 00:04:54,010
donde podré recuperar el nombre de usuario.

68
00:04:54,010 --> 00:04:56,225
Por lo tanto, una vez que el usuario inicia sesión,

69
00:04:56,225 --> 00:04:59,060
entonces si hace clic en Mis Favoritos

70
00:04:59,060 --> 00:05:02,185
notará que no hay nada en Mis Favoritos para el usuario.

71
00:05:02,185 --> 00:05:07,635
Obviamente porque el usuario aún no ha elegido ningún favorito.

72
00:05:07,635 --> 00:05:09,880
Entonces, vamos ahora al menú.

73
00:05:09,880 --> 00:05:11,520
Luego, en el menú,

74
00:05:11,520 --> 00:05:19,820
déjame seleccionar un elemento y luego agregaremos este plato a nuestros favoritos.

75
00:05:19,820 --> 00:05:22,065
Por lo tanto, bajando aquí abajo,

76
00:05:22,065 --> 00:05:25,250
verá el símbolo del corazón allí,

77
00:05:25,250 --> 00:05:29,555
haga clic en eso, y verá que esto se agregaría a los favoritos.

78
00:05:29,555 --> 00:05:32,000
El hecho de que esto se haya agregado a los favoritos,

79
00:05:32,000 --> 00:05:39,550
se indica por el cambio en el icono aquí de un corazón sin llenar a un corazón lleno.

80
00:05:39,550 --> 00:05:42,615
Ahora, si vas a cualquier otro plato,

81
00:05:42,615 --> 00:05:46,005
te darías cuenta de que esto tiene un corazón sin llenar

82
00:05:46,005 --> 00:05:49,685
lo que significa que esto aún no está entre nuestros favoritos.

83
00:05:49,685 --> 00:05:51,920
Por lo tanto, permítanme agregar un elemento más a

84
00:05:51,920 --> 00:05:56,950
mis favoritos y luego agreguemos un tercer elemento a mis favoritos también.

85
00:05:56,950 --> 00:06:04,265
Así que, ahora, verán que si ahora voy a mis favoritos,

86
00:06:04,265 --> 00:06:09,390
verán un conjunto de Mis Favoritos mostrándose aquí.

87
00:06:09,390 --> 00:06:12,470
Así que, viste que acabo de añadir estos tres platos

88
00:06:12,470 --> 00:06:15,580
a mis favoritos y estos están siendo mostrados aquí.

89
00:06:15,580 --> 00:06:18,800
Por lo tanto, esto se realiza mediante el uso de

90
00:06:18,800 --> 00:06:23,240
ese extremo de favoritos en

91
00:06:23,240 --> 00:06:26,670
el lado del servidor, lo que sea implementado como parte de su última asignación.

92
00:06:26,670 --> 00:06:29,090
Por lo tanto, si ha hecho esa asignación correctamente,

93
00:06:29,090 --> 00:06:32,389
entonces esta parte debería funcionar como se esperaba.

94
00:06:32,389 --> 00:06:36,255
Ahora, también podemos modificar Mi favorito.

95
00:06:36,255 --> 00:06:40,530
Por lo tanto, permítanme seguir adelante y eliminar uno de los elementos de Mis favoritos.

96
00:06:40,530 --> 00:06:43,795
Por lo tanto, cuando haga clic en ese botón, notará inmediatamente que,

97
00:06:43,795 --> 00:06:48,935
ese elemento se elimina de Mis Favoritos y desaparece inmediatamente y

98
00:06:48,935 --> 00:06:54,120
mis favoritos se actualizan y verá el valor resultante que se muestra aquí.

99
00:06:54,120 --> 00:06:57,200
Por lo tanto, observe que Mis Favoritos se mostrará sólo

100
00:06:57,200 --> 00:07:01,785
para los usuarios que hayan iniciado sesión en el sistema.

101
00:07:01,785 --> 00:07:07,250
Por lo tanto, inmediatamente nota un conjunto de cambios que se han

102
00:07:07,250 --> 00:07:09,635
realizado en el cliente para admitir

103
00:07:09,635 --> 00:07:12,440
algunas de estas características adicionales que se ven aquí.

104
00:07:12,440 --> 00:07:16,690
También vio que la función de inicio de sesión y cierre de sesión era compatible aquí.

105
00:07:16,690 --> 00:07:18,530
Entonces, cuando hago clic en el botón de cierre de sesión,

106
00:07:18,530 --> 00:07:22,445
inmediatamente nota que el usuario se cierra la sesión y

107
00:07:22,445 --> 00:07:25,520
el nombre de usuario desaparece de allí y

108
00:07:25,520 --> 00:07:29,375
por lo que el botón también se convierte en el botón de inicio de sesión.

109
00:07:29,375 --> 00:07:34,880
Ahora, entonces, con esto nota cómo se ha

110
00:07:34,880 --> 00:07:39,960
actualizado mi cliente para hacer uso del nuevo servidor de API REST, con el

111
00:07:39,960 --> 00:07:44,180
fin de admitir que los favoritos se guardan en el lado del servidor y

112
00:07:44,180 --> 00:07:50,140
luego se reflejan automáticamente en la aplicación Mi cliente como se muestra aquí.

113
00:07:50,140 --> 00:07:55,190
Ahora, que ha visto la aplicación React modificada en acción,

114
00:07:55,190 --> 00:07:58,250
es hora de visitar el código fuente para ver

115
00:07:58,250 --> 00:08:01,340
exactamente cómo se implementa y cuáles son los cambios

116
00:08:01,340 --> 00:08:07,875
que hemos realizado correspondientes a la aplicación Redux al final del curso Redux.

117
00:08:07,875 --> 00:08:10,760
Ahora, los dos cambios principales que notará,

118
00:08:10,760 --> 00:08:16,070
es el soporte para favoritos y también el soporte de autenticación,

119
00:08:16,070 --> 00:08:19,680
el soporte de inicio de sesión y cierre de sesión de usuario.

120
00:08:19,680 --> 00:08:21,770
Ahora, ¿cómo se implementan?

121
00:08:21,770 --> 00:08:27,720
Comenzaremos nuestro viaje en la parte Redux de nuestra aplicación.

122
00:08:27,720 --> 00:08:29,580
Entonces, al entrar en la parte de Redux,

123
00:08:29,580 --> 00:08:31,585
vamos a visitar los tipos de acción.

124
00:08:31,585 --> 00:08:35,255
En los tipos de acción, verá ahora que tenemos

125
00:08:35,255 --> 00:08:40,210
tres nuevos tipos de acción relacionados con sus favoritos.

126
00:08:40,210 --> 00:08:41,750
Por lo tanto, vería los favoritos cargando,

127
00:08:41,750 --> 00:08:43,500
los favoritos fallaron y agregaría favoritos,

128
00:08:43,500 --> 00:08:47,270
que como esperaría estar allí.

129
00:08:47,270 --> 00:08:57,355
Luego, también seis tipos de acción diferentes relacionados con su proceso de inicio de sesión y cierre de sesión.

130
00:08:57,355 --> 00:09:00,320
Ahora, para que pueda ver solicitud de inicio de sesión, éxito de inicio de sesión,

131
00:09:00,320 --> 00:09:02,210
error de inicio de sesión, solicitud de cierre de

132
00:09:02,210 --> 00:09:03,810
sesión, éxito de cierre de sesión y error.

133
00:09:03,810 --> 00:09:10,535
Por lo tanto, veremos cómo estos tipos de acciones se utilizan realmente en nuestra creación de acciones.

134
00:09:10,535 --> 00:09:12,620
Por lo tanto, entrar en los creadores de acción,

135
00:09:12,620 --> 00:09:17,600
así que aquí es donde verá el apoyo para los favoritos aquí.

136
00:09:17,600 --> 00:09:22,070
Por lo tanto, primero examinaremos el soporte para favoritos y luego

137
00:09:22,070 --> 00:09:26,790
examinaremos el soporte para el soporte de autenticación.

138
00:09:26,790 --> 00:09:32,630
Por lo tanto, aquí, verá que tenemos nuevos métodos abajo

139
00:09:32,630 --> 00:09:39,160
aquí llamados como FavoritesLoading, FavoritesFailed y AddFavorites.

140
00:09:39,160 --> 00:09:41,550
Ahora, a partir de sus experiencias anteriores

141
00:09:41,550 --> 00:09:45,950
DishesLoading y DishesFailed y AddPlates y así sucesivamente.

142
00:09:45,950 --> 00:09:48,650
Por lo tanto, estas cosas son muy familiares para usted,

143
00:09:48,650 --> 00:09:54,090
por lo que es exactamente el mismo tipo de configuración para el código aquí.

144
00:09:54,090 --> 00:09:58,170
Además, verá otro método aquí llamado FetchFavorites,

145
00:09:58,170 --> 00:10:01,780
que es de nuevo como dije un tanque Redux,

146
00:10:01,780 --> 00:10:03,630
que se implementa aquí,

147
00:10:03,630 --> 00:10:11,040
donde usaremos la búsqueda para acceder al servidor para buscar los favoritos.

148
00:10:11,040 --> 00:10:15,580
Por lo tanto, estos son los métodos que verá aquí y luego también verá

149
00:10:15,580 --> 00:10:21,270
DeleteFavorite aquí y también un tanque Redux para PostFavorite aquí.

150
00:10:21,270 --> 00:10:24,050
Por lo tanto, en PostFavorite como

151
00:10:24,050 --> 00:10:28,130
cabría esperar, estaría publicando el favorito en el servidor aquí.

152
00:10:28,130 --> 00:10:35,730
Por lo tanto, aquí observe cómo estamos usando la autorización.

153
00:10:35,730 --> 00:10:39,760
Al estar configurado en nuestro encabezado de autorización,

154
00:10:39,760 --> 00:10:43,710
esto es algo que llamaría su atención en este momento,

155
00:10:43,710 --> 00:10:50,940
volveremos a esto de nuevo cuando miremos la autenticación y autorización del usuario.

156
00:10:50,940 --> 00:10:55,820
Por lo tanto, estamos configurando el encabezado de autorización como este usando fetch aquí.

157
00:10:55,820 --> 00:11:00,620
Por lo tanto, para buscar, estamos publicando un elemento en la búsqueda

158
00:11:00,620 --> 00:11:06,845
aquí y luego notará que la estructura de cómo se realiza la búsqueda se da aquí.

159
00:11:06,845 --> 00:11:13,735
Ahora cada vez que publiques un favorito o elimines un favorito o busques un favorito,

160
00:11:13,735 --> 00:11:17,825
siempre tendremos el servidor devuelto a ti,

161
00:11:17,825 --> 00:11:22,545
todo el conjunto de favoritos y luego simplemente agregaremos estos favoritos

162
00:11:22,545 --> 00:11:29,185
a nuestra tienda redux aquí, así que eso es lo que estamos haciendo aquí.

163
00:11:29,185 --> 00:11:33,585
Una vez más, la estructura del código debería verse muy familiar para usted,

164
00:11:33,585 --> 00:11:37,070
si simplemente mira cómo se

165
00:11:37,070 --> 00:11:41,600
implementan el favorito de la publicación, el favorito de eliminación y los favoritos de búsqueda.

166
00:11:41,600 --> 00:11:45,665
Por lo tanto, todos estos manejarán el tema de los favoritos.

167
00:11:45,665 --> 00:11:49,520
Ahora, ¿cómo se implementan exactamente los favoritos en sí?

168
00:11:49,520 --> 00:11:52,950
Por lo tanto, la función reductora se implementa en la estructura favorita aquí.

169
00:11:52,950 --> 00:11:54,875
Por lo tanto, dentro de esta función reducida,

170
00:11:54,875 --> 00:11:57,570
verá cómo manejamos los favoritos agregados, la

171
00:11:57,570 --> 00:11:59,760
carga de favoritos y los favoritos fallaron aquí.

172
00:11:59,760 --> 00:12:04,120
Una vez más, el código debería parecerle muy familiar en función de

173
00:12:04,120 --> 00:12:10,300
su experiencia con las funciones de reductor que ha visto para redux antes.

174
00:12:10,300 --> 00:12:18,850
Por lo tanto, vuelva a prestar un poco de atención a la forma en que se implementa el código.

175
00:12:18,850 --> 00:12:21,130
Esto es bastante sencillo, así que no estoy gastando

176
00:12:21,130 --> 00:12:24,610
demasiado tiempo explicando cómo se implementan estas cosas.

177
00:12:24,610 --> 00:12:27,720
Ahora, aprovechando estos,

178
00:12:27,720 --> 00:12:30,895
tenemos en los componentes que ahora tenemos

179
00:12:30,895 --> 00:12:37,630
un nuevo componente de favoritos cuyo trabajo es renderizar toda la lista de nuestros favoritos.

180
00:12:37,630 --> 00:12:41,380
Por lo tanto, aquí se ve que el componente de favoritos en sí,

181
00:12:41,380 --> 00:12:44,790
la estructura del componente de favoritos es muy similar a

182
00:12:44,790 --> 00:12:49,460
la estructura del componente de menú, así que aquí tenemos

183
00:12:49,460 --> 00:12:56,900
el componente de favoritos que se implementa como un componente funcional y

184
00:12:56,900 --> 00:13:05,575
allí estamos renderizando los favoritos en aquí como se ve en el código aquí.

185
00:13:05,575 --> 00:13:08,460
Una vez más, muy sencillo creo que debería ser capaz de

186
00:13:08,460 --> 00:13:12,190
entender fácilmente cómo se

187
00:13:12,190 --> 00:13:18,835
implementa el componente de favoritos habiendo tenido experiencia con cómo se implementa el componente de menú allí.

188
00:13:18,835 --> 00:13:22,920
Entonces, de nuevo, no estoy gastando demasiado tiempo explicando el código aquí.

189
00:13:22,920 --> 00:13:26,605
Ahora analizar el código también es

190
00:13:26,605 --> 00:13:32,280
una buena experiencia para que usted aprenda cómo se implementa el código, por lo que

191
00:13:32,280 --> 00:13:37,880
procesar este código en su propia cabeza le ayudará a entender de nuevo

192
00:13:37,880 --> 00:13:43,790
para consolidar su comprensión de reaccionar con más detalle.

193
00:13:43,790 --> 00:13:46,085
Por lo tanto, dejaré eso como un ejercicio para ti.

194
00:13:46,085 --> 00:13:49,150
Ahora estoy señalando dónde se han

195
00:13:49,150 --> 00:13:53,380
realizado los cambios para implementar el soporte para favoritos.

196
00:13:53,380 --> 00:13:54,840
Ahora el término favorito,

197
00:13:54,840 --> 00:13:56,630
favoritos también es el apalancamiento en

198
00:13:56,630 --> 00:13:59,995
el componente de detalle del plato y dentro del componente de detalle del plato,

199
00:13:59,995 --> 00:14:08,830
verá que tenemos el adicional- Aquí,

200
00:14:08,830 --> 00:14:14,799
en el componente funcional del plato renderizado,

201
00:14:14,799 --> 00:14:19,360
vamos a renderizar el botón que admite

202
00:14:19,360 --> 00:14:27,595
la selección o cuando haga clic en el contorno del corazón,

203
00:14:27,595 --> 00:14:33,440
agregará ese elemento en particular a su lista de favoritos.

204
00:14:33,440 --> 00:14:37,815
Por lo tanto, todo esto es compatible aquí mediante el uso de este botón aquí que

205
00:14:37,815 --> 00:14:44,200
invoca como ves esta función llamada post favorito que es el redux.

206
00:14:44,200 --> 00:14:47,900
Gracias que hemos implementado allí y este soporte para esto

207
00:14:47,900 --> 00:14:51,925
se implementa en los componentes principales por lo que cuando entras en el componente principal,

208
00:14:51,925 --> 00:14:56,720
verás cómo se implementa el post favorito aquí

209
00:14:56,720 --> 00:15:00,230
y también verás que esto está

210
00:15:00,230 --> 00:15:04,540
incluido en el mapa enviado a apoyos y así el post favorito implementado.

211
00:15:04,540 --> 00:15:07,580
Por lo tanto, ve que la estructuración es muy la

212
00:15:07,580 --> 00:15:11,910
misma que lo que ha visto para el otro código allí.

213
00:15:11,910 --> 00:15:18,295
Por lo tanto, no voy a gastar demasiado tiempo en cómo se implementa el soporte de favoritos,

214
00:15:18,295 --> 00:15:21,400
en su lugar permítanme dedicar un poco más de tiempo a cómo

215
00:15:21,400 --> 00:15:27,705
se admite la autorización del usuario y la autenticación en el código aquí.

216
00:15:27,705 --> 00:15:29,765
Ahora, para la autenticación de usuario,

217
00:15:29,765 --> 00:15:35,810
lo que estamos haciendo aquí es que cuando entras a la tienda de configuración aquí,

218
00:15:35,810 --> 00:15:42,530
verás que tengo una función reductora más llamada Auth que se implementa aquí.

219
00:15:42,530 --> 00:15:49,670
Por lo tanto, eso rastreará la parte de autorización de la misma.

220
00:15:49,670 --> 00:15:51,380
Ahora, ¿cómo se implementa esto?

221
00:15:51,380 --> 00:15:53,910
Una vez más, entrar en acción creadores,

222
00:15:53,910 --> 00:16:01,070
tipos de inacción ya hemos visto el conjunto de acciones relacionadas con el inicio de sesión y cierre de sesión.

223
00:16:01,070 --> 00:16:02,985
Por lo tanto, al entrar en acción creadores,

224
00:16:02,985 --> 00:16:05,980
verá que aquí arriba tenemos

225
00:16:05,980 --> 00:16:10,620
todas las funciones que se implementan para iniciar sesión y cerrar sesión.

226
00:16:10,620 --> 00:16:18,405
Por lo tanto, verá una nueva función llamada inicio de sesión de solicitud, registro de recepción,

227
00:16:18,405 --> 00:16:25,765
y entonces estos son cuando el inicio de sesión es exitoso y así sucesivamente, pero en particular,

228
00:16:25,765 --> 00:16:35,930
esta función particular aquí del usuario de inicio de sesión es donde comenzamos con el proceso de inicio de sesión.

229
00:16:35,930 --> 00:16:40,955
Por lo tanto, enviaremos el inicio de sesión de solicitud en el punto en que el usuario intente iniciar sesión,

230
00:16:40,955 --> 00:16:46,010
después de eso haremos una búsqueda a los usuarios barra final de inicio de sesión con

231
00:16:46,010 --> 00:16:52,455
la publicación y esto contiene en el cuerpo del mensaje las credenciales para el usuario aquí.

232
00:16:52,455 --> 00:16:54,445
Entonces, una vez que hacemos la búsqueda,

233
00:16:54,445 --> 00:16:58,570
si la respuesta se devuelve correctamente,

234
00:16:58,570 --> 00:17:02,330
entonces la respuesta debe contener el token allí.

235
00:17:02,330 --> 00:17:08,545
Por lo tanto, procesaremos esa respuesta aquí abajo y luego, si el inicio de sesión fue exitoso,

236
00:17:08,545 --> 00:17:15,790
entonces almacenaremos el token en el almacenamiento local aquí.

237
00:17:15,790 --> 00:17:18,210
Por lo tanto, puede ver que estamos diciendo LocalStorage establece

238
00:17:18,210 --> 00:17:21,600
token de respuesta token de elemento y luego

239
00:17:21,600 --> 00:17:27,830
también almacenaremos las credenciales del usuario en el almacenamiento local aquí.

240
00:17:27,830 --> 00:17:34,045
Por lo tanto, estos dos me ayudarán a rastrear el proceso de inicio de sesión del usuario.

241
00:17:34,045 --> 00:17:39,600
Después de eso, enviaremos el inicio de sesión de recepción.

242
00:17:39,600 --> 00:17:44,150
Ahora en este punto, cuando el usuario ha iniciado sesión con éxito,

243
00:17:44,150 --> 00:17:46,645
también buscaremos los favoritos para el usuario.

244
00:17:46,645 --> 00:17:51,975
Ahora recuerde que solo puede buscar los favoritos de un usuario que haya iniciado sesión.

245
00:17:51,975 --> 00:17:55,110
Cuando ningún usuario ha iniciado sesión, no hay favoritos que buscar,

246
00:17:55,110 --> 00:17:58,110
pero cuando el usuario inicia sesión correctamente, desea buscar

247
00:17:58,110 --> 00:18:02,250
el favorito del usuario para que pueda mostrarlo en su aplicación reaccionar. Por

248
00:18:02,250 --> 00:18:04,520
lo tanto, es por eso que también estoy haciendo una búsqueda de favoritos

249
00:18:04,520 --> 00:18:07,505
aquí y luego vamos a recibir el inicio de sesión aquí.

250
00:18:07,505 --> 00:18:12,050
Entonces, si hay un error, enviaremos el error de inicio de sesión aquí.

251
00:18:12,050 --> 00:18:18,080
Por lo tanto, todas estas funciones el error de inicio de sesión de recepción y inicio de sesión

252
00:18:18,080 --> 00:18:25,020
invocará las funciones reductoras adecuadas que se implementan en el archivo Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Así que al entrar en el archivo Auth.Js,

254
00:18:27,260 --> 00:18:33,660
el estado aquí rastrea el estado de inicio de sesión del usuario aquí.

255
00:18:33,660 --> 00:18:36,930
Por lo tanto, aquí también almacenaremos en el estado,

256
00:18:36,930 --> 00:18:40,740
el estado implica el Booleano de carga Este que

257
00:18:40,740 --> 00:18:46,160
rastrea si está en el proceso de iniciar sesión. La facilidad de autenticación -

258
00:18:46,160 --> 00:18:53,850
Indicará si el usuario está autenticado y por lo tanto el usuario ha iniciado sesión,

259
00:18:53,850 --> 00:18:57,200
por lo que podrá permitir que el usuario.

260
00:18:57,200 --> 00:19:00,060
Por lo tanto, este indicador se utiliza en muchas circunstancias

261
00:19:00,060 --> 00:19:03,970
para mostrar el estado de inicio de sesión del usuario y luego también

262
00:19:03,970 --> 00:19:11,340
la propiedad del usuario para el estado rastrea las credenciales del usuario.

263
00:19:11,340 --> 00:19:16,135
Entonces, ahí es donde obtendremos el nombre de usuario para mostrarlo en nuestro componente de encabezado.

264
00:19:16,135 --> 00:19:25,310
Ahora, aquí verá la solicitud de inicio de sesión y cuando se active el éxito de inicio de sesión,

265
00:19:25,310 --> 00:19:31,695
almacenará el valor del token aquí y luego el error de inicio de sesión.

266
00:19:31,695 --> 00:19:35,235
La solicitud de cierre de sesión, cerrando con éxito,

267
00:19:35,235 --> 00:19:45,140
todas estas son manejadas por estas varias partes dentro de este reductor el reductor auth.js aquí.

268
00:19:45,140 --> 00:19:51,705
Entonces, así es como se maneja la autenticación del usuario aquí.

269
00:19:51,705 --> 00:19:54,055
Ahora, en el componente de encabezado,

270
00:19:54,055 --> 00:19:55,770
entrando en el componente de encabezado,

271
00:19:55,770 --> 00:20:00,040
así que aquí es donde tenemos la función de inicio de sesión aquí.

272
00:20:00,040 --> 00:20:02,460
Por lo tanto, el HandleLogin, usted recuerda que

273
00:20:02,460 --> 00:20:05,545
ya hemos implementado esto en el curso de reacción.

274
00:20:05,545 --> 00:20:09,330
En el handleLogin, alternarán el modal.

275
00:20:09,330 --> 00:20:14,340
Por lo tanto, cerraremos el modal y luego iniciaremos sesión al usuario en este punto.

276
00:20:14,340 --> 00:20:18,810
Por lo tanto, diremos this.props LoginUser y luego verá que las credenciales,

277
00:20:18,810 --> 00:20:22,710
nombre de usuario y contraseña se pasan como parámetros

278
00:20:22,710 --> 00:20:27,115
al LoginUser y así entra en el func LoginUser,

279
00:20:27,115 --> 00:20:30,400
que luego se encarga de iniciar sesión en el usuario.

280
00:20:30,400 --> 00:20:34,930
Ahora, ¿cómo se muestra el estado de inicio de sesión del usuario?

281
00:20:34,930 --> 00:20:36,785
Por lo tanto, eso es muy simple de nuevo.

282
00:20:36,785 --> 00:20:38,870
En la barra de navegación aquí,

283
00:20:38,870 --> 00:20:42,900
verá que he agregado un nuevo elemento aquí.

284
00:20:42,900 --> 00:20:47,900
Por lo tanto, aquí es donde diremos esto.props.auth.isAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Por lo tanto, el indicador IsAuthenticated está siendo utilizado aquí por mí y por lo tanto, si esto está establecido en true,

286
00:20:54,280 --> 00:20:55,845
entonces mostraré

287
00:20:55,845 --> 00:21:04,910
el botón Cerrar sesión aquí y eso es lo que mostraré aquí.

288
00:21:04,910 --> 00:21:07,110
De lo contrario, mostraré el botón de inicio de sesión.

289
00:21:07,110 --> 00:21:09,890
Por lo tanto, usando ese indicador IsAuthenticated,

290
00:21:09,890 --> 00:21:14,435
estoy volteando qué botón en particular se mostrará en

291
00:21:14,435 --> 00:21:20,520
el encabezado allí, ya sea que muestre el botón de cierre de sesión o el botón de inicio de sesión.

292
00:21:20,520 --> 00:21:24,290
Por lo tanto, ese es el punto que estamos mostrando aquí.

293
00:21:24,290 --> 00:21:29,240
Entonces, el inicio de sesión o el cierre de sesión aquí.

294
00:21:29,240 --> 00:21:34,690
Por lo tanto, así es como estamos manejando el proceso de inicio de sesión y cierre de sesión

295
00:21:34,690 --> 00:21:40,935
aquí y también vamos a mostrar el nombre de usuario justo allí.

296
00:21:40,935 --> 00:21:43,245
Por lo tanto, cuando muestre el botón de cierre de sesión,

297
00:21:43,245 --> 00:21:48,585
también verá que estamos mostrando el nombre del usuario allí.

298
00:21:48,585 --> 00:21:54,290
Por lo tanto, abajo aquí abajo,

299
00:21:54,290 --> 00:21:59,720
también mostraremos el botón

300
00:21:59,720 --> 00:22:06,490
handleLogout y luego tenemos el botón de cierre de sesión que se muestra aquí.

301
00:22:06,490 --> 00:22:09,650
Además, esta declaración en particular aquí,

302
00:22:09,650 --> 00:22:13,280
así es como estamos mostrando el nombre de usuario aquí.

303
00:22:13,280 --> 00:22:17,760
Por lo tanto, esto usa this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Por lo tanto, la propiedad de usuario en el estado de autenticación contiene

305
00:22:24,110 --> 00:22:27,290
las credenciales de usuario y desde allí obtuve el nombre de usuario y luego

306
00:22:27,290 --> 00:22:30,980
lo uso para mostrar esto en la barra de encabezado.

307
00:22:30,980 --> 00:22:34,190
Así que esa es la forma

308
00:22:34,190 --> 00:22:38,170
en que se actualiza el componente de encabezado para manejar el proceso de inicio de sesión y cierre de sesión.

309
00:22:38,170 --> 00:22:41,610
Una vez más, formas bastante sencillas de implementar,

310
00:22:41,610 --> 00:22:44,490
es una forma bastante simple que he implementado aquí.

311
00:22:44,490 --> 00:22:49,765
Ahora, obviamente, si desea una forma más compleja de manejar el proceso de inicio de sesión y cierre de sesión,

312
00:22:49,765 --> 00:22:54,120
ciertamente puede entrar en la forma completa de hacer las cosas,

313
00:22:54,120 --> 00:22:58,160
pero esto es suficiente para cumplir con los requisitos para mi aplicación.

314
00:22:58,160 --> 00:23:01,650
Por lo tanto, he implementado el proceso de inicio de sesión y cierre de sesión de

315
00:23:01,650 --> 00:23:06,970
una manera muy simple aquí usando la ayuda de la tienda Redux.

316
00:23:06,970 --> 00:23:09,440
Por lo tanto, por Redux tienda

317
00:23:09,440 --> 00:23:15,455
en sí está rastreando mi estado de inicio de sesión si estoy conectado y estoy autenticado y si estoy desconectado.

318
00:23:15,455 --> 00:23:17,020
Por lo tanto, si el usuario ha cerrado sesión,

319
00:23:17,020 --> 00:23:19,325
entonces Mis Favoritos no se muestra aquí.

320
00:23:19,325 --> 00:23:24,090
Ahora, un punto importante que preguntará es,

321
00:23:24,090 --> 00:23:31,990
¿cómo nos aseguramos de que no entremos en el estado de favoritos aquí?

322
00:23:31,990 --> 00:23:39,530
Por lo tanto, esto se maneja en el lugar donde manejamos las rutas aquí.

323
00:23:39,530 --> 00:23:42,640
Por lo tanto, notará que para los favoritos aquí,

324
00:23:42,640 --> 00:23:46,880
declaramos para los favoritos el punto final en lugar de

325
00:23:46,880 --> 00:23:51,080
llamar a esto como la ruta que lo llamamos como una ruta privada.

326
00:23:51,080 --> 00:23:55,590
Por lo tanto, la ruta privada le permite asegurarse de que se

327
00:23:55,590 --> 00:24:00,500
le permitirá entrar en esa parte solo

328
00:24:00,500 --> 00:24:02,870
en circunstancias, donde el usuario está conectado.

329
00:24:02,870 --> 00:24:09,600
Por lo tanto, esto evitará una navegación a su endpoint /favorites si ningún usuario ha iniciado sesión.

330
00:24:09,600 --> 00:24:12,055
Ahora, ¿cómo se implementa esta ruta privada?

331
00:24:12,055 --> 00:24:16,020
Esta ruta privada se implementa aquí arriba.

332
00:24:16,020 --> 00:24:19,635
Por lo tanto, puede ver que esta ruta privada se implementa como se muestra aquí.

333
00:24:19,635 --> 00:24:24,070
Por lo tanto, esto no es más que una ruta aquí y luego aquí,

334
00:24:24,070 --> 00:24:28,670
vamos a implementar this.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Por lo tanto, si el usuario está autenticado,

336
00:24:30,620 --> 00:24:35,100
entonces permitiré navegar

337
00:24:35,100 --> 00:24:40,890
al componente que es el componente favorito.

338
00:24:40,890 --> 00:24:45,130
De lo contrario, simplemente redirigiré al componente doméstico.

339
00:24:45,130 --> 00:24:46,790
Por lo tanto, si ningún usuario ha iniciado sesión,

340
00:24:46,790 --> 00:24:49,900
simplemente redirigiré al componente doméstico y por lo tanto esto se

341
00:24:49,900 --> 00:24:54,230
implementa usando esta ruta privada que he diseñado aquí.

342
00:24:54,230 --> 00:25:00,270
Por lo tanto, la ruta privada es algo que es compatible con el enrutador

343
00:25:00,270 --> 00:25:06,750
que usamos el enrutador React Dom que usamos en nuestra aplicación React.

344
00:25:06,750 --> 00:25:10,300
Por lo tanto, una forma muy simple de manejar situaciones,

345
00:25:10,300 --> 00:25:16,425
donde no desea que se naveguen ciertas rutas cuando el usuario no está conectado.

346
00:25:16,425 --> 00:25:21,610
Así que de nuevo, algunos cambios simples que he hecho en

347
00:25:21,610 --> 00:25:23,080
la aplicación para facilitar

348
00:25:23,080 --> 00:25:27,360
todas las diferentes características que ves en tu aplicación React.

349
00:25:27,360 --> 00:25:29,270
Ahora, como cabría esperar,

350
00:25:29,270 --> 00:25:31,115
usted podría estar decepcionado en este punto,

351
00:25:31,115 --> 00:25:34,630
«¿Es tan simple de implementar» y de hecho eso es

352
00:25:34,630 --> 00:25:39,005
exactamente lo que se ha hecho para apoyar todas las nuevas características.

353
00:25:39,005 --> 00:25:42,700
Como puede ver, la autenticación de usuarios y el

354
00:25:42,700 --> 00:25:47,470
proceso de inicio de sesión y cierre de sesión ya que nuestro servidor tiene soporte completo para todo,

355
00:25:47,470 --> 00:25:51,800
implementando el seguimiento del lado del cliente del

356
00:25:51,800 --> 00:25:57,290
proceso de inicio de sesión y cierre de sesión del usuario y todo lo que se vuelve bastante sencillo simplemente

357
00:25:57,290 --> 00:25:59,980
modificando algunos de los componentes y añadiendo

358
00:25:59,980 --> 00:26:09,015
la función reductor de autenticación y agregando el estado de autenticación a nuestra tienda Redux.

359
00:26:09,015 --> 00:26:13,010
Todo el proceso de manejo de la autenticación del usuario

360
00:26:13,010 --> 00:26:17,885
y de inicio de sesión y cierre de sesión se vuelve bastante simple en este caso.

361
00:26:17,885 --> 00:26:23,055
Por lo tanto, con este rápido recorrido por el código React actualizado,

362
00:26:23,055 --> 00:26:25,820
continuemos examinando

363
00:26:25,820 --> 00:26:30,415
nuestra aplicación React algunas características más de nuestra aplicación React.

364
00:26:30,415 --> 00:26:33,650
Así que de nuevo, volviendo a nuestra aplicación,

365
00:26:33,650 --> 00:26:36,580
ahora podemos ir al menú y luego tirar

366
00:26:36,580 --> 00:26:41,080
cualquier plato aquí y puedo publicar comentarios en el plato aquí,

367
00:26:41,080 --> 00:26:49,020
así que inmediatamente establecería la calificación aquí y mi valor de comentario aquí.

368
00:26:50,020 --> 00:26:59,950
Observe que no estoy introduciendo mi nombre de usuario o el nombre de mi autor aquí en el formulario aquí.

369
00:26:59,950 --> 00:27:03,820
Ahora, por supuesto, para enviar un comentario necesita estar conectado.

370
00:27:03,820 --> 00:27:08,765
Por lo tanto, si no está registrado en este comentario no será aceptado por mi servidor.

371
00:27:08,765 --> 00:27:11,165
Así que, primero déjame iniciar sesión.

372
00:27:11,165 --> 00:27:17,140
Por lo tanto, puedo iniciar sesión aquí

373
00:27:17,140 --> 00:27:19,965
y en el momento en que inicie sesión usted nota inmediatamente que la

374
00:27:19,965 --> 00:27:23,485
barra de herramientas de encabezado se actualiza para indicar mi estado.

375
00:27:23,485 --> 00:27:28,255
Ahora, puedo publicar este comentario y usted notará que cuando publique el comentario,

376
00:27:28,255 --> 00:27:30,670
el comentario se agrega a la lista de los comentarios

377
00:27:30,670 --> 00:27:33,120
y también notará que el campo de autor

378
00:27:33,120 --> 00:27:38,285
se completa automáticamente aquí porque así es como configuramos nuestro lado del servidor.

379
00:27:38,285 --> 00:27:39,810
En el campo de comentarios,

380
00:27:39,810 --> 00:27:44,680
hemos configurado a nuestro usuario como una referencia a

381
00:27:44,680 --> 00:27:48,580
la información del usuario que almacenamos en

382
00:27:48,580 --> 00:27:53,060
nuestro lado del servidor y como utilizamos el poblado de mangosta en el lado del servidor,

383
00:27:53,060 --> 00:27:55,555
la información del usuario se rellena automáticamente

384
00:27:55,555 --> 00:27:58,230
en los comentarios entrantes desde el lado del servidor.

385
00:27:58,230 --> 00:28:02,350
Entonces, así es como notas cómo estoy aprovechando

386
00:28:02,350 --> 00:28:07,560
lo que el servidor ya proporciona para que complete automáticamente los detalles.

387
00:28:08,290 --> 00:28:12,665
Por lo tanto, cambios menores de nuevo incluso en

388
00:28:12,665 --> 00:28:20,420
la página de detalles del plato para reflejar el uso del soporte de comentarios en el sitio del servidor.

389
00:28:20,420 --> 00:28:22,370
Con esto, completo

390
00:28:22,370 --> 00:28:29,415
la ilustración rápida del cliente React que hemos implementado como parte de

391
00:28:29,415 --> 00:28:33,445
este ejercicio y espero que

392
00:28:33,445 --> 00:28:37,690
revises los detalles del código en el cliente también y

393
00:28:37,690 --> 00:28:41,560
luego reflexiones sobre lo que has aprendido en el curso React y ver cómo

394
00:28:41,560 --> 00:28:46,230
las modificaciones nos permiten implementar en una versión modificada,

395
00:28:46,230 --> 00:28:51,390
[inaudible] que ahora es capaz de comunicarse con el servidor y luego admitir todas las características que

396
00:28:51,390 --> 00:28:58,770
originalmente queríamos implementar como parte de nuestro cliente y del servidor.