1
00:00:03,650 --> 00:00:08,090
Ora, che abbiamo completato l'aggiornamento del lato server.

2
00:00:08,090 --> 00:00:11,045
È ora di passare al cliente reattivo.

3
00:00:11,045 --> 00:00:15,060
Per tua comodità, ti ho fornito il repository GitHub,

4
00:00:15,060 --> 00:00:20,330
che contiene la versione finale del client che è in grado di comunicare con il

5
00:00:20,330 --> 00:00:26,300
nostro server API REST e quindi rendere le varie viste per il nostro client.

6
00:00:26,300 --> 00:00:30,095
Così, ho preso la riapplicazione che abbiamo sviluppato

7
00:00:30,095 --> 00:00:34,040
nel secondo corso della specializzazione e poi modificato.

8
00:00:34,040 --> 00:00:39,175
Faremo un breve tour attraverso il codice un po 'più tardi.

9
00:00:39,175 --> 00:00:43,520
Ora, clonerai il repository Git sul tuo computer,

10
00:00:43,520 --> 00:00:49,955
quindi avvierai il tuo client e poi lo vedrai comunicare con il nostro set di server.

11
00:00:49,955 --> 00:00:53,655
Vediamo i dettagli dopo.

12
00:00:53,655 --> 00:00:56,985
Per iniziare con questo esercizio,

13
00:00:56,985 --> 00:01:00,460
nel terminale o nella finestra di comando,

14
00:01:00,460 --> 00:01:06,429
vai nella tua posizione comoda e quindi al prompt digita git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, quindi lascia che

16
00:01:22,280 --> 00:01:27,315
l'applicazione React venga clonata sul tuo computer.

17
00:01:27,315 --> 00:01:29,210
Una volta completata la clonazione,

18
00:01:29,210 --> 00:01:34,350
spostati nella cartella Confusion-React

19
00:01:34,350 --> 00:01:38,625
che è stata appena creata quando hai clonato questo repository Git.

20
00:01:38,625 --> 00:01:43,965
Quindi, noterai immediatamente che ci sono già un sacco di file.

21
00:01:43,965 --> 00:01:50,565
Ora, al prompt, digitare filato installare,

22
00:01:50,565 --> 00:01:54,350
al fine di installare tutti i moduli nodo da

23
00:01:54,350 --> 00:01:58,155
cui dipende questa applicazione React.

24
00:01:58,155 --> 00:02:03,140
Così, una volta che i moduli del nodo sono tutti installati,

25
00:02:03,140 --> 00:02:11,810
allora possiamo avviare il nostro filato iniziare a compilare e servire la nostra applicazione React.

26
00:02:11,810 --> 00:02:13,840
Una volta che tutto è dentro,

27
00:02:13,840 --> 00:02:18,650
assicurati che il tuo server MongoDB sia

28
00:02:18,650 --> 00:02:23,775
attivo e che anche il tuo server API REST sia attivo e funzionante.

29
00:02:23,775 --> 00:02:26,030
In caso contrario, il client non funzionerà.

30
00:02:26,030 --> 00:02:30,650
Così, ora che avete installato il client sul computer,

31
00:02:30,650 --> 00:02:33,200
aggiungere il prompt tipo di avvio filato

32
00:02:33,200 --> 00:02:38,610
e l'applicazione sarà ricompilare e servito in breve tempo.

33
00:02:38,610 --> 00:02:42,434
Una volta che l'applicazione è stata compilata con successo,

34
00:02:42,434 --> 00:02:45,650
vai nel browser e vedrai che

35
00:02:45,650 --> 00:02:51,095
la tua applicazione React viene avviata ed è visibile sullo schermo qui.

36
00:02:51,095 --> 00:02:54,290
Noterai immediatamente che la tua applicazione è

37
00:02:54,290 --> 00:02:57,440
in grado di recuperare i dati dal server e quindi rendere

38
00:02:57,440 --> 00:03:00,815
le varie parti della tua applicazione proprio come quello che hai

39
00:03:00,815 --> 00:03:06,070
fatto alla fine del tuo corso React.

40
00:03:06,100 --> 00:03:08,635
Quando si passa alla cartella Informazioni,

41
00:03:08,635 --> 00:03:14,025
si vedrà anche che la pagina Informazioni visualizza anche le informazioni.

42
00:03:14,025 --> 00:03:16,880
Come tale in precedenza nel menu,

43
00:03:16,880 --> 00:03:21,845
si vedono le voci nel menu visualizzate proprio come abbiamo visto con l'applicazione.

44
00:03:21,845 --> 00:03:23,950
Ora, in aggiunta, ho aggiunto in

45
00:03:23,950 --> 00:03:28,475
un'altra pagina all'applicazione a pagina singola chiamata My Favorites,

46
00:03:28,475 --> 00:03:31,150
che non è possibile navigare,

47
00:03:31,150 --> 00:03:35,170
perché nessun utente è connesso al proprio sistema.

48
00:03:35,170 --> 00:03:38,330
Quindi, vedi che non ho alcun utente connesso al sistema.

49
00:03:38,330 --> 00:03:42,160
Quindi, questo è il motivo per cui non ha senso indicare i miei preferiti perché non sai

50
00:03:42,160 --> 00:03:47,950
quale utente come favoriti dovrebbe essere mostrato qui e la pagina di contatto come al solito.

51
00:03:47,950 --> 00:03:49,710
Ora, facciamo il login.

52
00:03:49,710 --> 00:03:51,555
Per accedere alla nostra applicazione,

