1
00:00:03,650 --> 00:00:08,090
Bây giờ, chúng tôi đã hoàn thành việc cập nhật phía máy chủ.

2
00:00:08,090 --> 00:00:11,045
Đó là thời gian để chuyển sang khách hàng phản ứng.

3
00:00:11,045 --> 00:00:15,060
Để thuận tiện cho bạn, tôi đã cung cấp cho bạn kho lưu trữ GitHub,

4
00:00:15,060 --> 00:00:20,330
chứa phiên bản cuối cùng của khách hàng có thể giao tiếp với

5
00:00:20,330 --> 00:00:26,300
máy chủ REST API của chúng tôi và sau đó hiển thị các chế độ xem khác nhau cho khách hàng của chúng tôi.

6
00:00:26,300 --> 00:00:30,095
Vì vậy, tôi đã thực hiện ứng dụng lại mà chúng tôi đã phát triển

7
00:00:30,095 --> 00:00:34,040
trong quá trình thứ hai của chuyên môn hóa và sau đó sửa đổi nó.

8
00:00:34,040 --> 00:00:39,175
Chúng tôi sẽ có một tour du lịch ngắn gọn thông qua mã một chút sau đó.

9
00:00:39,175 --> 00:00:43,520
Bây giờ, bạn sẽ sao chép kho lưu trữ Git vào máy tính của bạn,

10
00:00:43,520 --> 00:00:49,955
và sau đó khởi động máy khách của bạn và sau đó nhìn thấy nó giao tiếp với bộ máy chủ của chúng tôi.

11
00:00:49,955 --> 00:00:53,655
Hãy xem chi tiết tiếp theo.

12
00:00:53,655 --> 00:00:56,985
Để bắt đầu với bài tập này,

13
00:00:56,985 --> 00:01:00,460
tại cửa sổ thiết bị đầu cuối hoặc lệnh

14
00:01:00,460 --> 00:01:06,429
của bạn, đi đến vị trí thuận tiện của bạn và sau đó tại dấu nhắc gõ git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, và sau đó để cho

16
00:01:22,280 --> 00:01:27,315
ứng dụng React được nhân bản vào máy tính của bạn.

17
00:01:27,315 --> 00:01:29,210
Khi quá trình nhân bản hoàn tất, hãy

18
00:01:29,210 --> 00:01:34,350
chuyển đến thư mục Confusion-React

19
00:01:34,350 --> 00:01:38,625
vừa được tạo ra khi bạn nhân bản kho lưu trữ Git này.

20
00:01:38,625 --> 00:01:43,965
Sau đó, bạn sẽ ngay lập tức nhận thấy rằng có một loạt các tập tin đã có.

21
00:01:43,965 --> 00:01:50,565
Bây giờ, tại dấu nhắc, gõ cài đặt sợi,

22
00:01:50,565 --> 00:01:54,350
để cài đặt tất cả các mô-đun nút

23
00:01:54,350 --> 00:01:58,155
mà ứng dụng React này phụ thuộc vào.

24
00:01:58,155 --> 00:02:03,140
Vì vậy, một khi các mô-đun nút được cài đặt tất cả,

25
00:02:03,140 --> 00:02:11,810
sau đó chúng ta có thể khởi động sợi của chúng tôi bắt đầu biên dịch và phục vụ ứng dụng React của chúng tôi.

26
00:02:11,810 --> 00:02:13,840
Một khi tất cả mọi thứ đã ở trong,

27
00:02:13,840 --> 00:02:18,650
đảm bảo rằng máy chủ MongoDB của bạn

28
00:02:18,650 --> 00:02:23,775
đang hoạt động và cũng là máy chủ REST API của bạn cũng đang hoạt động và chạy.

29
00:02:23,775 --> 00:02:26,030
Nếu không, khách hàng sẽ không hoạt động.

30
00:02:26,030 --> 00:02:30,650
Vì vậy, bây giờ mà bạn đã cài đặt khách hàng của bạn trên máy tính của bạn,

31
00:02:30,650 --> 00:02:33,200
thêm bắt đầu loại sợi nhắc

32
00:02:33,200 --> 00:02:38,610
và ứng dụng của bạn sẽ được biên dịch lại và phục vụ trong một thời gian ngắn.

33
00:02:38,610 --> 00:02:42,434
Một khi ứng dụng của bạn được biên dịch thành công,

34
00:02:42,434 --> 00:02:45,650
đi vào trình duyệt và bạn sẽ thấy rằng

35
00:02:45,650 --> 00:02:51,095
ứng dụng React của bạn được khởi động và hiển thị trên màn hình ở đây.

36
00:02:51,095 --> 00:02:54,290
Bạn sẽ nhận thấy ngay lập tức rằng ứng dụng của bạn có

37
00:02:54,290 --> 00:02:57,440
thể lấy dữ liệu từ máy chủ và sau đó hiển thị

38
00:02:57,440 --> 00:03:00,815
các phần khác nhau của ứng dụng của bạn giống như những gì bạn

39
00:03:00,815 --> 00:03:06,070
đã làm ở cuối khóa học React của bạn.

40
00:03:06,100 --> 00:03:08,635
Khi bạn đi đến thư mục Giới thiệu,

41
00:03:08,635 --> 00:03:14,025
bạn cũng sẽ thấy rằng trang Giới thiệu cũng hiển thị thông tin.

42
00:03:14,025 --> 00:03:16,880
Như vậy trước đó trong menu,

43
00:03:16,880 --> 00:03:21,845
bạn sẽ thấy các mục trong menu được hiển thị giống như chúng ta đã thấy với ứng dụng.

44
00:03:21,845 --> 00:03:23,950
Bây giờ, ngoài ra, tôi đã thêm vào

45
00:03:23,950 --> 00:03:28,475
một trang nữa vào ứng dụng đơn trang được gọi là My Favorites,

46
00:03:28,475 --> 00:03:31,150
mà bạn không thể điều hướng đến,

47
00:03:31,150 --> 00:03:35,170
bởi vì không có người dùng nào được đăng nhập vào hệ thống của họ.

48
00:03:35,170 --> 00:03:38,330
Vì vậy, bạn thấy rằng tôi không có bất kỳ người dùng đăng nhập vào hệ thống.

49
00:03:38,330 --> 00:03:42,160
Vì vậy, đó là lý do tại sao không có điểm trong việc chỉ ra mục yêu thích của tôi bởi vì bạn không biết

50
00:03:42,160 --> 00:03:47,950
người dùng nào là mục yêu thích nên được hiển thị ở đây và trang liên hệ như bình thường.

51
00:03:47,950 --> 00:03:49,710
Bây giờ, hãy đăng nhập.

52
00:03:49,710 --> 00:03:51,555
Để đăng nhập vào ứng dụng của chúng

