Pendekatan kami di sini tentu saja berhasil. Kami menyimpan input di beberapa negara bagian,
kami menyimpan validitas di beberapa negara bagian dan kami bisa melakukan manajemen validitas ini untuk semua input kami di sini dan hanya memiliki
fungsi penangan perubahan yang berbeda di sini untuk input kami yang berbeda, yang akan bekerja.
Satu catatan penting dengan cara sebelum kita melanjutkan, karena saya memeriksa validitas judul di sini
di submit handler, tentu saja kita juga harus menambahkannya
di sana sebagai dependensi, jadi judul yang valid harus ditambahkan di sana sebagai ketergantungan dalam menggunakan panggilan
balik array dependensi,
itu penting, jika fungsi ini tidak akan dibangun kembali ketika
validitas itu berubah yang berarti kita tidak akan dapat mengirimkannya setelahnya. Masalah dengan pendekatan kami saat ini adalah bahwa
kami mengelola negara yang berbeda untuk menyimpan input untuk input yang berbeda dan kemudian kami juga memiliki status validitas
yang berbeda, setidaknya berpotensi jika kami mulai mengelola validitas kami, seperti ini dan
untuk bentuk yang sangat besar, tentu saja ini berarti banyak salinan dan menempel, banyak manajemen negara.
Sekarang jika Anda memiliki banyak status yang terhubung, Anda juga dapat melakukan ini dengan cara yang lebih elegan,
alih-alih memiliki status terpisah untuk setiap input,
Anda dapat memiliki satu status besar yang menggabungkan semua nilai input dan yang menggabungkan semua validitas
dan kemudian menggunakan konsep yang disebut peredam, bukan peredam Redux tetapi satu yang didukung oleh Bereaksi kotak untuk mengelola
negara itu.
Anda melakukan ini dengan menggunakan kait peredam yang lagi-lagi tidak ada hubungannya dengan Redux, konsep
peredam tidak eksklusif Redux, peredam pada akhirnya hanya fungsi yang mengambil input dan mengeluarkan beberapa output dan karenanya Bereaksi
juga mendukung ini dan Anda akan melihat bagaimana Anda dapat menggunakan ini dalam
kuliah ini sekarang.
Jadi apa ide peredam? Sekarang penting untuk memahami
bahwa penggunaan peredam adalah pengait yang membantu Anda memiliki manajemen negara. Biasanya Anda menggunakannya jika Anda telah
terhubung negara atau negara yang lebih kompleks dan Anda tidak ingin memiliki sekelompok panggilan negara penggunaan
individu dan sekelompok negara individu yang Anda kelola. Anda kemudian dapat menggunakan peredam penggunaan dan inilah
cara kerjanya.
Anda mulai dengan membuat peredam, katakanlah peredam bentuk di sini, Anda dapat memberi nama apa pun yang Anda inginkan dan harap dicatat
saya membuatnya di luar komponen formulir saya, Anda bisa melakukannya di sana
tetapi jika Anda tidak bergantung pada alat peraga, Anda dapat melakukannya di luar sana sehingga ini tidak
akan membangun kembali dengan setiap siklus re-render dan Anda bahkan tidak perlu menggunakan callback yang tentu saja juga
memerlukan biaya beberapa kinerja jika Anda menggunakannya. Jadi gunakan di luar sana, buat
di luar sana untuk menghindari penciptaan kembali yang tidak perlu dari fungsi itu dan sekarang peredam,
seperti peredam Redux mendapatkan keadaan saat ini dan tindakan tetapi sekali lagi itu tidak terkait dengan Redux, itu tidak digunakan oleh Redux,
fungsi peredam hanya selalu bekerja seperti ini. Sekarang di sana, lagi seperti di redux
Redux karena sekali lagi, mereka bekerja seperti ini, Anda dapat memeriksa jenis tindakan yang
berbeda dan di sini saya ingin memeriksa satu jenis, ini juga hanya
menggunakan pernyataan
if, Anda bisa menggunakan pernyataan kasus beralih juga
dan bahwa saya memeriksa tindakan. ketik di sini benar-benar terserah
saya, Anda dapat memberi nama ini apa pun yang Anda inginkan karena Anda akan
menjadi orang yang mengirim tindakan nanti dan di sini saya memeriksa tindakan pembaruan yang juga merupakan pengidentifikasi yang
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
misalnya, pengidentifikasi pembaruan peredam Anda seperti ini dan gunakan ini di sini jika Anda mau dan Anda dapat memberi
nama ini apa pun yang Anda inginkan.
Jadi sekarang saya memeriksa tindakan ini dan jika tindakan ini terjadi, saya ingin menyimpan nilai input dan memvalidasinya tetapi untuk memahami ini,
kita perlu memahami bagaimana kita menggunakan peredam bentuk.
Jadi mari kita biarkan seperti ini untuk saat ini dan turun ke komponen itu sendiri,
di sana kita mulai mengatur keadaan formulir kita di sini,
jadi di sini saya ingin memanggil pengguna peredam dan sekarang menggunakan peredam mengambil fungsi peredam seperti itu maka saya akan
meneruskan peredam formulir saya yang saya atur di sini dan yang masih belum selesai.
Gunakan reducer juga mengambil beberapa argumen opsional kedua yang merupakan keadaan awal
yang ingin Anda sampaikan dan itu bisa apa saja tetapi di sini saya akan
meneruskan objek Javascript dan keadaan awal yang ingin saya gunakan di sini adalah pada akhirnya objek yang memiliki nilai
input, yang
kemudian merupakan objek bersarang lain yang akan segera saya isi, input validitas yang juga merupakan objek
bersarang dan mungkin validitas formulir keseluruhan, saya
akan menyebutkannya bentuk valid yang awalnya salah katakanlah. Jadi ini sekarang keadaan awal saya, saya lewat di sini
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
Anda bagaimana Anda menamainya, yang merupakan string kosong
awalnya katakanlah, ini akan menjadi nilai awal yang saya ingin atur pada input saya ini akan di
akhirnya ganti manajemen negara saya di sana, tempat saya menyimpan input saya secara manual di berbagai negara.
Sekarang saya akan menggabungkan ini semua menjadi satu objek yang dikelola melalui peredam itu.
Jadi saya punya judul di sini dan sebenarnya itu tidak selalu kosong tentu saja tetapi sebenarnya itu hanya kosong
jika kita tidak memiliki produk yang
diedit, jadi saya akan menyalin cek ini dari sana dan menggunakan ini di sini.
Sekarang sama saja untuk imageUrl, di sana
saya menginisialisasi ini dengan editedProduct. imageUrl jika tersedia dan jika tidak saya menggunakan
string kosong,
pada dasarnya apa yang saya lakukan di sana juga.
Dan tentu saja saya melakukan hal yang sama untuk deskripsi, di
sini saya ingin memeriksa apakah produk yang diedit diatur dan saya menggunakan deskripsi ini
atau mengaturnya ke string kosong jika tidak tersedia. Sekarang yang terakhir tetapi tidak kalah pentingnya, kami memiliki harga
dan di sana saya selalu memiliki string kosong karena
kami juga tidak membutuhkannya dalam hal produk yang diedit, maka
saya tidak peduli dengan nilainya atau
kami memang membutuhkannya, yah maka saya ingin menginisialisasi dengan nilai kosong. Sekarang tentu saja setiap input juga memiliki validitas, jadi kita dapat menambahkan judul
di sini dan lagi memeriksa apakah editedProduct
diatur, jika sudah diatur, maka saya tahu saya
sedang mengedit, jadi kita akan mempopulasikan judulnya, jadi awalnya
akan valid, jadi dalam
hal ini nilai awal saya akan benar, jika tidak
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
sebelumnya, oleh
karena itu akan valid pada awalnya, jadi kami menetapkan ini
menjadi true jika tidak saya setel ke false.
Untuk uraian saya di sini, itu sama - benar atau salah dan untuk
harga, itu sama, tentu saja
kami tidak memprioritaskan harga jika kami
mengedit tetapi jika kami mengedit saya tidak peduli dengan harga. karena itu tidak akan bisa diubah.
Karena itu saya tahu jika saya mengedit, saya harus memperlakukan ini sebagai valid karena tidak dapat diubah
dan karena itu saya
tidak peduli dengan input ini tetapi saya tidak ingin memblokir pengiriman formulir karena mengatur ini ke false ketika kita tidak dapat mengeditnya.
Jadi saya akan mengaturnya dengan benar jika ini tidak direncanakan untuk diedit, jika
kita tidak mengedit produk tetapi kita menambahkan satu, harga akan dapat diedit dan oleh karena itu kita akan mulai dalam keadaan salah karena
input harga akan awalnya kosong, itulah yang kami siapkan di sini. Dan sekarang validitas formulir keseluruhan, baik di sana
lagi saya dapat memeriksa
apakah kita memiliki produk yang diedit, yang berarti kita sedang mengedit, maka formulir itu
benar, formulir itu awalnya valid, kalau tidak
salah awalnya jika kita menambahkan produk baru . Sekarang ini adalah keadaan awal saya
di sini, sekarang fungsi peredam ini harus dapat mengubah keadaan itu ketika tindakan dikirim
dan tindakan harus dikirim apa pun yang kita
ketikkan ke salah satu input teks kita, yang akan menjadi pemicunya. Jadi karena itu, kita sekarang dapat menyingkirkan semua penugasan status ini di
sini dan karenanya kita juga dapat menghapus seluruh impor status penggunaan bahkan dan memastikan kami mengirimkan tindakan pembaruan peredam
untuk setiap penekanan tombol yang kami lakukan dalam input.
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
kode di sana untuk saat ini, sebaliknya di sana, saya ingin
mengirim pembaruan peredam dan sekarang ini dilakukan dengan hasil dari penggunaan peredam panggilan karena peredam penggunaan tentu
saja mengembalikan sesuatu, sama seperti penggunaan negara lakukan. Ini juga mengembalikan sebuah array dengan tepat dua
elemen dan oleh karena itu kita dapat merusaknya dengan sintaksis array array yang kami juga
gunakan pada kondisi penggunaan dan di sana saya mendapatkan status bentuk saya sebagai nilai pertama dan fungsi pengiriman sebagai
nilai kedua.
Inilah yang selalu menggunakan peredam yang akan mengembalikan Anda, snapshot keadaan yang diperbarui setiap kali Anda mengubahnya tentu saja, jadi
setiap
kali Anda mengubahnya, komponen ini akan merender ulang dan memberi Anda snapshot keadaan baru dan suatu
fungsi, mengirimkan pada akhirnya adalah fungsi yang memungkinkan Anda untuk mengirim tindakan terhadap peredam ini.
Tentu saja, Anda dapat memberi nama dua elemen ini seperti yang Anda inginkan, tetapi saya
pikir ini adalah penamaan
yang masuk akal, ini adalah snapshot keadaan kami, ini adalah fungsi. Sekarang pengiriman dengan cara adalah nama yang sudah saya gunakan di sini dari
Redux, jadi di sini saya akan memberi nama negara bentuk pengiriman ini untuk menghindari perselisihan nama,
Anda dapat menamainya sesuka Anda.
Jadi status pengiriman formulir sekarang dapat digunakan di sini di handler perubahan judul saya, saya sebut saja dan saya harus
melewati objek di sana yang menggambarkan tindakan saya dan objek ini akan memiliki properti tipe, Anda tidak
harus memiliki properti tipe
, Anda dapat memberi nama ID atau pengenal ini atau apa pun yang Anda inginkan, tetapi
saya menggunakan tipe di sini karena saya benar-benar memeriksa properti tipe di dalam fungsi peredam saya dan fungsi
peredam ini akan dieksekusi untuk setiap tindakan baru yang Anda kirimkan. Jadi jika saya kembali ke sana, jenisnya akan menjadi peredam
pembaruan atau mungkin nama yang lebih baik sebenarnya akan berupa pembaruan saya pikir, jadi itu juga yang akan saya gunakan di
sini tentu saja dan di sini, jadi formulir
pembaruan, mungkin masukan formulir perbarui, nama tentu saja terserah Anda tetapi harus jelas tentang apa yang dilakukannya, jadi di sini, saya
juga
akan memiliki form masukan pembaruan, ya
itu terlihat bagus.
Jadi, bentuk pembaruan input,
itulah yang saya kirimkan di sana,
kita perlu mengubahnya di sini
juga dan tentu saja Anda juga dapat melewatkan data lain yang mungkin ingin Anda gunakan di dalam peredam Anda dan
saya memiliki beberapa data lain yang ingin saya menggunakan. Itu akan menjadi nilai dan saya hanya akan menyebutkan
nilai ini di
sini, properti ini, Anda dapat
menamainya seperti yang Anda inginkan,
itulah teks yang dimasukkan, jadi saya hanya meneruskannya ke peredam sehingga kami dapat menyimpannya di negara kami di sana dan validitas
input ini.
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
nol di sini yang berarti bahwa itu harus benar karena kemudian saya atur
valid sama dengan true, jika tidak maka akan tetap salah dan dengan itu,
kita juga dapat menambahkan valid sebagai kunci untuk tindakan dan meneruskan nilai yang disimpan di dalam
variabel valid
kita dan ini awalnya akan salah tetapi jika panjang input kita untuk judul lebih besar
dari nol, maka itu benar-benar benar dan sekarang kita tentu saja juga perlu memberi tahu peredam kita yang masukan yang memicu ini.
Jadi saya akan menambahkan bidang ID input di sini atau hanya input, apa pun yang Anda suka dan gunakan judul di sini dan kunci
ini di sini harus menjadi kunci yang juga Anda miliki di dalam negara Anda, seperti di sini
dalam nilai input dan validitas input karena ini akan memungkinkan Anda menulis beberapa kode
peredam yang akan segera kami lakukan yang sangat dapat digunakan kembali dan sangat fleksibel karena sekarang kami dapat mengambil langkah
berikutnya dan memastikan bahwa kami mengubah ini menjadi fungsi yang benar-benar berfungsi untuk semua input dan yang benar-benar fleksibel mengenai bagaimana
kita menggunakannya.