53
00:03:51,555 --> 00:03:58,020
faremo clic sul pulsante di accesso e poi vedrai che la finestra di dialogo di accesso si apre.

54
00:03:58,020 --> 00:04:04,989
Quindi lasciami accedere come uno degli utenti registrati,

55
00:04:04,989 --> 00:04:09,650
che abbiamo registrato come parte di questo corso in precedenza.

56
00:04:09,650 --> 00:04:11,445
Quindi, una volta effettuato l'accesso,

57
00:04:11,445 --> 00:04:16,530
noterai immediatamente che nell'angolo destro,

58
00:04:16,530 --> 00:04:19,760
vedrai che il pulsante di accesso è ora trasformato in

59
00:04:19,760 --> 00:04:24,200
logout e il nome dell'utente è indicato qui.

60
00:04:24,200 --> 00:04:26,810
Quindi, chiunque abbia effettuato l'accesso è indicato qui.

61
00:04:26,810 --> 00:04:33,280
Puoi anche in linea di principio sostituirlo con l'immagine dell'utente.

62
00:04:33,280 --> 00:04:36,080
Ora, per questo è necessario fare più modifiche

63
00:04:36,080 --> 00:04:40,290
sia al client che al server per supportare la visualizzazione dell'immagine qui.

64
00:04:40,290 --> 00:04:42,160
Ma al momento, ti sto solo mostrando,

65
00:04:42,160 --> 00:04:46,640
come possiamo facilmente visualizzare le informazioni dell'utente qui.

66
00:04:46,640 --> 00:04:50,405
Quindi, questa richiesta di modifica minore alla testa del componente,

67
00:04:50,405 --> 00:04:54,010
dove sarò in grado di recuperare il nome utente.

68
00:04:54,010 --> 00:04:56,225
Quindi, una volta che l'utente accede,

69
00:04:56,225 --> 00:04:59,060
quindi se ora fai clic su My Favorites

70
00:04:59,060 --> 00:05:02,185
noterai che non c'è nulla in My Favorites per l'utente.

71
00:05:02,185 --> 00:05:07,635
Ovviamente perché l'utente non ha ancora scelto alcun favorito.

72
00:05:07,635 --> 00:05:09,880
Quindi, andiamo ora al menu.

73
00:05:09,880 --> 00:05:11,520
Quindi, nel menu,

74
00:05:11,520 --> 00:05:19,820
lasciami selezionare un elemento e poi aggiungeremo questo piatto ai nostri preferiti.

75
00:05:19,820 --> 00:05:22,065
Quindi, scendendo qui sotto,

76
00:05:22,065 --> 00:05:25,250
vedrete il simbolo del cuore lì,

77
00:05:25,250 --> 00:05:29,555
cliccate su quello, e vedrete che questo sarebbe stato aggiunto nei preferiti.

78
00:05:29,555 --> 00:05:32,000
Il fatto che questo sia stato aggiunto nei preferiti,

79
00:05:32,000 --> 00:05:39,550
è indicato dal cambiamento nell'icona qui da un cuore non pieno a un cuore pieno.

80
00:05:39,550 --> 00:05:42,615
Ora, se vai a qualsiasi altro piatto,

81
00:05:42,615 --> 00:05:46,005
noteresti che questo ha un cuore vuoto, il

82
00:05:46,005 --> 00:05:49,685
che significa che questo non è ancora tra i nostri preferiti.

83
00:05:49,685 --> 00:05:51,920
Quindi, lasciami aggiungere un altro elemento ai

84
00:05:51,920 --> 00:05:56,950
miei preferiti e poi aggiungiamo un terzo elemento ai miei preferiti anche.

85
00:05:56,950 --> 00:06:04,265
Quindi, ora, vedrete che se ora vado ai miei preferiti,

86
00:06:04,265 --> 00:06:09,390
vedrete qui una serie di Miei Preferiti.

87
00:06:09,390 --> 00:06:12,470
Quindi, avete visto che ho appena aggiunto questi tre piatti

88
00:06:12,470 --> 00:06:15,580
ai miei preferiti e quindi questi sono mostrati qui.

89
00:06:15,580 --> 00:06:18,800
Quindi, questo viene monitorato utilizzando

90
00:06:18,800 --> 00:06:23,240
quell'endpoint preferito

91
00:06:23,240 --> 00:06:26,670
sul lato server, a seconda di quale sia stato implementato come parte dell'ultima assegnazione.

92
00:06:26,670 --> 00:06:29,090
Quindi, se hai fatto questo compito correttamente,

93
00:06:29,090 --> 00:06:32,389
allora questa parte dovrebbe funzionare come previsto.

94
00:06:32,389 --> 00:06:36,255
Ora, possiamo anche modificare My Favorite.

95
00:06:36,255 --> 00:06:40,530
Quindi, lasciatemi andare avanti ed eliminare uno degli elementi da I miei preferiti.

96
00:06:40,530 --> 00:06:43,795
Quindi, quando clicco su quel pulsante noterai immediatamente che,

97
00:06:43,795 --> 00:06:48,935
quell'elemento viene eliminato dai miei preferiti e scompare immediatamente e i

98
00:06:48,935 --> 00:06:54,120
miei preferiti viene aggiornato e vedrai il valore risultante che viene mostrato qui.

99
00:06:54,120 --> 00:06:57,200
Quindi, si noti che i miei preferiti verranno visualizzati solo

100
00:06:57,200 --> 00:07:01,785
per gli utenti che hanno effettuato l'accesso al sistema.

101
00:07:01,785 --> 00:07:07,250
Quindi, si nota immediatamente una serie di modifiche che sono state

