1
00:00:02,290 --> 00:00:08,140
Pendekatan kami di sini tentu saja berhasil. Kami menyimpan input di beberapa negara bagian,

2
00:00:08,140 --> 00:00:16,090
kami menyimpan validitas di beberapa negara bagian dan kami bisa melakukan manajemen validitas ini untuk semua input kami di sini dan hanya memiliki

3
00:00:16,120 --> 00:00:21,370
fungsi penangan perubahan yang berbeda di sini untuk input kami yang berbeda, yang akan bekerja.

4
00:00:21,370 --> 00:00:26,560
Satu catatan penting dengan cara sebelum kita melanjutkan, karena saya memeriksa validitas judul di sini

5
00:00:26,770 --> 00:00:29,950
di submit handler, tentu saja kita juga harus menambahkannya

6
00:00:29,950 --> 00:00:35,820
di sana sebagai dependensi, jadi judul yang valid harus ditambahkan di sana sebagai ketergantungan dalam menggunakan panggilan

7
00:00:35,830 --> 00:00:36,980
balik array dependensi,

8
00:00:37,030 --> 00:00:40,570
itu penting, jika fungsi ini tidak akan dibangun kembali ketika

9
00:00:40,660 --> 00:00:47,970
validitas itu berubah yang berarti kita tidak akan dapat mengirimkannya setelahnya. Masalah dengan pendekatan kami saat ini adalah bahwa

10
00:00:47,970 --> 00:00:55,410
kami mengelola negara yang berbeda untuk menyimpan input untuk input yang berbeda dan kemudian kami juga memiliki status validitas

11
00:00:55,410 --> 00:01:00,910
yang berbeda, setidaknya berpotensi jika kami mulai mengelola validitas kami, seperti ini dan

12
00:01:00,990 --> 00:01:07,400
untuk bentuk yang sangat besar, tentu saja ini berarti banyak salinan dan menempel, banyak manajemen negara.

13
00:01:07,410 --> 00:01:15,300
Sekarang jika Anda memiliki banyak status yang terhubung, Anda juga dapat melakukan ini dengan cara yang lebih elegan,

14
00:01:15,330 --> 00:01:18,500
alih-alih memiliki status terpisah untuk setiap input,

15
00:01:18,540 --> 00:01:25,720
Anda dapat memiliki satu status besar yang menggabungkan semua nilai input dan yang menggabungkan semua validitas

16
00:01:25,740 --> 00:01:33,720
dan kemudian menggunakan konsep yang disebut peredam, bukan peredam Redux tetapi satu yang didukung oleh Bereaksi kotak untuk mengelola

17
00:01:33,720 --> 00:01:34,710
negara itu.

18
00:01:34,710 --> 00:01:40,210
Anda melakukan ini dengan menggunakan kait peredam yang lagi-lagi tidak ada hubungannya dengan Redux, konsep

19
00:01:40,440 --> 00:01:47,550
peredam tidak eksklusif Redux, peredam pada akhirnya hanya fungsi yang mengambil input dan mengeluarkan beberapa output dan karenanya Bereaksi

20
00:01:47,580 --> 00:01:52,800
juga mendukung ini dan Anda akan melihat bagaimana Anda dapat menggunakan ini dalam

21
00:01:52,920 --> 00:01:54,190
kuliah ini sekarang.

22
00:01:54,900 --> 00:01:57,510
Jadi apa ide peredam? Sekarang penting untuk memahami

23
00:01:57,510 --> 00:02:03,030
bahwa penggunaan peredam adalah pengait yang membantu Anda memiliki manajemen negara. Biasanya Anda menggunakannya jika Anda telah

24
00:02:03,090 --> 00:02:09,420
terhubung negara atau negara yang lebih kompleks dan Anda tidak ingin memiliki sekelompok panggilan negara penggunaan

25
00:02:09,600 --> 00:02:16,340
individu dan sekelompok negara individu yang Anda kelola. Anda kemudian dapat menggunakan peredam penggunaan dan inilah

