Sekarang kita benar-benar dekat dengan akhir modul ini karena itu, kita perlu memastikan bahwa kita sekarang mengirimkan
tindakan untuk membuat produk baru atau untuk memperbarui produk dan
karena itu pertama-tama kita perlu menambahkan tindakan ini di sini di folder tindakan kita .
Jadi saya akan mengekspor konstanta di sini, membuat produk seperti ini di sini, membuat produk dan kemudian di sini juga, pengidentifikasi lain untuk
memperbarui produk dengan memperbarui produk dan memperbarui produk seperti ini dan membuat pembuat tindakan yang sesuai atau membuat
produk dan sekarang terserah Anda bagaimana Anda ingin menyusun ini, data apa yang Anda harapkan dapatkan
saat Anda membuat produk.
Saya penggemar membuat produk benar-benar di sini dalam aksi atau peredam,
jadi saya benar-benar berharap untuk mendapatkan judul di sini, deskripsi, gambarUrl dan harga katakanlah dan
kemudian saya mengembalikan objek tindakan di mana tipenya adalah buat produk dan data produk hanyalah semua data yang
digabungkan.
Jadi di sini saya memiliki judul saya yang dipetakan ke judul yang kita dapatkan sebagai argumen, deskripsi dipetakan ke
deskripsi dan oleh karena itu kita juga dapat menggunakan pintasan Javascript modern
di mana jika nama properti dan nama variabel
nilai adalah sama, Anda bisa menulis itu seperti ini, jadi jika itu sama seperti
harga: harga, kita bisa
menulis ini di sini, tentu saja itu juga mungkin untuk judul dan deskripsi sehingga kita memetakan semua argumen ini
menjadi properti dengan nama yang sama di objek ini dan jika kita memperbarui produk yang relatif sama, perbarui produk, jadi kami biasanya
dapat menyalinnya tetapi ada satu perbedaan penting. Di sini kita juga memerlukan ID dari produk yang perlu diubah, jadi kita mendapatkan
ini sebagai argumen tambahan dan karena itu kita dapat menyimpannya dalam tindakan kita karena itu di properti terpisah dari objek tindakan kita. Sekarang di peredam, kita tentu
perlu mengatasinya,
kita perlu menangani pembuatan dan pembaruan. Jadi mari kita tambahkan case baru di sini di peredam produk
untuk membuat produk dan untuk itu, pastikan Anda mengimpor membuat produk dari produk tindakan dan tentu saja satu
untuk memperbarui produk dengan produk pembaruan, pastikan Anda juga mengimpornya.
Dalam membuat produk, tentu saja kita perlu membuat produk baru dan saya akan menyimpannya secara konstan di sini
dengan kata kunci baru dalam model produk yang
kita buat sebelumnya, untuk itu Anda hanya perlu memastikan Anda mengimpor model produk ini di sini dari folder models dan
produk tersebut di sini menerima ID yang untuk saat ini dapat menghasilkan secara manual dengan tanggal baru ke string
untuk memiliki semacam ID boneka palsu semu untuk beberapa saat kemudian, ini akan dihasilkan pada server tetapi kami
belum memilikinya .
ID pemilik untuk saat ini hardcoded ke U1 karena kami tidak memiliki pengguna di aplikasi ini
sekarang tetapi judul dan sebagainya dapat diisi dengan data dari tindakan karena dalam tindakan untuk menciptakan produk, kami
memiliki kunci data produk dan yang memegang objek dengan judul, deskripsi, imageUrl
dan harga dan itulah data yang
sekarang dapat kita ambil.
Jadi di sini untuk judul, kita mendapatkan data produk tindakan judul, untuk imageUrl, itu aksi. data produk.
imageUrl, tidak mengejutkan untuk deskripsi, itu adalah tindakan. data produk.
deskripsi dan untuk harganya, itu tindakan. data produk. harga. Ini sekarang produk baru yang saya buat.
Sekarang kita perlu menambahkannya ke toko kita dengan mengembalikan keadaan kita yang diperbarui di sini, di mana saya pertama-tama
menyalin kondisi yang ada dan sekarang saya perlu menambahkannya ke produk yang tersedia dan produk pengguna
karena kami membuatnya, karena itu tentu saja milik kepada kami, jadi itu perlu menjadi bagian dari kedua array dan produk
yang tersedia, baik di sana kita dapat mengambil produk-produk yang tersedia yang kita dapatkan dan menggunakan concat untuk mendapatkan
array baru yang merupakan array lama ditambah menambahkan elemen baru dan di sini, produk baru adalah elemen baru itu dan saya melakukan
hal yang sama persis di sini untuk produk pengguna.
Jadi di sini saya menggunakan produk pengguna negara dan saya membeli produk baru saya. Sekarang bagaimana dengan memperbarui? Untuk memperbarui, pertama-tama kita perlu
menemukan indeks produk saat ini, sehingga indeks
produk bisa menjadi nama konstan dapat ditemukan dengan mengakses produk pengguna kami dan di sana dengan indeks pencarian yang
merupakan metode Javascript bawaan, kita dapat menemukan indeks elemen tertentu.
Sekali lagi ini mengambil fungsi yang mengeksekusi pada setiap elemen dalam array itu dan yang perlu mengembalikan
true sehingga kita memiliki indeks dan di sana saya akan melihat ID dan mencari ID di
mana itu sama dengan pid saya,
pid tindakan saya karena jika Anda ingat bagaimana kami mengatur tindakan itu, untuk memperbarui kami memiliki bidang pid di
sini yang menyimpan ID produk yang kami dapatkan.
Jadi saya mencari produk itu dan kemudian saya menyimpan indeks produk itu di array produk pengguna
di indeks produk di sini, sekarang kita
dapat membuat produk yang diperbarui di sini yang secara teknis merupakan objek produk baru tetapi tentu saja dipopulasi
dengan beberapa produk lama. data,
misalnya kita menyimpan ID,
jadi kami mengambil tindakan pid sebagai nilai di sini.
Saya juga menyimpan ID pemilik dan untuk itu, saya bisa mengakses produk pengguna negara untuk indeks yang baru
saja kami ketahui, jadi untuk indeks produk itu,. ownerID, saya tidak akan mengubahnya.
Tentu saja saya akan menyimpan judul
baru, jadi di sini saya akan menyimpan aksi. data produk. judul, saya akan menyimpan imageUrl baru, jadi tindakan. data produk.
imageUrl dan saya akan menyimpan deskripsi baru, jadi beraksi. data produk. deskripsi. Namun saya sebutkan bahwa harga tidak boleh diedit,
jadi sebagai nilai untuk ini, saya akan mempertahankan harga aslinya, jadi nyatakan indeks produk produk pengguna. harga di
sini. Ngomong-ngomong itu juga berarti bahwa tindakan kita tidak sepenuhnya
benar, di sana saya juga mengharapkan harga, saya seharusnya tidak melakukan itu karena kita tidak bisa memasukkannya
dalam input kita, kita tidak memerlukannya sehingga kita tidak seharusnya berharap di sini, kita tidak boleh meneruskannya sebagai bagian dari
data produk untuk memperbarui produk, untuk produk baru kita membutuhkannya tetapi untuk memperbarui, kita tidak.
Jadi dengan itu, kami memiliki produk kami yang diperbarui dengan beberapa data baru dan beberapa
data lama, sekarang kami perlu memperbarui keadaan kami dan untuk itu, kami memiliki produk pengguna yang diperbarui di mana pada akhirnya saya menyalin produk pengguna saya
yang ada dengan sintaksis ini di sini untuk membuat salinan dan kemudian saya menetapkan produk pengguna yang diperbarui untuk indeks
produk yang dipilih sama dengan produk yang diperbarui, jadi saya mengganti produk di indeks ini dengan produk yang diperbarui baru dalam salinan
saya, bukan dalam array asli tetapi dalam salinan saya. Saya perlu melakukan hal yang sama dalam produk
yang tersedia tetapi di sana saya pertama-tama perlu menemukan indeks karena indeks di sini
hanya berfungsi untuk produk pengguna, indeks dalam produk yang tersedia sangat mungkin
berbeda, jadi saya punya saya tersedia indeks produk di sini jika Anda ingin menyebutnya seperti ini, yang umumnya
memiliki logika pemilihan yang sama, jadi kita dapat menyalinnya, tetapi tentu saja saya akan
melihat ke dalam array produk yang tersedia, bukan array produk pengguna. Dan sekarang lagi, di sini kita dapat memiliki produk yang
tersedia diperbarui di mana saya menyalin produk yang tersedia negara saya dan kemudian saya mengatur produk yang tersedia
diperbarui untuk indeks produk yang diberikan sama, permisi untuk indeks produk yang tersedia tentu saja sama dengan produk yang diperbarui,
sehingga Saya mengganti produk saya yang ada dengan produk yang diperbarui di
produk yang tersedia dan berbagai produk pengguna. Nah dan sekarang, kita hanya perlu mengembalikan status baru
kita, pertama-tama salin yang sudah ada dan sekarang mengatur produk yang tersedia sama dengan produk yang tersedia diperbarui dan mengatur produk pengguna sama dengan
produk pengguna yang diperbarui, jadi untuk array saya yang diperbarui saya mengkonfigurasi sana. Dengan itu, semoga kita memiliki semua logika yang kita butuhkan, sekarang mari kita kirim
peristiwa ini dari dalam layar produk yang ditambahkan. Jadi di sini kita perlu mengimpor pengiriman
menggunakan dari React Redux dan mengimpor tindakan kita, jadi impor semuanya sebagai tindakan produk dari folder
toko, di sana dari folder tindakan dan di sana dari file produk dan kemudian mengirimkan hal-hal ini di
dalam handler pengiriman tentu saja. Di sini, apa yang kami kirim tergantung pada apakah
kami mengedit atau
menambahkan amd seperti yang saya sebutkan, kita dapat mencari tahu apa masalahnya dengan bantuan produk yang diedit,
jika disetel, kami edit, jika tidak disetel, kami menambahkan.
Jadi di sini, di dalam penangan kirim, kita dapat menambahkan cek jika dan periksa apakah produk yang diedit, jika
sudah
diatur, kita sedang mengedit, jadi saya ingin mengirimkan acara produk pembaruan saya, untuk itu, pertama-tama, saya
perlu membuat fungsi pengiriman dengan bantuan dispatch penggunaan dan sekarang dengan yang dibuat, di sana kita dapat memanggil produk tindakan
pembaruan produk karena itulah yang kami lakukan di sini dan sekarang meneruskan semua
data yang kami butuhkan di
sini yang merupakan ID produk saya
, itulah ID dari produk yang kami edit, kami mengekstraksi
itu di sini dan tentu saja di samping itu, juga meneruskan judul, meneruskan deskripsi, semua konstanta negara yang
kami miliki di sini, imageUrl kami dan bukan harga karena kami tidak perlu itu dan dalam hal lain di sini, itu berarti
kami menambahkan, maka
saya ingin mengirimkan tindakan produk. buat produk, di
sini kita meneruskan judul, deskripsi, imageUrl dan juga harga dan dengan itu, kita harus memiliki pengaturan
di mana kita mudah-mudahan dapat menambah dan mengedit produk.
Jadi mari
kita simpan ini dan mari kita lihat. Jika kita sekarang pergi ke admin area di sini dan saya menambahkan ini
dan saya menambahkan tanda seru di sini dan juga satu di sini dalam deskripsi dan saya menekan save, saya tidak terdefinisi bukan objek, mengevaluasi
harga alat peraga untuk diperbaiki.
Jadi sepertinya saya kehilangan harga di sini ketika mencoba memperbarui ini.
Baiklah oke sebelum kita perbaiki ini, mari kita lihat apakah menambahkan produk baru sama sekali.
Jika saya menambahkan produk di sini dengan tes, tes yang tentu saja bukan imageUrl yang valid, jadi
kita tidak akan melihat gambar tetapi setidaknya kita menyesap sesuatu, ini juga merupakan tes.
Jika kita coba ini dan saya tekan kirim, ini
juga tidak berhasil, jadi entah bagaimana menghemat
harga tidak bekerja dan saya pikir masalahnya ada di sini tentu saja, masalahnya di sini adalah harga sebenarnya
adalah string di sini tetapi harus menjadi angka, sehingga kita dapat dengan mudah mengonversinya menjadi
angka dengan menambahkan nilai tambah di sini sebelum kita meneruskannya untuk membuat produk, untuk memperbarui di sisi lain, jika kita melihat pada produk peredam
kami, biasanya harus menjaga harga yang sudah ada .
Jadi mari kita lihat apakah plus itu memperbaikinya untuk ditambahkan atau jika ada masalah yang berbeda juga, ini adalah perubahan yang
diperlukan tetapi mari kita lihat apakah ada masalah lain. Jadi uji, uji, dua belas harap
masukkan hanya angka di sini, bukan beberapa teks yang saat ini Anda bisa tetapi yang
akan mematahkannya, uji ini, tekan tombol ini, ya itu tidak terlihat terlalu buruk, kami punya masalah dengan gambar di sini
tapi jika kita gulir ke bawah, sebenarnya di sini jika kita mengabaikan ini, kita dapat melihat
di sini produk kami, sehingga harganya hilang, jadi ada
yang salah di sana dan kami juga sepertinya tidak menyimpan
gambar dengan benar, bukan hanya karena tidak ditampilkan tetapi
karena peringatan yang kami dapatkan tetapi secara
umum, ini berhasil.
Namun misalnya di sini jika saya mencoba memperbarui dan menyimpan ini, kami masih mendapatkan kesalahan,
jadi masih ada yang salah.
Jadi satu hal yang salah adalah dalam tindakan tentu saja, untuk memperbarui produk di sini, jenisnya harus memperbarui produk dan
bukan membuat produk, jika tidak
kita memicu tindakan yang salah dalam peredam yang menjelaskan kesalahan harga yang kami dapatkan di sana.
Jadi ini harus menjadi produk pembaruan di sini untuk memperbarui produk tidak mengejutkan.
Jadi itu satu masalah tetapi masalah besar lainnya dapat ditemukan di layar produk yang ditambahkan. Saya menggunakan metode panggilan balik yang saya gunakan di sini
untuk membungkus submit handler dengan benar dan saya melakukan ini untuk
menghindari pembuatan ulang fungsi yang tidak perlu.
Masalahnya adalah saya awalnya mengatur ini untuk memiliki array kosong sebagai daftar dependensi yang berarti ini tidak pernah
dibuat kembali yang masuk akal ketika kita hanya memiliki konsol login di sana tapi
sekarang kita melakukan hal-hal di sana dan sekarang kita benar-benar memiliki dependensi.
Saat ini saya tidak pernah membuat ulang fungsi ini yang berarti tidak pernah diciptakan kembali untuk nilai-nilai yang diperbarui.
Jadi ketika kami mengirimkan formulir kami, kami tidak pernah memperhitungkan apa yang dimasukkan pengguna.
Jadi sebenarnya sekarang kita
perlu menentukan dependensi di sini, fungsi pengiriman tetapi yang lebih penting bahkan, ID prod, judul, deskripsi
dan imageUrl dan juga tentu saja harganya. Sekarang dengan itu jika kita menyimpan ini, kita harus baik-baik saja dan
semua masalah harus hilang.
Jadi mari kita tunggu
ini untuk memuat ulang, buka admin sekarang dan mulai mengedit ini mungkin dan sekarang jika kita menambahkan tanda seru pada judul dan dalam uraian
dan kita simpan ini dan kembali, kita melihatnya di sini dan jika kita pergi ke produk , kami juga melihatnya
di sini dan dalam detailnya, kami juga melihat tanda seru itu.
Sekarang jika kita kembali ke admin dan membuat
produk baru, uji,
uji, dua belas, uji ini dan saya simpan ini dan saya kembali, sekarang
ini juga muncul di sana. Tentu saja gambar tidak muncul karena
kami belum memasukkan URL yang valid tetapi semua data lainnya muncul, jadi ini
umumnya berfungsi dan tentu saja Anda bisa memasukkan imageUrl yang
valid dan itu juga akan rusak, mari kita cepat menguji ini demikian juga. Jadi mari kita kembali ke bagian admin dan menambahkan rak di sini
mungkin, untuk itu saya memilih URL rak yang saya temukan di internet untuk 199. 99, ini rak yang bagus
seperti ini. Jika sekarang kita menyimpan ini dan kembali, ini terlihat bagus, ini gambar
kita dan kita juga melihat di sini di layar produk dan kita dapat melihatnya di sini juga.
Jadi ini
sepertinya berhasil dan dengan itu, kita umumnya memiliki set yang berfungsi.
Sekarang ada beberapa hal kecil yang ingin saya kerjakan, misalnya sebelum kita menghapus, alangkah baiknya
memiliki sedikit dialog konfirmasi dan di samping itu, saya ingin memastikan bahwa ketika kita menambahkan atau mengedit suatu produk, ketika kita klik
simpan di sini, kami secara otomatis menavigasi kembali.
Jadi ini hanya hal-hal kecil tentu saja tetapi saya pikir mereka membuat akhir yang bagus di sini dalam modul ini.