102
00:07:07,250 --> 00:07:09,635
apportate al client al fine di supportare

103
00:07:09,635 --> 00:07:12,440
alcune di queste funzionalità aggiuntive che si vedono qui.

104
00:07:12,440 --> 00:07:16,690
Hai anche visto la funzione di login e logout supportata qui.

105
00:07:16,690 --> 00:07:18,530
Quindi, quando faccio clic sul pulsante di disconnessione,

106
00:07:18,530 --> 00:07:22,445
si nota immediatamente che l'utente viene disconnesso e

107
00:07:22,445 --> 00:07:25,520
il nome utente scompare da lì e

108
00:07:25,520 --> 00:07:29,375
quindi anche il pulsante viene trasformato nel pulsante di accesso.

109
00:07:29,375 --> 00:07:34,880
Ora, quindi, con questo si nota come il mio client è stato

110
00:07:34,880 --> 00:07:39,960
aggiornato per utilizzare il nuovo server API REST,

111
00:07:39,960 --> 00:07:44,180
al fine di supportare i preferiti salvati sul lato server e

112
00:07:44,180 --> 00:07:50,140
quindi automaticamente riflessi nell'applicazione My Client come mostrato qui.

113
00:07:50,140 --> 00:07:55,190
Ora, che avete visto l'applicazione React modificata in azione,

114
00:07:55,190 --> 00:07:58,250
è il momento di fare una visita al codice sorgente per vedere

115
00:07:58,250 --> 00:08:01,340
esattamente come è implementato e quali sono le modifiche

116
00:08:01,340 --> 00:08:07,875
che abbiamo apportato corrispondenti all'applicazione Redux alla fine del corso Redux.

117
00:08:07,875 --> 00:08:10,760
Ora, le due principali modifiche che noterete,

118
00:08:10,760 --> 00:08:16,070
è il supporto per i preferiti e anche il supporto per l'autenticazione,

119
00:08:16,070 --> 00:08:19,680
il login utente e il supporto logout.

120
00:08:19,680 --> 00:08:21,770
Ora, come sono implementati questi?

121
00:08:21,770 --> 00:08:27,720
Inizieremo il nostro viaggio nella parte Redux della nostra applicazione.

122
00:08:27,720 --> 00:08:29,580
Quindi, andando nella parte Redux,

123
00:08:29,580 --> 00:08:31,585
visitiamo i tipi di azione.

124
00:08:31,585 --> 00:08:35,255
Nei tipi di azione, si vedrà ora che abbiamo

125
00:08:35,255 --> 00:08:40,210
tre nuovi tipi di azione relativi ai loro preferiti.

126
00:08:40,210 --> 00:08:41,750
Quindi, si vedrebbe il caricamento dei preferiti,

127
00:08:41,750 --> 00:08:43,500
i preferiti non riusciti e aggiungere i preferiti,

128
00:08:43,500 --> 00:08:47,270
che come ci si aspetterebbe di essere lì.

129
00:08:47,270 --> 00:08:57,355
Quindi, anche sei diversi tipi di azione relativi al loro processo di login e logout.

130
00:08:57,355 --> 00:09:00,320
Ora, così puoi vedere la richiesta di accesso, il successo dell'accesso, l'

131
00:09:00,320 --> 00:09:02,210
errore di accesso, la richiesta di logout,

132
00:09:02,210 --> 00:09:03,810
il successo di logout e il fallimento.

133
00:09:03,810 --> 00:09:10,535
Quindi, vedremo come questi tipi di azione sono effettivamente utilizzati nella nostra azione creare.

134
00:09:10,535 --> 00:09:12,620
Quindi, andando nei creatori di azione,

135
00:09:12,620 --> 00:09:17,600
quindi questo è dove vedrai il supporto per i preferiti qui.

136
00:09:17,600 --> 00:09:22,070
Quindi, esamineremo prima il supporto per i preferiti e poi

137
00:09:22,070 --> 00:09:26,790
esamineremo il supporto per il supporto di autenticazione.

138
00:09:26,790 --> 00:09:32,630
Quindi, qui, vedrete che abbiamo nuovi metodi

139
00:09:32,630 --> 00:09:39,160
qui sotto chiamati come FavoritesLoading, FavoritesFailed e AddFavorites.

140
00:09:39,160 --> 00:09:41,550
Ora, dalle tue esperienze precedenti

141
00:09:41,550 --> 00:09:45,950
DishesLoading e dishesFailed e addDishes e così via.

142
00:09:45,950 --> 00:09:48,650
Quindi, queste cose ti sono molto familiari,

143
00:09:48,650 --> 00:09:54,090
quindi è esattamente lo stesso tipo di configurazione per il codice qui.

144
00:09:54,090 --> 00:09:58,170
Inoltre, vedrai un altro metodo qui chiamato FetchFavorites,

145
00:09:58,170 --> 00:10:01,780
che è di nuovo come ho detto un serbatoio Redux

146
00:10:01,780 --> 00:10:03,630
, che è implementato qui,

147
00:10:03,630 --> 00:10:11,040
dove useremo il recupero per accedere al server per recuperare i preferiti.

148
00:10:11,040 --> 00:10:15,580
Quindi, questi sono i metodi che vedrai qui e poi anche vedrai

149
00:10:15,580 --> 00:10:21,270
DeleteFavorite qui e anche un serbatoio Redux per PostFavorite qui.

150
00:10:21,270 --> 00:10:24,050
Quindi, nel PostFavorite come ci si

151
00:10:24,050 --> 00:10:28,130
aspetterebbe, si sarebbe postare il preferito sul server qui.