26
00:02:16,350 --> 00:02:17,510
cara kerjanya.

27
00:02:19,060 --> 00:02:25,530
Anda mulai dengan membuat peredam, katakanlah peredam bentuk di sini, Anda dapat memberi nama apa pun yang Anda inginkan dan harap dicatat

28
00:02:25,570 --> 00:02:29,020
saya membuatnya di luar komponen formulir saya, Anda bisa melakukannya di sana

29
00:02:29,020 --> 00:02:33,940
tetapi jika Anda tidak bergantung pada alat peraga, Anda dapat melakukannya di luar sana sehingga ini tidak

30
00:02:33,940 --> 00:02:39,250
akan membangun kembali dengan setiap siklus re-render dan Anda bahkan tidak perlu menggunakan callback yang tentu saja juga

31
00:02:39,280 --> 00:02:44,110
memerlukan biaya beberapa kinerja jika Anda menggunakannya. Jadi gunakan di luar sana, buat

32
00:02:44,110 --> 00:02:49,690
di luar sana untuk menghindari penciptaan kembali yang tidak perlu dari fungsi itu dan sekarang peredam,

33
00:02:49,690 --> 00:02:57,100
seperti peredam Redux mendapatkan keadaan saat ini dan tindakan tetapi sekali lagi itu tidak terkait dengan Redux, itu tidak digunakan oleh Redux,

34
00:02:57,360 --> 00:03:02,240
fungsi peredam hanya selalu bekerja seperti ini. Sekarang di sana, lagi seperti di redux

35
00:03:02,310 --> 00:03:07,260
Redux karena sekali lagi, mereka bekerja seperti ini, Anda dapat memeriksa jenis tindakan yang

36
00:03:07,260 --> 00:03:11,520
berbeda dan di sini saya ingin memeriksa satu jenis, ini juga hanya

37
00:03:11,520 --> 00:03:12,680
menggunakan pernyataan

38
00:03:12,690 --> 00:03:15,440
if, Anda bisa menggunakan pernyataan kasus beralih juga

39
00:03:15,750 --> 00:03:19,260
dan bahwa saya memeriksa tindakan. ketik di sini benar-benar terserah

40
00:03:19,290 --> 00:03:24,030
saya, Anda dapat memberi nama ini apa pun yang Anda inginkan karena Anda akan

41
00:03:24,030 --> 00:03:29,800
menjadi orang yang mengirim tindakan nanti dan di sini saya memeriksa tindakan pembaruan yang juga merupakan pengidentifikasi yang

42
00:03:29,820 --> 00:03:39,050
saya pilih dan yang sama seperti di Redux, Anda juga bisa simpan pengenal ini dalam konstanta mandiri di sini, sehingga Anda dapat memiliki tindakan pembaruan peredam Anda di sini

43
00:03:39,620 --> 00:03:45,850
misalnya, pengidentifikasi pembaruan peredam Anda seperti ini dan gunakan ini di sini jika Anda mau dan Anda dapat memberi

44
00:03:45,920 --> 00:03:48,260
nama ini apa pun yang Anda inginkan.

45
00:03:48,380 --> 00:03:57,180
Jadi sekarang saya memeriksa tindakan ini dan jika tindakan ini terjadi, saya ingin menyimpan nilai input dan memvalidasinya tetapi untuk memahami ini,

46
00:03:57,340 --> 00:04:00,850
kita perlu memahami bagaimana kita menggunakan peredam bentuk.

47
00:04:00,920 --> 00:04:05,510
Jadi mari kita biarkan seperti ini untuk saat ini dan turun ke komponen itu sendiri,

48
00:04:05,600 --> 00:04:08,950
di sana kita mulai mengatur keadaan formulir kita di sini,

49
00:04:08,960 --> 00:04:15,200
jadi di sini saya ingin memanggil pengguna peredam dan sekarang menggunakan peredam mengambil fungsi peredam seperti itu maka saya akan