53
00:03:51,555 --> 00:03:58,020
tôi, chúng tôi sẽ nhấp vào nút đăng nhập và sau đó bạn sẽ thấy rằng hộp thoại đăng nhập bật lên.

54
00:03:58,020 --> 00:04:04,989
Sau đó, hãy để tôi đăng nhập như là một trong những người dùng đã đăng ký,

55
00:04:04,989 --> 00:04:09,650
mà chúng tôi đã đăng ký như là một phần của khóa học này trước đó.

56
00:04:09,650 --> 00:04:11,445
Vì vậy, một khi bạn đăng nhập,

57
00:04:11,445 --> 00:04:16,530
bạn sẽ ngay lập tức nhận thấy rằng ở góc phải,

58
00:04:16,530 --> 00:04:19,760
bạn thấy nút đăng nhập đã biến thành

59
00:04:19,760 --> 00:04:24,200
đăng xuất và tên của người dùng được chỉ ra ở đây.

60
00:04:24,200 --> 00:04:26,810
Vì vậy, bất cứ ai đăng nhập được chỉ ra ở đây.

61
00:04:26,810 --> 00:04:33,280
Bạn cũng có thể về nguyên tắc thay thế điều này bằng hình ảnh của người dùng.

62
00:04:33,280 --> 00:04:36,080
Bây giờ, cho rằng bạn cần phải làm nhiều sửa đổi hơn cho

63
00:04:36,080 --> 00:04:40,290
cả máy khách và máy chủ để hỗ trợ hiển thị hình ảnh ở đây.

64
00:04:40,290 --> 00:04:42,160
Nhưng tại thời điểm này, tôi chỉ cho bạn thấy,

65
00:04:42,160 --> 00:04:46,640
làm thế nào chúng ta có thể dễ dàng hiển thị thông tin người dùng ở đây.

66
00:04:46,640 --> 00:04:50,405
Vì vậy, điều này yêu cầu sửa đổi nhỏ để người đứng đầu của thành phần,

67
00:04:50,405 --> 00:04:54,010
nơi tôi sẽ có thể truy xuất tên người dùng.

68
00:04:54,010 --> 00:04:56,225
Vì vậy, một khi người dùng đăng nhập,

69
00:04:56,225 --> 00:04:59,060
sau đó nếu bây giờ bạn nhấp vào My Favorites, bạn sẽ

70
00:04:59,060 --> 00:05:02,185
nhận thấy rằng không có gì trong My Favorites cho người dùng.

71
00:05:02,185 --> 00:05:07,635
Rõ ràng là bởi vì người dùng chưa chọn bất kỳ mục yêu thích nào.

72
00:05:07,635 --> 00:05:09,880
Vì vậy, bây giờ chúng ta hãy đi đến menu.

73
00:05:09,880 --> 00:05:11,520
Sau đó, trong menu,

74
00:05:11,520 --> 00:05:19,820
hãy để tôi chọn một mục và sau đó chúng tôi sẽ thêm món ăn này vào mục yêu thích của chúng tôi.

75
00:05:19,820 --> 00:05:22,065
Vì vậy, đi xuống dưới đây,

76
00:05:22,065 --> 00:05:25,250
bạn sẽ thấy biểu tượng trái tim ở đó,

77
00:05:25,250 --> 00:05:29,555
nhấp vào đó, và bạn sẽ thấy rằng điều này sẽ được thêm vào mục yêu thích.

78
00:05:29,555 --> 00:05:32,000
Thực tế là điều này đã được thêm vào mục yêu thích,

79
00:05:32,000 --> 00:05:39,550
được chỉ ra bởi sự thay đổi trong biểu tượng ở đây từ một trái tim không đầy đến một trái tim đầy.

80
00:05:39,550 --> 00:05:42,615
Bây giờ, nếu bạn đi đến bất kỳ món ăn nào khác,

81
00:05:42,615 --> 00:05:46,005
bạn sẽ nhận thấy rằng điều này có một trái tim không đầy, có

82
00:05:46,005 --> 00:05:49,685
nghĩa là nó chưa nằm trong số chúng tôi yêu thích.

83
00:05:49,685 --> 00:05:51,920
Vì vậy, hãy để tôi thêm vào một mục nữa vào mục

84
00:05:51,920 --> 00:05:56,950
yêu thích của tôi và sau đó chúng ta hãy thêm một mục thứ ba vào mục yêu thích của tôi cũng.

85
00:05:56,950 --> 00:06:04,265
Vì vậy, bây giờ, bạn sẽ thấy rằng nếu bây giờ tôi đi đến mục yêu thích của tôi,

86
00:06:04,265 --> 00:06:09,390
bạn sẽ thấy một tập hợp các mục yêu thích của tôi được hiển thị ở đây.

87
00:06:09,390 --> 00:06:12,470
Vì vậy, bạn thấy rằng tôi chỉ thêm ba món ăn này vào

88
00:06:12,470 --> 00:06:15,580
mục yêu thích của tôi và vì vậy chúng đang được trưng bày ở đây.

89
00:06:15,580 --> 00:06:18,800
Vì vậy, điều này được theo dõi bằng cách sử dụng

90
00:06:18,800 --> 00:06:23,240
điểm cuối yêu thích

91
00:06:23,240 --> 00:06:26,670
ở phía máy chủ nào được thực hiện như là một phần của nhiệm vụ cuối cùng của bạn.

92
00:06:26,670 --> 00:06:29,090
Vì vậy, nếu bạn đã thực hiện nhiệm vụ đó một cách chính xác,

93
00:06:29,090 --> 00:06:32,389
thì phần này sẽ hoạt động như mong đợi.

94
00:06:32,389 --> 00:06:36,255
Bây giờ, chúng ta cũng có thể sửa đổi yêu thích của tôi.

95
00:06:36,255 --> 00:06:40,530
Vì vậy, hãy để tôi tiếp tục và xóa một trong các mục từ My Favorites.

96
00:06:40,530 --> 00:06:43,795
Vì vậy, khi tôi nhấp vào nút đó bạn sẽ nhận thấy ngay lập tức

97
00:06:43,795 --> 00:06:48,935
rằng, mục đó sẽ bị xóa khỏi mục yêu thích của tôi và ngay lập tức biến mất và

98
00:06:48,935 --> 00:06:54,120
yêu thích của tôi được cập nhật và bạn thấy giá trị kết quả được hiển thị ở đây.

99
00:06:54,120 --> 00:06:57,200
Vì vậy, lưu ý rằng mục yêu thích của tôi sẽ được hiển thị chỉ

100
00:06:57,200 --> 00:07:01,785
cho người dùng đã đăng nhập vào hệ thống.

101
00:07:01,785 --> 00:07:07,250
Vì vậy, bạn ngay lập tức nhận thấy một tập hợp các thay đổi đã được