152
00:10:28,130 --> 00:10:35,730
Quindi, qui notare come stiamo usando l'autorizzazione.

153
00:10:35,730 --> 00:10:39,760
Essendo impostato nella nostra intestazione di autorizzazione quindi,

154
00:10:39,760 --> 00:10:43,710
questo è qualcosa che vorrei attirare la vostra attenzione in questo momento,

155
00:10:43,710 --> 00:10:50,940
torneremo su questo di nuovo quando guardiamo l'autenticazione e l'autorizzazione dell'utente.

156
00:10:50,940 --> 00:10:55,820
Quindi, stiamo impostando l'intestazione di autorizzazione come questa usando fetch qui.

157
00:10:55,820 --> 00:11:00,620
Quindi, per il recupero, stiamo postando un elemento nel recupero

158
00:11:00,620 --> 00:11:06,845
qui e poi noterete che la struttura di come il recupero è fatto è data qui.

159
00:11:06,845 --> 00:11:13,735
Ora ogni volta che pubblichi un favorito o elimini un favorito o recuperi uno preferito,

160
00:11:13,735 --> 00:11:17,825
avremo sempre il server restituito a te,

161
00:11:17,825 --> 00:11:22,545
l'intero set di preferiti e poi aggiungeremo semplicemente questi preferiti

162
00:11:22,545 --> 00:11:29,185
nel nostro negozio redux qui, quindi questo è quello che stiamo facendo qui.

163
00:11:29,185 --> 00:11:33,585
Ancora una volta, la struttura del codice dovrebbe apparire molto familiare a

164
00:11:33,585 --> 00:11:37,070
te, se semplicemente guardi come

165
00:11:37,070 --> 00:11:41,600
vengono implementati il post preferito, il favorito di eliminazione e i preferiti di recupero.

166
00:11:41,600 --> 00:11:45,665
Quindi, tutti questi gestiranno il problema dei preferiti.

167
00:11:45,665 --> 00:11:49,520
Ora, come sono esattamente implementati i preferiti stessi?

168
00:11:49,520 --> 00:11:52,950
Quindi, la funzione di riduttore è implementata nella struttura preferita qui.

169
00:11:52,950 --> 00:11:54,875
Quindi, all'interno di questa funzione ridotta,

170
00:11:54,875 --> 00:11:57,570
vedrai come gestiamo i preferiti add,

171
00:11:57,570 --> 00:11:59,760
preferiti caricamento, e preferiti non riusciti qui.

172
00:11:59,760 --> 00:12:04,120
Ancora una volta il codice dovrebbe sembrare molto familiare a te in base alla

173
00:12:04,120 --> 00:12:10,300
tua esperienza con le funzioni di riduttore che hai visto prima per redux.

174
00:12:10,300 --> 00:12:18,850
Quindi, ancora una volta prestare un po 'di attenzione al modo in cui il codice è implementato.

175
00:12:18,850 --> 00:12:21,130
Questo è abbastanza semplice, quindi non sto spendendo

176
00:12:21,130 --> 00:12:24,610
troppo tempo a spiegare come queste cose sono implementate.

177
00:12:24,610 --> 00:12:27,720
Ora, approfittando di questi,

178
00:12:27,720 --> 00:12:30,895
abbiamo nei componenti che ora abbiamo

179
00:12:30,895 --> 00:12:37,630
un nuovo componente preferiti il cui compito è quello di rendere tutta la lista dei nostri preferiti.

180
00:12:37,630 --> 00:12:41,380
Quindi, qui vedete che il componente favorites stesso,

181
00:12:41,380 --> 00:12:44,790
la struttura del componente favorites è molto simile alla

182
00:12:44,790 --> 00:12:49,460
struttura del componente del menu quindi qui abbiamo

183
00:12:49,460 --> 00:12:56,900
il componente favorites che è implementato come componente funzionale e in

184
00:12:56,900 --> 00:13:05,575
là stiamo rendendo i favoriti in qui come vedi nel codice qui.

185
00:13:05,575 --> 00:13:08,460
Ancora una volta, molto semplice penso che dovresti essere in grado di

186
00:13:08,460 --> 00:13:12,190
capire facilmente come viene

187
00:13:12,190 --> 00:13:18,835
implementato il componente dei preferiti avendo avuto esperienza con come viene implementato il componente del menu lì.

188
00:13:18,835 --> 00:13:22,920
Quindi, ancora una volta non sto spendendo troppo tempo a spiegare il codice qui.

189
00:13:22,920 --> 00:13:26,605
Ora l'analisi del codice è anche

190
00:13:26,605 --> 00:13:32,280
una buona esperienza per imparare come il codice è implementato, quindi l'

191
00:13:32,280 --> 00:13:37,880
elaborazione di questo codice nella tua testa ti aiuterà a capire di nuovo per

192
00:13:37,880 --> 00:13:43,790
consolidare la tua comprensione di reagire in modo più dettagliato.

193
00:13:43,790 --> 00:13:46,085
Quindi, lascero' che sia un esercizio per te.

194
00:13:46,085 --> 00:13:49,150
Ora sto sottolineando dove sono state

195
00:13:49,150 --> 00:13:53,380
apportate le modifiche per implementare il supporto per i preferiti.

196
00:13:53,380 --> 00:13:54,840
Ora il termine preferito,

197
00:13:54,840 --> 00:13:56,630
favoriti è anche leva

198
00:13:56,630 --> 00:13:59,995
nel componente dettaglio piatto e all'interno del componente dettaglio piatto,