50
00:04:15,200 --> 00:04:19,540
meneruskan peredam formulir saya yang saya atur di sini dan yang masih belum selesai.

51
00:04:19,940 --> 00:04:24,990
Gunakan reducer juga mengambil beberapa argumen opsional kedua yang merupakan keadaan awal

52
00:04:24,990 --> 00:04:30,860
yang ingin Anda sampaikan dan itu bisa apa saja tetapi di sini saya akan

53
00:04:30,860 --> 00:04:38,630
meneruskan objek Javascript dan keadaan awal yang ingin saya gunakan di sini adalah pada akhirnya objek yang memiliki nilai

54
00:04:38,630 --> 00:04:39,990
input, yang

55
00:04:40,220 --> 00:04:46,670
kemudian merupakan objek bersarang lain yang akan segera saya isi, input validitas yang juga merupakan objek

56
00:04:46,670 --> 00:04:49,610
bersarang dan mungkin validitas formulir keseluruhan, saya

57
00:04:49,620 --> 00:04:55,700
akan menyebutkannya bentuk valid yang awalnya salah katakanlah. Jadi ini sekarang keadaan awal saya, saya lewat di sini

58
00:04:55,700 --> 00:05:03,260
dan itu adalah kondisi yang kemudian saya ingin ubah dari dalam bentuk peredam. Sekarang pada nilai input, misalnya kita dapat menambahkan judul kami dan itu terserah

59
00:05:03,260 --> 00:05:06,070
Anda bagaimana Anda menamainya, yang merupakan string kosong

60
00:05:06,070 --> 00:05:11,150
awalnya katakanlah, ini akan menjadi nilai awal yang saya ingin atur pada input saya ini akan di

61
00:05:11,150 --> 00:05:15,980
akhirnya ganti manajemen negara saya di sana, tempat saya menyimpan input saya secara manual di berbagai negara.

62
00:05:15,980 --> 00:05:20,220
Sekarang saya akan menggabungkan ini semua menjadi satu objek yang dikelola melalui peredam itu.

63
00:05:20,480 --> 00:05:25,610
Jadi saya punya judul di sini dan sebenarnya itu tidak selalu kosong tentu saja tetapi sebenarnya itu hanya kosong

64
00:05:25,610 --> 00:05:27,410
jika kita tidak memiliki produk yang

65
00:05:27,410 --> 00:05:31,140
diedit, jadi saya akan menyalin cek ini dari sana dan menggunakan ini di sini.

66
00:05:31,370 --> 00:05:34,590
Sekarang sama saja untuk imageUrl, di sana

67
00:05:35,410 --> 00:05:40,150
saya menginisialisasi ini dengan editedProduct. imageUrl jika tersedia dan jika tidak saya menggunakan

68
00:05:40,150 --> 00:05:40,930
string kosong,

69
00:05:40,930 --> 00:05:43,540
pada dasarnya apa yang saya lakukan di sana juga.

70
00:05:44,110 --> 00:05:48,030
Dan tentu saja saya melakukan hal yang sama untuk deskripsi, di

71
00:05:48,070 --> 00:05:52,990
sini saya ingin memeriksa apakah produk yang diedit diatur dan saya menggunakan deskripsi ini

72
00:05:53,080 --> 00:05:59,410
atau mengaturnya ke string kosong jika tidak tersedia. Sekarang yang terakhir tetapi tidak kalah pentingnya, kami memiliki harga

73
00:05:59,410 --> 00:06:02,450
dan di sana saya selalu memiliki string kosong karena

74
00:06:02,470 --> 00:06:05,830
kami juga tidak membutuhkannya dalam hal produk yang diedit, maka

75
00:06:05,860 --> 00:06:08,140
saya tidak peduli dengan nilainya atau

76
00:06:08,140 --> 00:06:15,020
kami memang membutuhkannya, yah maka saya ingin menginisialisasi dengan nilai kosong. Sekarang tentu saja setiap input juga memiliki validitas, jadi kita dapat menambahkan judul