102
00:07:07,250 --> 00:07:09,635
thực hiện cho khách hàng để hỗ trợ

103
00:07:09,635 --> 00:07:12,440
một số tính năng bổ sung mà bạn thấy ở đây.

104
00:07:12,440 --> 00:07:16,690
Bạn cũng thấy tính năng đăng nhập và đăng xuất được hỗ trợ ở đây.

105
00:07:16,690 --> 00:07:18,530
Vì vậy, khi tôi nhấp vào nút đăng xuất,

106
00:07:18,530 --> 00:07:22,445
bạn ngay lập tức nhận thấy rằng người dùng được đăng xuất và

107
00:07:22,445 --> 00:07:25,520
tên người dùng biến mất khỏi đó và

108
00:07:25,520 --> 00:07:29,375
do đó nút cũng được biến thành nút đăng nhập.

109
00:07:29,375 --> 00:07:34,880
Bây giờ, vì vậy, với điều này bạn nhận thấy

110
00:07:34,880 --> 00:07:39,960
làm thế nào khách hàng của tôi đã được cập nhật để sử dụng máy chủ REST API mới,

111
00:07:39,960 --> 00:07:44,180
để hỗ trợ các mục yêu thích được lưu ở phía máy chủ và

112
00:07:44,180 --> 00:07:50,140
sau đó tự động được phản ánh vào ứng dụng My Client như được hiển thị ở đây.

113
00:07:50,140 --> 00:07:55,190
Bây giờ, bạn đã thấy ứng dụng React sửa đổi trong hành động,

114
00:07:55,190 --> 00:07:58,250
đó là thời gian để truy cập vào mã nguồn để xem

115
00:07:58,250 --> 00:08:01,340
nó được thực hiện chính xác như thế nào và những thay đổi

116
00:08:01,340 --> 00:08:07,875
mà chúng tôi đã thực hiện tương ứng với ứng dụng Redux ở cuối khóa học Redux.

117
00:08:07,875 --> 00:08:10,760
Bây giờ, hai thay đổi lớn mà bạn sẽ nhận thấy,

118
00:08:10,760 --> 00:08:16,070
là sự hỗ trợ cho mục yêu thích và cũng hỗ trợ xác thực,

119
00:08:16,070 --> 00:08:19,680
người dùng đăng nhập và đăng xuất hỗ trợ.

120
00:08:19,680 --> 00:08:21,770
Bây giờ, những điều này được thực hiện như thế nào?

121
00:08:21,770 --> 00:08:27,720
Chúng tôi sẽ bắt đầu cuộc hành trình của chúng tôi trong phần Redux của ứng dụng của chúng tôi.

122
00:08:27,720 --> 00:08:29,580
Vì vậy, đi vào phần Redux,

123
00:08:29,580 --> 00:08:31,585
chúng ta hãy truy cập các loại hành động.

124
00:08:31,585 --> 00:08:35,255
Trong các loại hành động, bạn sẽ thấy bây giờ rằng chúng ta có

125
00:08:35,255 --> 00:08:40,210
ba loại hành động mới liên quan đến mục yêu thích của chúng.

126
00:08:40,210 --> 00:08:41,750
Vì vậy, bạn sẽ thấy mục yêu thích tải,

127
00:08:41,750 --> 00:08:43,500
mục yêu thích không thành công, và thêm mục yêu thích

128
00:08:43,500 --> 00:08:47,270
, như bạn mong đợi sẽ có mặt ở đó.

129
00:08:47,270 --> 00:08:57,355
Sau đó, cũng có sáu loại hành động khác nhau liên quan đến quá trình đăng nhập và đăng xuất của họ.

130
00:08:57,355 --> 00:09:00,320
Bây giờ, vì vậy bạn có thể thấy yêu cầu đăng nhập, đăng nhập thành công,

131
00:09:00,320 --> 00:09:02,210
thất bại đăng nhập, yêu cầu đăng xuất,

132
00:09:02,210 --> 00:09:03,810
đăng xuất thành công và thất bại.

133
00:09:03,810 --> 00:09:10,535
Vì vậy, chúng ta sẽ thấy cách các loại hành động này thực sự được sử dụng trong hành động của chúng tôi tạo ra.

134
00:09:10,535 --> 00:09:12,620
Vì vậy, đi vào những người sáng tạo hành động,

135
00:09:12,620 --> 00:09:17,600
vì vậy đây là nơi bạn sẽ thấy sự hỗ trợ cho các mục yêu thích ở đây.

136
00:09:17,600 --> 00:09:22,070
Vì vậy, trước tiên chúng tôi sẽ kiểm tra sự hỗ trợ cho mục yêu thích và sau đó chúng tôi sẽ

137
00:09:22,070 --> 00:09:26,790
kiểm tra sự hỗ trợ cho sự hỗ trợ xác thực.

138
00:09:26,790 --> 00:09:32,630
Vì vậy, trong đây, bạn sẽ thấy rằng chúng tôi có phương pháp mới xuống dưới

139
00:09:32,630 --> 00:09:39,160
đây gọi là FavoriteSloading, FavoritesFailed, và AddFavorites.

140
00:09:39,160 --> 00:09:41,550
Bây giờ, từ kinh nghiệm trước đây của bạ

141
00:09:41,550 --> 00:09:45,950
nTải và DishesFailed và AddDishes và vân vân.

142
00:09:45,950 --> 00:09:48,650
Vì vậy, những điều này rất quen thuộc với bạn,

143
00:09:48,650 --> 00:09:54,090
do đó nó chính xác cùng một loại thiết lập cho mã ở đây.

144
00:09:54,090 --> 00:09:58,170
Ngoài ra, bạn sẽ thấy một phương pháp khác ở đây gọi

145
00:09:58,170 --> 00:10:01,780
là FetchFavorites, một lần nữa như tôi đã nói một xe tăng Redux,

146
00:10:01,780 --> 00:10:03,630
được thực hiện ở đây,

147
00:10:03,630 --> 00:10:11,040
nơi chúng tôi sẽ sử dụng lấy để truy cập vào máy chủ để lấy các mục yêu thích.

148
00:10:11,040 --> 00:10:15,580
Vì vậy, đây là những phương pháp mà bạn sẽ thấy ở đây và sau đó bạn cũng sẽ thấy D

149
00:10:15,580 --> 00:10:21,270
eleteFavorite ở đây và cũng là một xe tăng Redux cho PostFavorite ở đây.

150
00:10:21,270 --> 00:10:24,050
Vì vậy, trong PostFavorite như bạn mong đợi,

151
00:10:24,050 --> 00:10:28,130
bạn sẽ được đăng yêu thích lên máy chủ ở đây.

152
00:10:28,130 --> 00:10:35,730
Vì vậy, ở đây chú ý cách chúng tôi đang sử dụng ủy quyền.