199
00:13:59,995 --> 00:14:08,830
vedrete che abbiamo l'aggiuntivo- Qui,

200
00:14:08,830 --> 00:14:14,799
nel componente funzionale piatto di rendering,

201
00:14:14,799 --> 00:14:19,360
faremo il rendering del pulsante che supporta

202
00:14:19,360 --> 00:14:27,595
la selezione o quando si fa clic sul contorno del cuore,

203
00:14:27,595 --> 00:14:33,440
si aggiungerà quel particolare elemento nella vostra lista dei preferiti.

204
00:14:33,440 --> 00:14:37,815
Quindi, tutto questo è supportato qui usando questo pulsante qui che

205
00:14:37,815 --> 00:14:44,200
richiama come vedi questa funzione chiamata post favorito che è il redux.

206
00:14:44,200 --> 00:14:47,900
Grazie che abbiamo implementato lì e questo supporto per questo

207
00:14:47,900 --> 00:14:51,925
è implementato nei componenti principali, quindi quando si entra nel componente principale,

208
00:14:51,925 --> 00:14:56,720
si vedrà come il post preferito è implementato qui

209
00:14:56,720 --> 00:15:00,230
e si vedrà anche che questo è

210
00:15:00,230 --> 00:15:04,540
incluso nella mappa inviata agli oggetti di scena e così il post preferito implementato.

211
00:15:04,540 --> 00:15:07,580
Quindi, vedi che la strutturazione è molto la

212
00:15:07,580 --> 00:15:11,910
stessa di quella che hai visto per l'altro codice lì.

213
00:15:11,910 --> 00:15:18,295
Quindi, non ho intenzione di spendere troppo tempo su come viene implementato il supporto dei preferiti,

214
00:15:18,295 --> 00:15:21,400
permettetemi di dedicare un po 'più di tempo a come

215
00:15:21,400 --> 00:15:27,705
l'autorizzazione dell'utente e l'autenticazione sono supportate nel codice qui.

216
00:15:27,705 --> 00:15:29,765
Ora per l'autenticazione dell'utente,

217
00:15:29,765 --> 00:15:35,810
quello che stiamo facendo qui è che quando vai nel negozio di configurazione qui,

218
00:15:35,810 --> 00:15:42,530
vedrai che ho un'altra funzione di riduttore chiamata Auth che è implementata qui.

219
00:15:42,530 --> 00:15:49,670
Quindi, questo traccierà la parte di autorizzazione di esso.

220
00:15:49,670 --> 00:15:51,380
Ora come viene implementato?

221
00:15:51,380 --> 00:15:53,910
Ancora una volta, andando in creatori di

222
00:15:53,910 --> 00:16:01,070
azioni, tipi di inazione abbiamo già visto l'insieme di azioni relative al login e logout.

223
00:16:01,070 --> 00:16:02,985
Quindi, andando in creatori di azioni,

224
00:16:02,985 --> 00:16:05,980
vedrete che qui abbiamo

225
00:16:05,980 --> 00:16:10,620
tutte le funzioni che sono implementate per il login e la disconnessione.

226
00:16:10,620 --> 00:16:18,405
Quindi, vedrai una nuova funzione chiamata login di richiesta, ricevere la registrazione,

227
00:16:18,405 --> 00:16:25,765
e così questi sono quando il login ha successo e così via, ma in particolare,

228
00:16:25,765 --> 00:16:35,930
questa particolare funzione qui dell'utente di login è dove iniziamo con il processo di login.

229
00:16:35,930 --> 00:16:40,955
Quindi, invieremo il login richiesta nel punto in cui l'utente tenta di accedere,

230
00:16:40,955 --> 00:16:46,010
dopo di che faremo un recupero per gli utenti slash endpoint di login con

231
00:16:46,010 --> 00:16:52,455
il post e questo contiene nel corpo del messaggio le credenziali per l'utente qui.

232
00:16:52,455 --> 00:16:54,445
Quindi, una volta fatto il recupero,

233
00:16:54,445 --> 00:16:58,570
se la risposta viene restituita correttamente,

234
00:16:58,570 --> 00:17:02,330
la risposta dovrebbe contenere il token lì.

235
00:17:02,330 --> 00:17:08,545
Quindi, elaboreremo quella risposta qui e poi quindi se il login ha avuto successo,

236
00:17:08,545 --> 00:17:15,790
allora memorizzeremo il token nella memoria locale qui.

237
00:17:15,790 --> 00:17:18,210
Quindi, si può vedere che stiamo dicendo localStorage set

238
00:17:18,210 --> 00:17:21,600
token di risposta dell'elemento token e quindi

239
00:17:21,600 --> 00:17:27,830
memorizzeremo anche le credenziali dell'utente nella memoria locale qui.

240
00:17:27,830 --> 00:17:34,045
Quindi, questi due mi aiuteranno a tracciare il processo di accesso dell'utente.

241
00:17:34,045 --> 00:17:39,600
Dopodiché, invieremo il login di ricezione.

242
00:17:39,600 --> 00:17:44,150
Ora, a questo punto, quando l'utente è connesso con successo,

243
00:17:44,150 --> 00:17:46,645
recupereremo anche i preferiti per l'utente.

244
00:17:46,645 --> 00:17:51,975
Ora ricorda che puoi recuperare solo i preferiti per un utente che ha effettuato l'accesso.

245
00:17:51,975 --> 00:17:55,110
Quando nessun utente è connesso, non ci sono preferiti da recuperare,

246
00:17:55,110 --> 00:17:58,110
ma quando l'utente accede con successo si desidera recuperare