77
00:06:15,020 --> 00:06:16,790
di sini dan lagi memeriksa apakah editedProduct

78
00:06:16,850 --> 00:06:19,010
diatur, jika sudah diatur, maka saya tahu saya

79
00:06:19,040 --> 00:06:21,320
sedang mengedit, jadi kita akan mempopulasikan judulnya, jadi awalnya

80
00:06:21,320 --> 00:06:22,700
akan valid, jadi dalam

81
00:06:22,700 --> 00:06:24,950
hal ini nilai awal saya akan benar, jika tidak

82
00:06:24,950 --> 00:06:32,250
maka akan salah dan sekarang ini juga sesuatu yang bisa kita ulangi untuk imageUrl. Jika kami memiliki produk yang diedit, kami tahu itu sudah diisi

83
00:06:32,250 --> 00:06:33,080
sebelumnya, oleh

84
00:06:33,080 --> 00:06:36,650
karena itu akan valid pada awalnya, jadi kami menetapkan ini

85
00:06:36,650 --> 00:06:39,550
menjadi true jika tidak saya setel ke false.

86
00:06:39,740 --> 00:06:44,420
Untuk uraian saya di sini, itu sama - benar atau salah dan untuk

87
00:06:44,540 --> 00:06:46,760
harga, itu sama, tentu saja

88
00:06:46,760 --> 00:06:49,090
kami tidak memprioritaskan harga jika kami

89
00:06:49,100 --> 00:06:55,200
mengedit tetapi jika kami mengedit saya tidak peduli dengan harga. karena itu tidak akan bisa diubah.

90
00:06:55,310 --> 00:07:00,890
Karena itu saya tahu jika saya mengedit, saya harus memperlakukan ini sebagai valid karena tidak dapat diubah

91
00:07:00,890 --> 00:07:02,420
dan karena itu saya

92
00:07:02,440 --> 00:07:09,680
tidak peduli dengan input ini tetapi saya tidak ingin memblokir pengiriman formulir karena mengatur ini ke false ketika kita tidak dapat mengeditnya.

93
00:07:09,980 --> 00:07:13,110
Jadi saya akan mengaturnya dengan benar jika ini tidak direncanakan untuk diedit, jika

94
00:07:13,190 --> 00:07:18,770
kita tidak mengedit produk tetapi kita menambahkan satu, harga akan dapat diedit dan oleh karena itu kita akan mulai dalam keadaan salah karena

95
00:07:18,770 --> 00:07:24,230
input harga akan awalnya kosong, itulah yang kami siapkan di sini. Dan sekarang validitas formulir keseluruhan, baik di sana

96
00:07:24,320 --> 00:07:26,150
lagi saya dapat memeriksa

97
00:07:26,150 --> 00:07:31,130
apakah kita memiliki produk yang diedit, yang berarti kita sedang mengedit, maka formulir itu

98
00:07:31,130 --> 00:07:33,590
benar, formulir itu awalnya valid, kalau tidak

99
00:07:33,590 --> 00:07:39,240
salah awalnya jika kita menambahkan produk baru . Sekarang ini adalah keadaan awal saya

100
00:07:39,260 --> 00:07:45,050
di sini, sekarang fungsi peredam ini harus dapat mengubah keadaan itu ketika tindakan dikirim

101
00:07:45,050 --> 00:07:48,660
dan tindakan harus dikirim apa pun yang kita

102
00:07:48,730 --> 00:07:58,190
ketikkan ke salah satu input teks kita, yang akan menjadi pemicunya. Jadi karena itu, kita sekarang dapat menyingkirkan semua penugasan status ini di

103
00:07:58,220 --> 00:08:05,780
sini dan karenanya kita juga dapat menghapus seluruh impor status penggunaan bahkan dan memastikan kami mengirimkan tindakan pembaruan peredam