153
00:10:35,730 --> 00:10:39,760
Được thiết lập trong tiêu đề ủy quyền của chúng tôi vì vậy,

154
00:10:39,760 --> 00:10:43,710
đây là một cái gì đó mà tôi sẽ thu hút sự chú ý của bạn vào thời điểm này,

155
00:10:43,710 --> 00:10:50,940
chúng tôi sẽ trở lại điều này một lần nữa khi chúng tôi nhìn vào xác thực người dùng và ủy quyền.

156
00:10:50,940 --> 00:10:55,820
Vì vậy, chúng tôi đang thiết lập các tiêu đề ủy quyền như thế này bằng cách sử dụng lấy ở đây.

157
00:10:55,820 --> 00:11:00,620
Vì vậy, để lấy, chúng tôi đang đăng một mục vào lấy

158
00:11:00,620 --> 00:11:06,845
ở đây và sau đó bạn sẽ nhận thấy rằng cấu trúc của cách lấy được thực hiện được đưa ra ở đây.

159
00:11:06,845 --> 00:11:13,735
Bây giờ bất cứ khi nào bạn đăng một yêu thích hoặc xóa một yêu thích hoặc lấy một yêu thích,

160
00:11:13,735 --> 00:11:17,825
chúng tôi sẽ luôn luôn có máy chủ trả lại cho bạn,

161
00:11:17,825 --> 00:11:22,545
toàn bộ các yêu thích và sau đó chúng tôi sẽ chỉ đơn giản thêm những yêu thích

162
00:11:22,545 --> 00:11:29,185
vào cửa hàng redux của chúng tôi ở đây để đó là những gì chúng tôi đang làm ở đây.

163
00:11:29,185 --> 00:11:33,585
Một lần nữa, cấu trúc mã sẽ trông rất quen thuộc với bạn,

164
00:11:33,585 --> 00:11:37,070
nếu bạn chỉ cần nhìn vào cách yêu thích bài đăng

165
00:11:37,070 --> 00:11:41,600
, yêu thích xóa và yêu thích lấy được thực hiện.

166
00:11:41,600 --> 00:11:45,665
Vì vậy, tất cả những điều này sẽ xử lý vấn đề yêu thích.

167
00:11:45,665 --> 00:11:49,520
Bây giờ, chính xác là các mục yêu thích chính nó được thực hiện như thế nào?

168
00:11:49,520 --> 00:11:52,950
Vì vậy, chức năng giảm tốc được thực hiện trong cấu trúc yêu thích ở đây.

169
00:11:52,950 --> 00:11:54,875
Vì vậy, bên trong chức năng giảm này,

170
00:11:54,875 --> 00:11:57,570
bạn sẽ thấy làm thế nào chúng ta xử lý thêm yêu thích,

171
00:11:57,570 --> 00:11:59,760
yêu thích tải, và yêu thích thất bại ở đây.

172
00:11:59,760 --> 00:12:04,120
Một lần nữa mã sẽ trông rất quen thuộc với bạn dựa trên

173
00:12:04,120 --> 00:12:10,300
kinh nghiệm của bạn với các chức năng giảm tốc mà bạn đã nhìn thấy cho redux trước đây.

174
00:12:10,300 --> 00:12:18,850
Vì vậy, một lần nữa trả một chút chú ý đến cách mã được thực hiện.

175
00:12:18,850 --> 00:12:21,130
Điều này là khá đơn giản vì vậy tôi không dành

176
00:12:21,130 --> 00:12:24,610
quá nhiều thời gian giải thích làm thế nào những điều này được thực hiện.

177
00:12:24,610 --> 00:12:27,720
Bây giờ, tận dụng những điều này,

178
00:12:27,720 --> 00:12:30,895
chúng tôi có trong các thành phần chúng tôi bây giờ có

179
00:12:30,895 --> 00:12:37,630
một thành phần yêu thích mới mà công việc đó là để hiển thị tất cả các danh sách yêu thích của chúng tôi.

180
00:12:37,630 --> 00:12:41,380
Vì vậy, ở đây bạn thấy rằng các thành phần yêu thích chính nó,

181
00:12:41,380 --> 00:12:44,790
cấu trúc của các thành phần yêu thích là rất nhiều tương tự như

182
00:12:44,790 --> 00:12:49,460
cấu trúc của các thành phần trình đơn vì vậy ở đây chúng tôi có

183
00:12:49,460 --> 00:12:56,900
thành phần yêu thích được thực hiện như một thành phần chức năng và trong

184
00:12:56,900 --> 00:13:05,575
đó chúng tôi đang render các mục yêu thích trong ở đây như bạn thấy trong mã ở đây.

185
00:13:05,575 --> 00:13:08,460
Một lần nữa, rất đơn giản tôi nghĩ rằng bạn sẽ có thể dễ

186
00:13:08,460 --> 00:13:12,190
dàng hiểu làm thế nào các thành phần yêu thích được

187
00:13:12,190 --> 00:13:18,835
thực hiện có kinh nghiệm với cách các thành phần menu được thực hiện ở đó.

188
00:13:18,835 --> 00:13:22,920
Vì vậy, một lần nữa tôi không dành quá nhiều thời gian giải thích mã ở đây.

189
00:13:22,920 --> 00:13:26,605
Bây giờ phân tích cú pháp thông qua mã cũng là

190
00:13:26,605 --> 00:13:32,280
một trải nghiệm tốt để bạn tìm hiểu làm thế nào các mã được thực hiện để

191
00:13:32,280 --> 00:13:37,880
xử lý mã này trong đầu của riêng bạn sẽ giúp bạn hiểu một lần nữa

192
00:13:37,880 --> 00:13:43,790
để củng cố sự hiểu biết của bạn về phản ứng một cách chi tiết hơn.

193
00:13:43,790 --> 00:13:46,085
Vì vậy, tôi sẽ để nó như một bài tập cho các bạn.

194
00:13:46,085 --> 00:13:49,150
Bây giờ tôi chỉ ra nơi những thay đổi đã được

195
00:13:49,150 --> 00:13:53,380
thực hiện để thực hiện hỗ trợ cho mục yêu thích.

196
00:13:53,380 --> 00:13:54,840
Bây giờ các thuật ngữ yêu

197
00:13:54,840 --> 00:13:56,630
thích, yêu thích cũng là đòn bẩy trong

198
00:13:56,630 --> 00:13:59,995
các thành phần chi tiết món ăn và bên trong các thành phần chi tiết món ăn,

199
00:13:59,995 --> 00:14:08,830
bạn sẽ thấy rằng chúng ta có thêm-

200
00:14:08,830 --> 00:14:14,799
Trong đây, trong các thành phần chức năng