247
00:17:58,110 --> 00:18:02,250
il preferito dell'utente in modo che possa visualizzarlo nell'applicazione React.

248
00:18:02,250 --> 00:18:04,520
Quindi, è per questo che sto anche facendo un recupero preferiti

249
00:18:04,520 --> 00:18:07,505
qui e poi riceveremo il login qui.

250
00:18:07,505 --> 00:18:12,050
Quindi se c'è un errore invieremo l'errore di login qui.

251
00:18:12,050 --> 00:18:18,080
Quindi, tutte queste funzioni il login di ricezione e l'errore di login

252
00:18:18,080 --> 00:18:25,020
richiameranno quindi le funzioni del riduttore appropriate che vengono implementate nel file Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Quindi, andando nel file Auth.Js,

254
00:18:27,260 --> 00:18:33,660
lo stato qui tiene traccia dello stato di accesso dell'utente qui.

255
00:18:33,660 --> 00:18:36,930
Quindi, qui memorizzeremo anche nello stato, lo

256
00:18:36,930 --> 00:18:40,740
stato coinvolge il booleano di caricamento orientale che

257
00:18:40,740 --> 00:18:46,160
tiene traccia se si è nel processo di accesso. La facilità di autenticazione -

258
00:18:46,160 --> 00:18:53,850
Indica se l'utente è autenticato e quindi l'utente è connesso, in

259
00:18:53,850 --> 00:18:57,200
modo da essere in grado di consentire l'utente.

260
00:18:57,200 --> 00:19:00,060
Quindi, questo flag viene utilizzato in molte circostanze

261
00:19:00,060 --> 00:19:03,970
per visualizzare lo stato di accesso dell'utente e quindi anche

262
00:19:03,970 --> 00:19:11,340
la proprietà utente per lo stato tiene traccia delle credenziali dell'utente.

263
00:19:11,340 --> 00:19:16,135
Quindi, questo è dove otterremo il nome utente per la visualizzazione nel nostro componente di intestazione.

264
00:19:16,135 --> 00:19:25,310
Ora, qui vedrai la richiesta di accesso e quando viene attivato il successo dell'accesso,

265
00:19:25,310 --> 00:19:31,695
allora memorizzerai il valore del token qui e poi l'errore di accesso.

266
00:19:31,695 --> 00:19:35,235
La richiesta di logout, disconnessione con successo,

267
00:19:35,235 --> 00:19:45,140
tutti questi sono gestiti da queste varie parti all'interno di questo riduttore il riduttore auth.js qui.

268
00:19:45,140 --> 00:19:51,705
Quindi, ecco come viene gestita l'autenticazione dell'utente qui.

269
00:19:51,705 --> 00:19:54,055
Ora, nel componente di intestazione,

270
00:19:54,055 --> 00:19:55,770
andando nel componente di intestazione,

271
00:19:55,770 --> 00:20:00,040
quindi questo è dove abbiamo la funzione di login qui.

272
00:20:00,040 --> 00:20:02,460
Quindi, HandleLogin, ti ricordi che abbiamo

273
00:20:02,460 --> 00:20:05,545
già implementato questo nel corso di reazione.

274
00:20:05,545 --> 00:20:09,330
Nel HandleLogin, commuteranno la modale.

275
00:20:09,330 --> 00:20:14,340
Quindi, chiuderemo la modale e poi accederemo l'utente a questo punto.

276
00:20:14,340 --> 00:20:18,810
Quindi, diremo questo.props LoginUser e poi vedrai che le credenziali, il

277
00:20:18,810 --> 00:20:22,710
nome utente e la password vengono passati come parametri a

278
00:20:22,710 --> 00:20:27,115
LoginUser e in modo che entri nella funzione LoginUser,

279
00:20:27,115 --> 00:20:30,400
che poi si occupa di accedere all'utente.

280
00:20:30,400 --> 00:20:34,930
Ora, come si visualizza lo stato di accesso dell'utente.

281
00:20:34,930 --> 00:20:36,785
Quindi, questo è di nuovo molto semplice.

282
00:20:36,785 --> 00:20:38,870
Nella barra di navigazione qui,

283
00:20:38,870 --> 00:20:42,900
vedrai che ho aggiunto un nuovo elemento qui.

284
00:20:42,900 --> 00:20:47,900
Quindi, questo è dove diremo questo.props.auth.isAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Quindi, il flag IsAuthenticated viene usato qui da me e quindi se questo è impostato su true,

286
00:20:54,280 --> 00:20:55,845
allora mostrerò

287
00:20:55,845 --> 00:21:04,910
il pulsante Logout qui e quindi questa è la cosa che visualizzerò qui.

288
00:21:04,910 --> 00:21:07,110
Altrimenti, mostrerò il pulsante di accesso.

289
00:21:07,110 --> 00:21:09,890
Quindi, usando quel flag isAuthenticated,

290
00:21:09,890 --> 00:21:14,435
sto capovolgendo quale particolare pulsante verrà visualizzato nell'

291
00:21:14,435 --> 00:21:20,520
intestazione lì se si visualizza il pulsante di disconnessione o il pulsante di accesso.

292
00:21:20,520 --> 00:21:24,290
Quindi, questo è il punto che stiamo mostrando qui.

293
00:21:24,290 --> 00:21:29,240
Quindi, il login o il logout qui.

294
00:21:29,240 --> 00:21:34,690
Quindi, è così che stiamo gestendo il processo di login e logout

295
00:21:34,690 --> 00:21:40,935
qui e anche mostreremo il nome utente proprio lì.

296
00:21:40,935 --> 00:21:43,245
Quindi, quando si visualizza il pulsante di disconnessione,

