Tujuan dari layar ikhtisar produk tentu saja adalah untuk menyajikan daftar semua produk yang dapat kami pesan dan oleh karena itu
di sini, kami tentu saja akan memiliki komponen Bereaksi normal, jadi
kami perlu mengimpor Bereaksi dari Bereaksi.
Kita juga perlu mengimpor banyak hal dari Bereaksi Asli pasti, misalnya saya
akan memerlukan daftar datar di sini karena saya akan menampilkan daftar produk, kami tidak tahu berapa
lama daftar itu akan tetapi berpotensi sangat panjang, jadi kami ingin dapat mengoptimalkannya untuk pengguliran
dan itulah yang
dilakukan daftar datar di luar kotak dan kami dapat mengimpor lebih banyak komponen sesuai kebutuhan.
Jadi ini adalah
dua impor dasar, sekarang dengan itu saya akan membuat komponen layar ikhtisar produk saya di sini hanya dalam bentuk fungsi ini di sini kami menerima alat peraga dan
kemudian kami harus mengembalikan beberapa JSX di sini pada akhirnya dan pada akhirnya, saya akan juga mengekspor layar tinjauan
umum produk saya di sini sebagai default file ini. Nah dengan itu, pertanyaannya tentu adalah
apa yang ada di sana? Apa yang ada di dalam komponen kami dan di sana,
saya tentu saja ingin membuat daftar datar
saya, saya ingin membuat daftar datar produk saya.
Sekarang tentu saja, kami belum memiliki produk tetapi kami dapat menambahkan beberapa. Sama seperti sebelumnya, karena itu saya akan menambahkan folder
model di mana saya dapat menentukan bagaimana sebuah produk seharusnya terlihat.
Ini bukan harus dilakukan tetapi dapat membantu Anda mengatur data Anda dan memastikan bahwa Anda tidak pernah secara
tidak sengaja bekerja dengan berbagai jenis produk, di mana Anda hanya lupa untuk menambahkan properti tertentu di satu
tempat aplikasi Anda.
Jadi karena itu di sini dalam produk. File js di folder model, saya akan
membuat kelas produk yang memiliki konstruktor di mana saya mendefinisikan bagaimana sebuah produk akan terlihat seperti dan saya ingin
setiap produk memiliki ID unik, itu juga harus memiliki ID pemilik yang merupakan ID dari pengguna yang membuatnya.
Seharusnya memiliki judul, itu
harus memiliki imageUrl, itu harus memiliki deskripsi dan harus memiliki harga, ini
adalah hal-hal yang membentuk suatu produk bagi saya dalam aplikasi ini.
Sekarang tentu saja ketika kita menerima semua hal ini sebagai argumen dalam konstruktor, saya ingin
menyimpannya di properti objek ini yang dapat kita buat dengan bantuan konstruktor ini, jadi
oleh karena itu saya melakukan tugas ini yang juga Anda
lihat sebelumnya di mana saya menyimpan semua data yang kami terima dalam properti dari objek yang dibuat.
Jadi di sini, kami menyimpan judul, imageUrl, ID, dan tentu saja, deskripsi serta harganya. Dengan pengaturan itu di sini, kami memiliki cetak biru untuk suatu
produk dan kami akan menggunakannya kemudian di Redux dan pada akhirnya kami akan mendapatkan
daftar produk di layar ikhtisar produk kami. Sekarang untuk mendapatkannya di sana, kita perlu memanfaatkan
Redux dan untuk itu menjadi mungkin, kita perlu mengatur Redux.
Jadi mari kita pergi ke folder store sekarang dan di sana, saya ingin memiliki tindakan subfolder dan
reduksi subfolder, dalam aplikasi ini dengan cara kita akan memiliki berbagai reduksi dan tindakan,
tidak seperti dalam modul terakhir di sini.
Jadi untuk saat ini, kita akan mulai dengan produknya. File js di sini
di folder reduksi dan saya juga akan menambahkan produk. File js di folder tindakan.
Sekali lagi jika membingungkan Anda bahwa kami memiliki nama yang sama di sini di folder yang berbeda, Anda selalu dapat
melihat di file mana saya di sini di bagian atas sini dengan fitur remah roti ini
dan tentu saja, Anda juga dapat bekerja dengan nama yang berbeda di aplikasi
Anda jika ini membingungkan, saya pikir itu cukup jelas meskipun di mana file saya berfungsi, itu jelas dipilih di sini juga.
Jadi mari kita mulai dalam peredam produk dan di sana saya ingin mendefinisikan keadaan awal saya
karena jenis ini mendefinisikan berapa banyak produk yang terkait dengan irisan keadaan
akan terlihat seperti dan tentu saja, seperti biasa dalam pemrograman ada lebih
dari satu pendekatan yang mungkin, saya pikir itu masuk akal untuk mengatakan bahwa kami memiliki daftar produk yang tersedia, itu adalah array dan
produk pengguna dan produk pengguna, ini hanyalah
produk yang kami buat, jadi di
mana ID pemilik adalah ID dari pengguna yang saat ini masuk dan untuk saat ini, kami
tidak akan memiliki fitur masuk tetapi nantinya akan menjadi kasusnya, untuk saat
ini Anda hanya akan mengatur ini menjadi cara tiruan. Produk yang tersedia harus semua produk atau mungkin juga hanya produk yang tidak
kami buat sehingga kami tidak dapat membeli produk kami sendiri, meskipun pada kenyataannya di sebagian besar toko, Anda juga dapat membeli
apa yang Anda jual, jadi saya pikir kami juga bisa
ambil saja semua produk di sini, tetapi itu adalah sesuatu yang juga bisa Anda sesuaikan dengan aplikasi Anda.
Jadi kami memiliki dua array produk ini. Sekarang di peredam di sini yang merupakan fungsi di mana kita mendapatkan keadaan yang harus
diinisialisasi dengan keadaan awal kita dan
harus mengambil ini sebagai nilai default dan di mana kita mendapatkan tindakan, di sana kita nanti akan menangani jenis
tindakan yang berbeda sehingga kita bisa misalnya menambah produk baru dan sebagainya. Untuk saat ini saya hanya akan selalu mengembalikan status saya
di sini dan karena itu
saya akan selalu mengembalikan kondisi awal saya dan itu akan memungkinkan kami untuk memanfaatkan
Redux dan setidaknya mendapatkan kondisi awal tersebut.
Sekarang tentu saja tanpa kemungkinan menambahkan produk baru, keadaan awal kami tidak begitu berguna karena memiliki daftar produk
kosong di sini, jadi tidak ada
yang bisa kami render.
Jadi seperti yang saya
lakukan sebelumnya, saya juga akan menambahkan folder data dan mengatur beberapa data dummy di sini yang tidak akan kita gunakan
di seluruh modul tetapi yang bisa kita gunakan sekarang sehingga kita memiliki beberapa produk untuk
memulai dengan dan untuk ini, Anda menemukan lampiran data-dummy ini. File js yang bisa Anda ambil untuk menggantikan milik Anda atau di mana
Anda bisa menyalin konten ke dalam dummy-data Anda. File js dan apa yang
saya lakukan di sana adalah saya mengimpor model produk saya,
jadi tentu saja karena itu Anda harus memastikan bahwa jalur ini benar untuk
Anda jika Anda hanya menyalin kode saya dan kemudian saya mengatur array produk ini di sini di mana saya memiliki
banyak produk dummy dan sekarang ini penting, kami mendapatkan ID produk, kemudian kami mendapatkan ID pemilik, lalu kami mendapat
judul dan Anda harus memastikan bahwa model produk Anda sudah diatur sehingga pesanan ini benar.
Jadi di sini kita mendapatkan judul, lalu kita mendapatkan imageUrl sebagai argumen keempat yang Anda terima, maka Anda
memiliki deskripsi sebagai argumen kelima dan harga sebagai
argumen terakhir, jadi pastikan bahwa model produk Anda diatur sedemikian rupa sehingga ini adalah urutan argumen.
Inilah yang Anda miliki
di sini, pada akhirnya saya mengekspor array ini
sebagai default dan karena itu sekarang dalam peredam produk ini, kita dapat mengimpor ini.
Jadi di sana kita dapat mengimpor produk, daftar produk boneka dari folder data
dan dari data boneka. File js dan kita cukup menginisialisasi produk
yang tersedia dengan produk di sini untuk saat ini dan produk pengguna juga dapat diinisialisasi dengan itu, meskipun untuk
produk pengguna ada satu perbedaan kecil yang ingin saya buat, saya ingin memfilter mereka untuk ID pemilik tertentu karena
pada akhirnya, tidak semua produk akan dibuat oleh kami. Alih-alih di sini, saya akan memfilter array dummy
itu, lihat setiap produk yang hanya menyertakan produk dalam array produk pengguna saya di mana ID pemilik
sama dengan U1 yang jika Anda melihat data dummy hanya merupakan kasus untuk beberapa produk, tidak untuk mereka
semua.
Beberapa dari mereka memiliki ID pemilik U1 dan ini akan menjadi produk yang saya gunakan di sini
sebagai produk pengguna, sebagai pengaturan tiruan. dengan itu peredam kami untuk produk diatur di sini. kita dapat mengabaikan tindakan produk untuk saat ini, tentu
saja kita akan menambahkan beberapa nanti dan sekarang kita dapat pergi ke aplikasi. File js dan mengatur Redux di
sana juga.
Untuk itu, kita perlu mengimpor sesuatu dari Redux
dan tentu saja, kita juga perlu mengimpor sesuatu dari React Redux.
Sekarang ini sesuatu yang perlu kita impor dari Redux di
sini dan itu tentu saja fungsi create store dan fungsi reducers gabungan, sehingga kita
bisa membuat satu root reducer. Saat ini tentu saja kami hanya memiliki
satu peredam, tetapi seperti yang saya sebutkan di aplikasi ini, kami sebenarnya
akan memiliki beberapa peredam pada akhirnya, jadi di sini Anda pasti perlu menggabungkan peredam Anda dan dari React Redux,
kami membutuhkan komponen penyedia yang kami bungkus sekitar aplikasi kami untuk memberikan sesuatu. Kami tentu saja juga akan perlu mengimpor produk peredam
atau namun Anda ingin nama itu dari folder toko, ada dari peredam dan ada dari file produk sehingga kami
dapat kemudian membuat peredam root kami dengan memanggil peredam gabungan, di mana kami kemudian lulus
dalam sebuah objek di mana kita memetakan katakanlah untuk produk tapi itu terserah Anda, peredam produk kami dan kemudian kami
akan menambahkan lebih banyak reduksi di sana dan kemudian kita dapat membuat toko kami dengan membuat
toko dan ini pada akhirnya mengambil peredam root kami sebagai argumen dan setelah itu di sana dalam kode jsx,
saya akan membuat komponen penyedia saya di antara tag pembuka dan penutup, saya kemudian juga akan memiliki
layar saya, untuk saat ini, kami tidak akan memiliki apa pun di sana, ini tidak berlaku
jsx Ngomong-ngomong, tetapi kita akan memperbaikinya nanti dan untuk komponen penyedia, tentu
saja kita harus mengatur penyangga toko dan mengatur ini ke konstanta toko atau toko
pada umumnya yang kita buat di sini. Dengan itu, Redux harus diatur, dengan itu nantinya kita dapat
memanfaatkannya di sini dari layar tinjauan produk dan tentu saja, langkah selanjutnya adalah menambahkan navigasi sehingga kita
dapat melihat layar tinjauan produk. Jadi mari kita lanjutkan langkah
selanjutnya.