201
00:14:14,799 --> 00:14:19,360
render món ăn, chúng tôi sẽ vẽ các nút hỗ trợ

202
00:14:19,360 --> 00:14:27,595
lựa chọn hoặc khi bạn bấm vào phác thảo trái tim,

203
00:14:27,595 --> 00:14:33,440
nó sẽ thêm rằng mục cụ thể vào danh sách yêu thích của bạn.

204
00:14:33,440 --> 00:14:37,815
Vì vậy, tất cả điều này được hỗ trợ ở đây bằng cách sử dụng nút này ở đây mà

205
00:14:37,815 --> 00:14:44,200
invokes như bạn thấy chức năng này được gọi là bài yêu thích đó là redux.

206
00:14:44,200 --> 00:14:47,900
Cảm ơn rằng chúng tôi đã thực hiện ở đó và hỗ trợ này cho điều này

207
00:14:47,900 --> 00:14:51,925
được thực hiện trong các thành phần chính, vì vậy khi bạn đi vào các thành phần chính,

208
00:14:51,925 --> 00:14:56,720
bạn sẽ thấy như thế nào các bài yêu thích được thực hiện ở đây

209
00:14:56,720 --> 00:15:00,230
và bạn cũng sẽ thấy rằng điều này được

210
00:15:00,230 --> 00:15:04,540
bao gồm trong bản đồ gửi đến đạo cụ và do đó các bài đăng yêu thích thực hiện.

211
00:15:04,540 --> 00:15:07,580
Vì vậy, bạn thấy cấu trúc là rất nhiều

212
00:15:07,580 --> 00:15:11,910
giống như những gì bạn đã nhìn thấy cho các mã khác có.

213
00:15:11,910 --> 00:15:18,295
Vì vậy, tôi sẽ không dành quá nhiều thời gian vào cách hỗ trợ yêu thích được thực hiện,

214
00:15:18,295 --> 00:15:21,400
thay vào đó hãy để tôi dành nhiều thời gian hơn về cách

215
00:15:21,400 --> 00:15:27,705
người dùng ủy quyền và xác thực được hỗ trợ trong mã ở đây.

216
00:15:27,705 --> 00:15:29,765
Bây giờ để xác thực người dùng,

217
00:15:29,765 --> 00:15:35,810
những gì chúng tôi đang làm ở đây là khi bạn đi vào cửa hàng cấu hình ở đây,

218
00:15:35,810 --> 00:15:42,530
bạn sẽ thấy rằng tôi có thêm một chức năng giảm được gọi là Auth được thực hiện ở đây.

219
00:15:42,530 --> 00:15:49,670
Vì vậy, điều đó sẽ theo dõi phần ủy quyền của nó.

220
00:15:49,670 --> 00:15:51,380
Bây giờ điều này được thực hiện như thế nào?

221
00:15:51,380 --> 00:15:53,910
Một lần nữa, đi vào người sáng tạo hành

222
00:15:53,910 --> 00:16:01,070
động, các loại không hành động chúng tôi đã thấy các tập hợp các hành động liên quan đến đăng nhập và đăng xuất.

223
00:16:01,070 --> 00:16:02,985
Vì vậy, đi vào người sáng tạo hành động,

224
00:16:02,985 --> 00:16:05,980
bạn sẽ thấy rằng ở đây chúng tôi có

225
00:16:05,980 --> 00:16:10,620
tất cả các chức năng được thực hiện để đăng nhập và đăng xuất.

226
00:16:10,620 --> 00:16:18,405
Vì vậy, bạn sẽ thấy một chức năng mới gọi là đăng nhập yêu cầu, nhận đăng nhập,

227
00:16:18,405 --> 00:16:25,765
và vì vậy đây là khi đăng nhập thành công và như vậy nhưng đặc biệt,

228
00:16:25,765 --> 00:16:35,930
chức năng đặc biệt này ở đây của người dùng đăng nhập là nơi chúng tôi bắt đầu với quá trình đăng nhập.

229
00:16:35,930 --> 00:16:40,955
Vì vậy, chúng tôi sẽ gửi yêu cầu đăng nhập tại thời điểm khi người dùng cố gắng đăng nhập,

230
00:16:40,955 --> 00:16:46,010
sau đó chúng tôi sẽ làm một lấy cho người dùng slash điểm cuối đăng nhập với

231
00:16:46,010 --> 00:16:52,455
bài đăng và điều này chứa trong nội dung của thông điệp các thông tin đăng nhập cho người dùng ở đây.

232
00:16:52,455 --> 00:16:54,445
Vì vậy, một khi chúng ta thực hiện việc lấy,

233
00:16:54,445 --> 00:16:58,570
nếu phản ứng được trả lại chính xác,

234
00:16:58,570 --> 00:17:02,330
thì phản ứng sẽ chứa mã thông báo ở đó.

235
00:17:02,330 --> 00:17:08,545
Vì vậy, chúng tôi sẽ xử lý phản ứng đó xuống đây và sau đó vì vậy nếu đăng nhập thành công,

236
00:17:08,545 --> 00:17:15,790
sau đó chúng tôi sẽ lưu trữ mã thông báo vào lưu trữ cục bộ ở đây.

237
00:17:15,790 --> 00:17:18,210
Vì vậy, bạn có thể thấy rằng chúng ta đang nói LocalStorage thiết lập

238
00:17:18,210 --> 00:17:21,600
mã thông báo phản hồi mục và sau đó chúng tôi

239
00:17:21,600 --> 00:17:27,830
cũng sẽ lưu trữ thông tin đăng nhập của người dùng trong lưu trữ cục bộ ở đây.

240
00:17:27,830 --> 00:17:34,045
Vì vậy, hai điều này sẽ giúp tôi theo dõi quá trình đăng nhập của người dùng.

241
00:17:34,045 --> 00:17:39,600
Sau đó, chúng tôi sẽ gửi thông tin đăng nhập nhận.

242
00:17:39,600 --> 00:17:44,150
Bây giờ tại thời điểm này khi người dùng đăng nhập thành công,

243
00:17:44,150 --> 00:17:46,645
chúng tôi cũng sẽ lấy các mục yêu thích cho người dùng.

244
00:17:46,645 --> 00:17:51,975
Bây giờ hãy nhớ rằng bạn chỉ có thể lấy các mục yêu thích cho người dùng đã đăng nhập.

245
00:17:51,975 --> 00:17:55,110
Khi không có người dùng đăng nhập không có mục yêu thích nào được lấy,

246
00:17:55,110 --> 00:17:58,110
nhưng khi người dùng đăng nhập thành công bạn muốn lấy

247
00:17:58,110 --> 00:18:02,250
yêu thích của người dùng để anh ta có thể hiển thị điều đó trong ứng dụng phản ứng của bạn.