297
00:21:43,245 --> 00:21:48,585
si vedrà anche che stiamo visualizzando il nome dell'utente in là.

298
00:21:48,585 --> 00:21:54,290
Così, qui sotto,

299
00:21:54,290 --> 00:21:59,720
ci sarà anche visualizzare il pulsante HandleLogout e

300
00:21:59,720 --> 00:22:06,490
poi abbiamo il pulsante di logout visualizzato qui.

301
00:22:06,490 --> 00:22:09,650
Inoltre, questa particolare affermazione qui,

302
00:22:09,650 --> 00:22:13,280
questo è il modo in cui stiamo visualizzando il nome utente qui.

303
00:22:13,280 --> 00:22:17,760
Quindi, questo usa this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Quindi, la proprietà utente nello stato di autenticazione contiene

305
00:22:24,110 --> 00:22:27,290
le credenziali utente e da lì ho recuperato il nome utente e quindi

306
00:22:27,290 --> 00:22:30,980
lo uso per visualizzarlo nella barra di intestazione.

307
00:22:30,980 --> 00:22:34,190
Quindi questo è il modo

308
00:22:34,190 --> 00:22:38,170
in cui il componente di intestazione viene aggiornato per gestire il processo di login e logout.

309
00:22:38,170 --> 00:22:41,610
Ancora una volta, modi abbastanza semplici di implementazione,

310
00:22:41,610 --> 00:22:44,490
è un modo abbastanza semplice che ho implementato qui.

311
00:22:44,490 --> 00:22:49,765
Ora, ovviamente, se vuoi un modo più complesso di gestire il processo di login e logout,

312
00:22:49,765 --> 00:22:54,120
certamente puoi entrare nel modo completo di fare le cose,

313
00:22:54,120 --> 00:22:58,160
ma questo è sufficiente per soddisfare i requisiti per la mia applicazione.

314
00:22:58,160 --> 00:23:01,650
Quindi, ho implementato il processo di login e logout in

315
00:23:01,650 --> 00:23:06,970
un modo molto semplice qui usando l'aiuto dello store Redux.

316
00:23:06,970 --> 00:23:09,440
Quindi, dallo stesso negozio Redux sta monitorando

317
00:23:09,440 --> 00:23:15,455
il mio stato di accesso se ho effettuato l'accesso e sono autenticato e se sono disconnesso.

318
00:23:15,455 --> 00:23:17,020
Quindi, se l'utente è disconnesso,

319
00:23:17,020 --> 00:23:19,325
i miei preferiti non sono mostrati qui.

320
00:23:19,325 --> 00:23:24,090
Ora, un punto importante che chiederete è,

321
00:23:24,090 --> 00:23:31,990
come facciamo a garantire che non entriamo nello stato dei preferiti qui?

322
00:23:31,990 --> 00:23:39,530
Quindi, questo viene gestito nel luogo in cui ci occupiamo dei percorsi qui.

323
00:23:39,530 --> 00:23:42,640
Quindi, noterai che per i preferiti qui,

324
00:23:42,640 --> 00:23:46,880
dichiariamo per i preferiti l'endpoint invece di

325
00:23:46,880 --> 00:23:51,080
chiamare questo come il percorso che chiamiamo come un percorso privato.

326
00:23:51,080 --> 00:23:55,590
Quindi, il percorso privato ti consente di assicurarti che ti sarà

327
00:23:55,590 --> 00:24:00,500
permesso di entrare in quella parte solo in circostanze,

328
00:24:00,500 --> 00:24:02,870
in cui l'utente è connesso.

329
00:24:02,870 --> 00:24:09,600
Quindi, questo impedirà la navigazione al loro endpoint /favorites se nessun utente è connesso.

330
00:24:09,600 --> 00:24:12,055
Ora, come viene implementato questo percorso privato?

331
00:24:12,055 --> 00:24:16,020
Questo percorso privato è implementato proprio qui.

332
00:24:16,020 --> 00:24:19,635
Quindi, si può vedere che questo percorso privato è implementato come mostrato qui.

333
00:24:19,635 --> 00:24:24,070
Quindi, questo non è altro che un percorso qui e poi qui,

334
00:24:24,070 --> 00:24:28,670
implementeremo this.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Quindi, se l'utente è autenticato,

336
00:24:30,620 --> 00:24:35,100
allora permetterò di navigare

337
00:24:35,100 --> 00:24:40,890
al componente che è il componente preferito.

338
00:24:40,890 --> 00:24:45,130
Altrimenti, reindirizzerò semplicemente al componente home.

339
00:24:45,130 --> 00:24:46,790
Quindi, se nessun utente è connesso,

340
00:24:46,790 --> 00:24:49,900
reindirizzerò semplicemente al componente home e quindi questo è

341
00:24:49,900 --> 00:24:54,230
implementato usando questo percorso privato che ho progettato qui.

342
00:24:54,230 --> 00:25:00,270
Quindi, il percorso privato è qualcosa che è supportato dal router

343
00:25:00,270 --> 00:25:06,750
che usiamo il router React Dom che abbiamo usato nella nostra applicazione React.

344
00:25:06,750 --> 00:25:10,300
Quindi, un modo molto semplice di gestire le situazioni,

345
00:25:10,300 --> 00:25:16,425
in cui non si desidera che determinati percorsi vengano navigati quando l'utente non è connesso.

346
00:25:16,425 --> 00:25:21,610
Quindi, ancora una volta, alcune semplici modifiche che ho apportato

347
00:25:21,610 --> 00:25:23,080
all'applicazione per facilitare