104
00:08:05,790 --> 00:08:09,610
untuk setiap penekanan tombol yang kami lakukan dalam input.

105
00:08:09,710 --> 00:08:18,670
Jadi di sini di penangan perubahan judul, saya pada akhirnya akan menghapus kode ini, saya akan meninggalkan cek jika untuk sekarang tetapi saya tidak akan memiliki

106
00:08:18,740 --> 00:08:22,770
kode di sana untuk saat ini, sebaliknya di sana, saya ingin

107
00:08:22,790 --> 00:08:28,960
mengirim pembaruan peredam dan sekarang ini dilakukan dengan hasil dari penggunaan peredam panggilan karena peredam penggunaan tentu

108
00:08:28,960 --> 00:08:35,000
saja mengembalikan sesuatu, sama seperti penggunaan negara lakukan. Ini juga mengembalikan sebuah array dengan tepat dua

109
00:08:35,000 --> 00:08:40,710
elemen dan oleh karena itu kita dapat merusaknya dengan sintaksis array array yang kami juga

110
00:08:40,730 --> 00:08:47,450
gunakan pada kondisi penggunaan dan di sana saya mendapatkan status bentuk saya sebagai nilai pertama dan fungsi pengiriman sebagai

111
00:08:47,450 --> 00:08:48,250
nilai kedua.

112
00:08:48,290 --> 00:08:55,280
Inilah yang selalu menggunakan peredam yang akan mengembalikan Anda, snapshot keadaan yang diperbarui setiap kali Anda mengubahnya tentu saja, jadi

113
00:08:55,280 --> 00:08:55,770
setiap

114
00:08:55,790 --> 00:09:01,490
kali Anda mengubahnya, komponen ini akan merender ulang dan memberi Anda snapshot keadaan baru dan suatu

115
00:09:01,550 --> 00:09:07,160
fungsi, mengirimkan pada akhirnya adalah fungsi yang memungkinkan Anda untuk mengirim tindakan terhadap peredam ini.

116
00:09:07,250 --> 00:09:11,760
Tentu saja, Anda dapat memberi nama dua elemen ini seperti yang Anda inginkan, tetapi saya

117
00:09:11,780 --> 00:09:13,270
pikir ini adalah penamaan

118
00:09:13,280 --> 00:09:20,100
yang masuk akal, ini adalah snapshot keadaan kami, ini adalah fungsi. Sekarang pengiriman dengan cara adalah nama yang sudah saya gunakan di sini dari

119
00:09:20,100 --> 00:09:24,460
Redux, jadi di sini saya akan memberi nama negara bentuk pengiriman ini untuk menghindari perselisihan nama,

120
00:09:24,480 --> 00:09:25,980
Anda dapat menamainya sesuka Anda.

121
00:09:26,760 --> 00:09:33,350
Jadi status pengiriman formulir sekarang dapat digunakan di sini di handler perubahan judul saya, saya sebut saja dan saya harus

122
00:09:33,410 --> 00:09:39,170
melewati objek di sana yang menggambarkan tindakan saya dan objek ini akan memiliki properti tipe, Anda tidak

123
00:09:39,170 --> 00:09:40,820
harus memiliki properti tipe

124
00:09:40,820 --> 00:09:46,130
, Anda dapat memberi nama ID atau pengenal ini atau apa pun yang Anda inginkan, tetapi

125
00:09:46,130 --> 00:09:52,010
saya menggunakan tipe di sini karena saya benar-benar memeriksa properti tipe di dalam fungsi peredam saya dan fungsi

126
00:09:52,010 --> 00:09:59,260
peredam ini akan dieksekusi untuk setiap tindakan baru yang Anda kirimkan. Jadi jika saya kembali ke sana, jenisnya akan menjadi peredam

127
00:09:59,500 --> 00:10:07,650
pembaruan atau mungkin nama yang lebih baik sebenarnya akan berupa pembaruan saya pikir, jadi itu juga yang akan saya gunakan di