248
00:18:02,250 --> 00:18:04,520
Vì vậy, đó là lý do tại sao tôi cũng đang làm một yêu thích lấy

249
00:18:04,520 --> 00:18:07,505
ở đây và sau đó chúng tôi sẽ nhận được đăng nhập ở đây.

250
00:18:07,505 --> 00:18:12,050
Sau đó, nếu có lỗi, chúng tôi sẽ gửi lỗi đăng nhập ở đây.

251
00:18:12,050 --> 00:18:18,080
Vì vậy, tất cả các chức năng nhận được đăng nhập và đăng nhập lỗi

252
00:18:18,080 --> 00:18:25,020
sau đó sẽ gọi các chức năng Reducer thích hợp được thực hiện trong các tập tin Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Vì vậy, đi vào tập tin Auth.Js,

254
00:18:27,260 --> 00:18:33,660
trạng thái ở đây theo dõi tình trạng đăng nhập của người dùng ở đây.

255
00:18:33,660 --> 00:18:36,930
Vì vậy, ở đây chúng tôi cũng sẽ lưu trữ trong tiểu

256
00:18:36,930 --> 00:18:40,740
bang, nhà nước liên quan đến Đông tải Boolean

257
00:18:40,740 --> 00:18:46,160
theo dõi cho dù bạn đang ở trong quá trình đăng nhập. Dễ dàng xác thực-

258
00:18:46,160 --> 00:18:53,850
Sẽ cho biết liệu người dùng được xác thực và do đó người dùng được đăng nhập,

259
00:18:53,850 --> 00:18:57,200
vì vậy bạn sẽ có thể cho phép người dùng.

260
00:18:57,200 --> 00:19:00,060
Vì vậy, lá cờ này được sử dụng trong nhiều trường hợp

261
00:19:00,060 --> 00:19:03,970
để hiển thị trạng thái đăng nhập của người dùng và sau đó cũng là

262
00:19:03,970 --> 00:19:11,340
thuộc tính người dùng cho nhà nước theo dõi thông tin đăng nhập của người dùng.

263
00:19:11,340 --> 00:19:16,135
Vì vậy, đó là nơi chúng tôi sẽ nhận được tên người dùng để hiển thị trong thành phần tiêu đề của chúng tôi.

264
00:19:16,135 --> 00:19:25,310
Bây giờ, ở đây bạn sẽ thấy yêu cầu đăng nhập và khi thành công đăng nhập được kích hoạt,

265
00:19:25,310 --> 00:19:31,695
sau đó bạn sẽ lưu trữ giá trị mã thông báo ở đây và sau đó là lỗi đăng nhập.

266
00:19:31,695 --> 00:19:35,235
Yêu cầu đăng xuất, đăng xuất thành công,

267
00:19:35,235 --> 00:19:45,140
tất cả những điều này được xử lý bởi các bộ phận khác nhau bên trong bộ giảm tốc này auth.js ở đây.

268
00:19:45,140 --> 00:19:51,705
Vì vậy, đó là cách xác thực của người dùng được xử lý ở đây.

269
00:19:51,705 --> 00:19:54,055
Bây giờ, trong thành phần tiêu đề,

270
00:19:54,055 --> 00:19:55,770
đi vào thành phần tiêu đề,

271
00:19:55,770 --> 00:20:00,040
vì vậy đây là nơi chúng tôi có chức năng đăng nhập ở đây.

272
00:20:00,040 --> 00:20:02,460
Vì vậy, HandleLogin, bạn nhớ rằng chúng tôi

273
00:20:02,460 --> 00:20:05,545
đã thực hiện điều này trong quá trình phản ứng.

274
00:20:05,545 --> 00:20:09,330
Trong HandleLogin, họ sẽ chuyển đổi phương thức.

275
00:20:09,330 --> 00:20:14,340
Vì vậy, chúng tôi sẽ đóng phương thức và sau đó chúng tôi sẽ đăng nhập vào người dùng tại thời điểm này.

276
00:20:14,340 --> 00:20:18,810
Vì vậy, chúng ta sẽ nói này.props LoginUser và sau đó bạn sẽ thấy rằng các thông tin đăng nhập,

277
00:20:18,810 --> 00:20:22,710
tên người dùng và mật khẩu được thông qua như là

278
00:20:22,710 --> 00:20:27,115
các tham số để LoginUser và do đó được vào func LoginUser,

279
00:20:27,115 --> 00:20:30,400
mà sau đó sẽ chăm sóc đăng nhập vào người dùng.

280
00:20:30,400 --> 00:20:34,930
Bây giờ, làm thế nào để bạn hiển thị trạng thái đăng nhập của người dùng.

281
00:20:34,930 --> 00:20:36,785
Vì vậy, điều đó rất đơn giản một lần nữa.

282
00:20:36,785 --> 00:20:38,870
Trong navbar ở đây,

283
00:20:38,870 --> 00:20:42,900
bạn sẽ thấy rằng tôi đã thêm vào một mục mới ở đây.

284
00:20:42,900 --> 00:20:47,900
Vì vậy, đây là nơi chúng ta sẽ nói này.props.auth.isAuthenticcated.

285
00:20:47,900 --> 00:20:54,280
Vì vậy, cờ IsAuthenticated đang được sử dụng ở đây bởi tôi và vì vậy nếu điều này được thiết lập thành true,

286
00:20:54,280 --> 00:20:55,845
sau đó tôi sẽ hiển

287
00:20:55,845 --> 00:21:04,910
thị nút Đăng xuất ở đây và vì vậy đó là điều mà tôi sẽ hiển thị ở đây.

288
00:21:04,910 --> 00:21:07,110
Nếu không, tôi sẽ hiển thị nút đăng nhập.

289
00:21:07,110 --> 00:21:09,890
Vì vậy, bằng cách sử dụng lá cờ IsAuthenticated,

290
00:21:09,890 --> 00:21:14,435
tôi lật nút cụ thể nào sẽ được hiển thị

291
00:21:14,435 --> 00:21:20,520
trong tiêu đề có cho dù bạn hiển thị nút đăng xuất hoặc nút đăng nhập.

292
00:21:20,520 --> 00:21:24,290
Vì vậy, đó là điểm mà chúng tôi đang hiển thị ở đây.

293
00:21:24,290 --> 00:21:29,240
Vì vậy, đăng nhập hoặc đăng xuất ở đây.

294
00:21:29,240 --> 00:21:34,690
Vì vậy, đó là cách chúng tôi đang xử lý quá trình đăng nhập và đăng xuất ở

295
00:21:34,690 --> 00:21:40,935
đây và chúng tôi cũng sẽ hiển thị tên người dùng ngay tại đó.

296
00:21:40,935 --> 00:21:43,245
Vì vậy, khi bạn hiển thị nút đăng xuất,