348
00:25:23,080 --> 00:25:27,360
tutte le diverse funzionalità che vedi nella tua applicazione React.

349
00:25:27,360 --> 00:25:29,270
Ora, come ci si aspetterebbe,

350
00:25:29,270 --> 00:25:31,115
a questo punto potresti essere sottovalutato,

351
00:25:31,115 --> 00:25:34,630
«È così semplice da implementare» e in effetti questo è

352
00:25:34,630 --> 00:25:39,005
esattamente ciò che è stato fatto per supportare tutte le nuove funzionalità.

353
00:25:39,005 --> 00:25:42,700
Come vedi, l'autenticazione dell'utente e il

354
00:25:42,700 --> 00:25:47,470
processo di login e logout dal momento che

355
00:25:47,470 --> 00:25:51,800
il nostro server ha un supporto completo per tutto, implementando il monitoraggio lato client del

356
00:25:51,800 --> 00:25:57,290
processo di login e logout dell'utente e tutto ciò che diventa abbastanza semplice semplicemente

357
00:25:57,290 --> 00:25:59,980
modificando alcuni dei componenti e aggiungendo

358
00:25:59,980 --> 00:26:09,015
la funzione di auth reducer e aggiungendo lo stato di autenticazione al nostro negozio Redux.

359
00:26:09,015 --> 00:26:13,010
L' intero processo di gestione dell'autenticazione utente

360
00:26:13,010 --> 00:26:17,885
e di accesso e disconnessione diventa abbastanza semplice in questo caso.

361
00:26:17,885 --> 00:26:23,055
Quindi, con questo rapido tour del codice React aggiornato,

362
00:26:23,055 --> 00:26:25,820
continuiamo ad esaminare la

363
00:26:25,820 --> 00:26:30,415
nostra applicazione React alcune funzionalità della nostra applicazione React.

364
00:26:30,415 --> 00:26:33,650
Quindi di nuovo, tornando alla nostra applicazione,

365
00:26:33,650 --> 00:26:36,580
ora possiamo andare al menu e poi tirare su

366
00:26:36,580 --> 00:26:41,080
qualsiasi piatto qui e posso postare commenti al piatto qui,

367
00:26:41,080 --> 00:26:49,020
quindi vorrei impostare immediatamente la valutazione qui e il mio valore commento qui.

368
00:26:50,020 --> 00:26:59,950
Si noti che non sto inserendo il mio nome utente o il nome del mio autore qui nel modulo qui.

369
00:26:59,950 --> 00:27:03,820
Ora, naturalmente, al fine di inviare un commento è necessario essere loggati.

370
00:27:03,820 --> 00:27:08,765
Quindi, se non sei loggato questo commento non sarà accettato dal mio server.

371
00:27:08,765 --> 00:27:11,165
Quindi, fammi prima accedere a me stesso.

372
00:27:11,165 --> 00:27:17,140
Quindi, posso accedere qui

373
00:27:17,140 --> 00:27:19,965
e nel momento in cui accedo si nota immediatamente che la

374
00:27:19,965 --> 00:27:23,485
barra degli strumenti dell'intestazione è aggiornata per indicare il mio stato.

375
00:27:23,485 --> 00:27:28,255
Ora, posso postare questo commento e si noterà che quando pubblico il commento,

376
00:27:28,255 --> 00:27:30,670
il commento viene aggiunto nella lista dei commenti

377
00:27:30,670 --> 00:27:33,120
e anche notare che il campo autore

378
00:27:33,120 --> 00:27:38,285
viene compilato automaticamente qui perché è così che abbiamo impostato il nostro lato server.

379
00:27:38,285 --> 00:27:39,810
Nel campo dei commenti,

380
00:27:39,810 --> 00:27:44,680
abbiamo impostato il nostro utente come riferimento alle

381
00:27:44,680 --> 00:27:48,580
informazioni utente che memorizziamo nel

382
00:27:48,580 --> 00:27:53,060
nostro lato server e dal momento che usiamo il popolare Mongusta Popolate sul lato server,

383
00:27:53,060 --> 00:27:55,555
le informazioni utente vengono automaticamente popolate

384
00:27:55,555 --> 00:27:58,230
nei commenti in arrivo dal lato server.

385
00:27:58,230 --> 00:28:02,350
Quindi, è così che noti come sto sfruttando

386
00:28:02,350 --> 00:28:07,560
ciò che il server mi fornisce già per compilare automaticamente i dettagli.

387
00:28:08,290 --> 00:28:12,665
Così, piccole modifiche anche

388
00:28:12,665 --> 00:28:20,420
nella pagina di dettaglio piatto per riflettere l'uso del supporto commenti sul sito server.

389
00:28:20,420 --> 00:28:22,370
Con questo, completa

390
00:28:22,370 --> 00:28:29,415
la rapida illustrazione del client React che abbiamo implementato come parte di

391
00:28:29,415 --> 00:28:33,445
questo esercizio e spero che

392
00:28:33,445 --> 00:28:37,690
tu passi anche attraverso i dettagli del codice nel client e

393
00:28:37,690 --> 00:28:41,560
poi rifletti su ciò che hai imparato nel corso React e vedi come

394
00:28:41,560 --> 00:28:46,230
le modifiche ci permettono di implementare in una versione modificata,

395
00:28:46,230 --> 00:28:51,390
[inudibile] che ora è in grado di comunicare con il server e quindi supportare tutte le funzionalità che

396
00:28:51,390 --> 00:28:58,770
inizialmente intendevamo implementare sia come parte del nostro client che del lato server.