128
00:10:07,650 --> 00:10:10,830
sini tentu saja dan di sini, jadi formulir

129
00:10:10,830 --> 00:10:18,750
pembaruan, mungkin masukan formulir perbarui, nama tentu saja terserah Anda tetapi harus jelas tentang apa yang dilakukannya, jadi di sini, saya

130
00:10:18,750 --> 00:10:19,790
juga

131
00:10:19,800 --> 00:10:22,110
akan memiliki form masukan pembaruan, ya

132
00:10:22,180 --> 00:10:23,280
itu terlihat bagus.

133
00:10:23,280 --> 00:10:24,510
Jadi, bentuk pembaruan input,

134
00:10:24,510 --> 00:10:26,120
itulah yang saya kirimkan di sana,

135
00:10:26,130 --> 00:10:27,600
kita perlu mengubahnya di sini

136
00:10:27,600 --> 00:10:33,100
juga dan tentu saja Anda juga dapat melewatkan data lain yang mungkin ingin Anda gunakan di dalam peredam Anda dan

137
00:10:33,210 --> 00:10:38,250
saya memiliki beberapa data lain yang ingin saya menggunakan. Itu akan menjadi nilai dan saya hanya akan menyebutkan

138
00:10:38,250 --> 00:10:39,270
nilai ini di

139
00:10:39,300 --> 00:10:40,730
sini, properti ini, Anda dapat

140
00:10:40,740 --> 00:10:42,390
menamainya seperti yang Anda inginkan,

141
00:10:42,420 --> 00:10:48,490
itulah teks yang dimasukkan, jadi saya hanya meneruskannya ke peredam sehingga kami dapat menyimpannya di negara kami di sana dan validitas

142
00:10:48,490 --> 00:10:49,400
input ini.

143
00:10:49,470 --> 00:11:02,110
Jadi karena itu di sini, saya akan benar-benar menambahkan prop yang valid yang pada awalnya katakanlah false dan sekarang saya akan menghapus case lain ini dan memeriksa apakah kita lebih besar dari

144
00:11:02,110 --> 00:11:07,480
nol di sini yang berarti bahwa itu harus benar karena kemudian saya atur

145
00:11:07,480 --> 00:11:12,850
valid sama dengan true, jika tidak maka akan tetap salah dan dengan itu,

146
00:11:12,850 --> 00:11:19,050
kita juga dapat menambahkan valid sebagai kunci untuk tindakan dan meneruskan nilai yang disimpan di dalam

147
00:11:19,060 --> 00:11:20,230
variabel valid

148
00:11:20,350 --> 00:11:26,320
kita dan ini awalnya akan salah tetapi jika panjang input kita untuk judul lebih besar

149
00:11:26,320 --> 00:11:35,230
dari nol, maka itu benar-benar benar dan sekarang kita tentu saja juga perlu memberi tahu peredam kita yang masukan yang memicu ini.

150
00:11:35,330 --> 00:11:43,730
Jadi saya akan menambahkan bidang ID input di sini atau hanya input, apa pun yang Anda suka dan gunakan judul di sini dan kunci

151
00:11:43,730 --> 00:11:49,670
ini di sini harus menjadi kunci yang juga Anda miliki di dalam negara Anda, seperti di sini

152
00:11:49,790 --> 00:11:54,800
dalam nilai input dan validitas input karena ini akan memungkinkan Anda menulis beberapa kode

153
00:11:54,890 --> 00:12:01,920
peredam yang akan segera kami lakukan yang sangat dapat digunakan kembali dan sangat fleksibel karena sekarang kami dapat mengambil langkah

154
00:12:01,920 --> 00:12:09,210
berikutnya dan memastikan bahwa kami mengubah ini menjadi fungsi yang benar-benar berfungsi untuk semua input dan yang benar-benar fleksibel mengenai bagaimana

155
00:12:09,210 --> 00:12:10,080
kita menggunakannya.