297
00:21:43,245 --> 00:21:48,585
bạn cũng sẽ thấy rằng chúng tôi đang hiển thị tên của người dùng trong đó.

298
00:21:48,585 --> 00:21:54,290
Vì vậy, xuống dưới đây,

299
00:21:54,290 --> 00:21:59,720
chúng tôi cũng sẽ hiển thị nút HandleLogout và

300
00:21:59,720 --> 00:22:06,490
sau đó chúng tôi có nút đăng xuất được hiển thị ở đây.

301
00:22:06,490 --> 00:22:09,650
Ngoài ra, tuyên bố đặc biệt này ở đây,

302
00:22:09,650 --> 00:22:13,280
đây là cách chúng tôi đang hiển thị tên người dùng ở đây.

303
00:22:13,280 --> 00:22:17,760
Vì vậy, điều này sử dụng tên người dùng này.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Vì vậy, tài sản người dùng trong trạng thái auth chứa

305
00:22:24,110 --> 00:22:27,290
thông tin đăng nhập người dùng và từ đó tôi lấy tên người dùng và sau đó tôi

306
00:22:27,290 --> 00:22:30,980
sử dụng nó để hiển thị điều này trong thanh tiêu đề.

307
00:22:30,980 --> 00:22:34,190
Vì vậy, đó là cách các thành phần tiêu đề được

308
00:22:34,190 --> 00:22:38,170
cập nhật để xử lý quá trình đăng nhập và đăng xuất.

309
00:22:38,170 --> 00:22:41,610
Một lần nữa, cách thực hiện khá đơn giản,

310
00:22:41,610 --> 00:22:44,490
đó là cách khá đơn giản mà tôi đã thực hiện ở đây.

311
00:22:44,490 --> 00:22:49,765
Bây giờ rõ ràng, nếu bạn muốn có một cách phức tạp hơn để xử lý quá trình đăng nhập và đăng xuất,

312
00:22:49,765 --> 00:22:54,120
chắc chắn bạn có thể đi vào cách làm đầy đủ,

313
00:22:54,120 --> 00:22:58,160
nhưng điều này là đủ để đáp ứng các yêu cầu cho ứng dụng của tôi.

314
00:22:58,160 --> 00:23:01,650
Vì vậy, tôi đã thực hiện quá trình đăng nhập và đăng xuất

315
00:23:01,650 --> 00:23:06,970
một cách rất đơn giản ở đây bằng cách sử dụng sự trợ giúp của cửa hàng Redux.

316
00:23:06,970 --> 00:23:09,440
Vì vậy, bởi Redux cửa hàng chính nó là theo dõi

317
00:23:09,440 --> 00:23:15,455
tình trạng đăng nhập của tôi cho dù tôi đã đăng nhập và tôi được xác thực và cho dù tôi đã đăng xuất.

318
00:23:15,455 --> 00:23:17,020
Vì vậy, nếu người dùng được đăng xuất,

319
00:23:17,020 --> 00:23:19,325
thì mục Yêu thích của tôi không được hiển thị ở đây.

320
00:23:19,325 --> 00:23:24,090
Bây giờ, một điểm quan trọng mà bạn sẽ hỏi là,

321
00:23:24,090 --> 00:23:31,990
làm thế nào để chúng ta đảm bảo rằng chúng ta không đi vào trạng thái yêu thích ở đây?

322
00:23:31,990 --> 00:23:39,530
Vì vậy, điều này được xử lý ở nơi mà chúng tôi xử lý các tuyến đường ở đây.

323
00:23:39,530 --> 00:23:42,640
Vì vậy, bạn sẽ nhận thấy rằng đối với các mục yêu thích ở đây,

324
00:23:42,640 --> 00:23:46,880
chúng tôi tuyên bố cho các mục yêu thích điểm cuối thay vì

325
00:23:46,880 --> 00:23:51,080
gọi đây là tuyến đường chúng tôi gọi nó là một tuyến đường riêng tư.

326
00:23:51,080 --> 00:23:55,590
Vì vậy, tuyến đường riêng tư cho phép bạn đảm bảo rằng bạn sẽ được

327
00:23:55,590 --> 00:24:00,500
phép đi vào phần đó chỉ trong trường hợp,

328
00:24:00,500 --> 00:24:02,870
nơi người dùng được đăng nhập.

329
00:24:02,870 --> 00:24:09,600
Vì vậy, điều này sẽ ngăn chặn một điều hướng đến điểm cuối /yêu thích của họ nếu không có người dùng được đăng nhập.

330
00:24:09,600 --> 00:24:12,055
Bây giờ, tuyến đường riêng này được thực hiện như thế nào?

331
00:24:12,055 --> 00:24:16,020
Tuyến đường riêng này được thực hiện ngay trên này.

332
00:24:16,020 --> 00:24:19,635
Vì vậy, bạn có thể thấy rằng tuyến đường riêng tư này được thực hiện như thể hiện ở đây.

333
00:24:19,635 --> 00:24:24,070
Vì vậy, đây là không có gì ngoài một tuyến đường ở đây và sau đó ở đây,

334
00:24:24,070 --> 00:24:28,670
chúng tôi sẽ thực hiện này.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Vì vậy, nếu người dùng được xác thực,

336
00:24:30,620 --> 00:24:35,100
sau đó tôi sẽ cho phép điều hướng đến

337
00:24:35,100 --> 00:24:40,890
thành phần đó là thành phần yêu thích.

338
00:24:40,890 --> 00:24:45,130
Nếu không, tôi sẽ chỉ đơn giản là chuyển hướng đến thành phần nhà.

339
00:24:45,130 --> 00:24:46,790
Vì vậy, nếu không có người dùng đăng nhập,

340
00:24:46,790 --> 00:24:49,900
tôi sẽ chỉ đơn giản là chuyển hướng đến thành phần nhà và do đó điều này được

341
00:24:49,900 --> 00:24:54,230
thực hiện bằng cách sử dụng tuyến đường riêng tư này mà tôi đã thiết kế ở đây.

342
00:24:54,230 --> 00:25:00,270
Vì vậy, tuyến đường riêng tư là một cái gì đó được hỗ trợ bởi bộ định tuyến

343
00:25:00,270 --> 00:25:06,750
mà chúng tôi sử dụng bộ định tuyến React Dom mà chúng tôi đã sử dụng trong ứng dụng React của chúng tôi.

344
00:25:06,750 --> 00:25:10,300
Vì vậy, rất đơn giản cách xử lý các tình huống,

345
00:25:10,300 --> 00:25:16,425
nơi bạn không muốn một số tuyến đường được điều hướng đến khi người dùng không đăng nhập.

346
00:25:16,425 --> 00:25:21,610
Vì vậy, một lần nữa, vài thay đổi đơn giản mà tôi đã thực hiện cho

347
00:25:21,610 --> 00:25:23,080
các ứng dụng để tạo điều kiện cho

348
00:25:23,080 --> 00:25:27,360
tất cả các tính năng khác nhau mà bạn nhìn thấy trong ứng dụng React của bạn.

349
00:25:27,360 --> 00:25:29,270
Bây giờ, như bạn mong đợi,

350
00:25:29,270 --> 00:25:31,115
bạn có thể được underwhelmed tại thời điểm này,

351
00:25:31,115 --> 00:25:34,630
“Nó có đơn giản để thực hiện” và thực sự đó là

352
00:25:34,630 --> 00:25:39,005
chính xác những gì đã được thực hiện để hỗ trợ tất cả các tính năng mới.

353
00:25:39,005 --> 00:25:42,700
Như bạn thấy,

354
00:25:42,700 --> 00:25:47,470
quá trình xác thực người dùng và đăng nhập và đăng xuất từ máy chủ của chúng tôi đã hỗ trợ đầy đủ cho tất cả mọi thứ,

355
00:25:47,470 --> 00:25:51,800
thực hiện theo dõi phía khách hàng của

356
00:25:51,800 --> 00:25:57,290
quá trình đăng nhập và đăng xuất người dùng và tất cả những gì trở nên khá đơn giản bằng cách chỉ cần

357
00:25:57,290 --> 00:25:59,980
sửa đổi một số thành phần và thêm

358
00:25:59,980 --> 00:26:09,015
vào chức năng auth reducer và thêm vào trạng thái auth vào cửa hàng Redux của chúng tôi.

359
00:26:09,015 --> 00:26:13,010
Toàn bộ quá trình xử lý xác thực người dùng

360
00:26:13,010 --> 00:26:17,885
và đăng nhập và đăng xuất trở nên khá đơn giản trong trường hợp này.

361
00:26:17,885 --> 00:26:23,055
Vì vậy, với tour du lịch nhanh chóng của mã React cập nhật này, chúng

362
00:26:23,055 --> 00:26:25,820
ta hãy tiếp tục kiểm tra

363
00:26:25,820 --> 00:26:30,415
ứng dụng React của chúng tôi một vài tính năng khác của ứng dụng React của chúng tôi.

364
00:26:30,415 --> 00:26:33,650
Vì vậy, một lần nữa, quay trở lại ứng dụng của

365
00:26:33,650 --> 00:26:36,580
chúng tôi, bây giờ chúng ta có thể đi đến menu và sau đó kéo lên

366
00:26:36,580 --> 00:26:41,080
bất kỳ món ăn ở đây và tôi có thể gửi ý kiến cho món ăn ở đây,

367
00:26:41,080 --> 00:26:49,020
vì vậy tôi sẽ ngay lập tức thiết lập đánh giá ở đây và giá trị bình luận của tôi ở đây.

368
00:26:50,020 --> 00:26:59,950
Chú ý rằng tôi không nhập tên người dùng hoặc tên tác giả của tôi ở đây trong biểu mẫu ở đây.

369
00:26:59,950 --> 00:27:03,820
Bây giờ tất nhiên, để gửi bình luận, bạn cần phải đăng nhập.

370
00:27:03,820 --> 00:27:08,765
Vì vậy, nếu bạn không đăng nhập nhận xét này sẽ không được chấp nhận bởi máy chủ của tôi.

371
00:27:08,765 --> 00:27:11,165
Vì vậy, để tôi đăng nhập đầu tiên.

372
00:27:11,165 --> 00:27:17,140
Vì vậy, tôi có thể đăng nhập ở đây

373
00:27:17,140 --> 00:27:19,965
và thời điểm tôi đăng nhập bạn ngay lập tức nhận thấy rằng

374
00:27:19,965 --> 00:27:23,485
tiêu đề thanh công cụ được cập nhật để chỉ ra trạng thái của tôi.

375
00:27:23,485 --> 00:27:28,255
Bây giờ, tôi có thể đăng bình luận này và bạn sẽ nhận thấy rằng khi tôi đăng bình luận,

376
00:27:28,255 --> 00:27:30,670
nhận xét được thêm vào danh sách các nhận xét

377
00:27:30,670 --> 00:27:33,120
và cũng nhận thấy rằng trường tác giả được

378
00:27:33,120 --> 00:27:38,285
tự động điền vào đây bởi vì đó là cách chúng tôi thiết lập phía máy chủ của chúng tôi.

379
00:27:38,285 --> 00:27:39,810
Trong trường ý kiến,

380
00:27:39,810 --> 00:27:44,680
chúng tôi đã thiết lập người dùng của chúng tôi như là một tham chiếu đến

381
00:27:44,680 --> 00:27:48,580
thông tin người dùng mà

382
00:27:48,580 --> 00:27:53,060
chúng tôi lưu trữ ở phía máy chủ của chúng tôi và vì chúng tôi sử dụng Mongoose Populate ở phía máy chủ,

383
00:27:53,060 --> 00:27:55,555
thông tin người dùng được tự động

384
00:27:55,555 --> 00:27:58,230
chuyển vào các nhận xét đến từ phía máy chủ.

385
00:27:58,230 --> 00:28:02,350
Vì vậy, đó là cách bạn nhận thấy làm thế nào tôi đang tận dụng

386
00:28:02,350 --> 00:28:07,560
những gì máy chủ đã cung cấp cho tôi để tự động điền vào các chi tiết.

387
00:28:08,290 --> 00:28:12,665
Vì vậy, những thay đổi nhỏ một lần nữa ngay cả

388
00:28:12,665 --> 00:28:20,420
vào trang chi tiết món ăn để phản ánh việc sử dụng các nhận xét hỗ trợ trên trang web máy chủ.

389
00:28:20,420 --> 00:28:22,370
Với điều này, tôi hoàn thành

390
00:28:22,370 --> 00:28:29,415
minh họa nhanh chóng của khách hàng React mà chúng tôi đã thực hiện như là một phần của

391
00:28:29,415 --> 00:28:33,445
bài tập này và tôi hy vọng rằng bạn

392
00:28:33,445 --> 00:28:37,690
đi qua các chi tiết của mã trong khách hàng cũng và sau đó

393
00:28:37,690 --> 00:28:41,560
phản ánh lại về những gì bạn đã học được trong React khóa học và xem làm thế nào

394
00:28:41,560 --> 00:28:46,230
các sửa đổi cho phép chúng tôi thực hiện trong một sửa đổi,

395
00:28:46,230 --> 00:28:51,390
[không nghe được] mà bây giờ có thể giao tiếp với máy chủ và sau đó hỗ trợ tất cả các tính năng mà

396
00:28:51,390 --> 00:28:58,770
chúng tôi dự định ban đầu để thực hiện như là một phần của cả khách hàng và phía máy chủ của chúng tôi.