1 00:00:02,210 --> 00:00:08,690 Tujuan dari layar ikhtisar produk tentu saja adalah untuk menyajikan daftar semua produk yang dapat kami pesan dan oleh karena itu 2 00:00:09,830 --> 00:00:13,250 di sini, kami tentu saja akan memiliki komponen Bereaksi normal, jadi 3 00:00:13,250 --> 00:00:15,490 kami perlu mengimpor Bereaksi dari Bereaksi. 4 00:00:15,620 --> 00:00:20,440 Kita juga perlu mengimpor banyak hal dari Bereaksi Asli pasti, misalnya saya 5 00:00:20,450 --> 00:00:26,330 akan memerlukan daftar datar di sini karena saya akan menampilkan daftar produk, kami tidak tahu berapa 6 00:00:26,330 --> 00:00:31,910 lama daftar itu akan tetapi berpotensi sangat panjang, jadi kami ingin dapat mengoptimalkannya untuk pengguliran 7 00:00:31,910 --> 00:00:33,440 dan itulah yang 8 00:00:33,440 --> 00:00:39,050 dilakukan daftar datar di luar kotak dan kami dapat mengimpor lebih banyak komponen sesuai kebutuhan. 9 00:00:40,460 --> 00:00:42,020 Jadi ini adalah 10 00:00:42,020 --> 00:00:51,980 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 11 00:00:52,070 --> 00:00:58,820 kemudian kami harus mengembalikan beberapa JSX di sini pada akhirnya dan pada akhirnya, saya akan juga mengekspor layar tinjauan 12 00:00:58,820 --> 00:01:05,360 umum produk saya di sini sebagai default file ini. Nah dengan itu, pertanyaannya tentu adalah 13 00:01:05,370 --> 00:01:11,830 apa yang ada di sana? Apa yang ada di dalam komponen kami dan di sana, 14 00:01:11,910 --> 00:01:14,660 saya tentu saja ingin membuat daftar datar 15 00:01:14,670 --> 00:01:17,610 saya, saya ingin membuat daftar datar produk saya. 16 00:01:17,610 --> 00:01:23,340 Sekarang tentu saja, kami belum memiliki produk tetapi kami dapat menambahkan beberapa. Sama seperti sebelumnya, karena itu saya akan menambahkan folder 17 00:01:23,340 --> 00:01:26,380 model di mana saya dapat menentukan bagaimana sebuah produk seharusnya terlihat. 18 00:01:26,400 --> 00:01:32,130 Ini bukan harus dilakukan tetapi dapat membantu Anda mengatur data Anda dan memastikan bahwa Anda tidak pernah secara 19 00:01:32,130 --> 00:01:37,980 tidak sengaja bekerja dengan berbagai jenis produk, di mana Anda hanya lupa untuk menambahkan properti tertentu di satu 20 00:01:37,980 --> 00:01:39,120 tempat aplikasi Anda. 21 00:01:39,180 --> 00:01:44,640 Jadi karena itu di sini dalam produk. File js di folder model, saya akan 22 00:01:44,640 --> 00:01:51,030 membuat kelas produk yang memiliki konstruktor di mana saya mendefinisikan bagaimana sebuah produk akan terlihat seperti dan saya ingin 23 00:01:51,030 --> 00:01:57,200 setiap produk memiliki ID unik, itu juga harus memiliki ID pemilik yang merupakan ID dari pengguna yang membuatnya. 24 00:01:57,540 --> 00:01:59,550 Seharusnya memiliki judul, itu 25 00:01:59,630 --> 00:02:04,320 harus memiliki imageUrl, itu harus memiliki deskripsi dan harus memiliki harga, ini 26 00:02:04,320 --> 00:02:08,850 adalah hal-hal yang membentuk suatu produk bagi saya dalam aplikasi ini. 27 00:02:09,030 --> 00:02:13,890 Sekarang tentu saja ketika kita menerima semua hal ini sebagai argumen dalam konstruktor, saya ingin 28 00:02:13,890 --> 00:02:18,570 menyimpannya di properti objek ini yang dapat kita buat dengan bantuan konstruktor ini, jadi 29 00:02:18,570 --> 00:02:21,960 oleh karena itu saya melakukan tugas ini yang juga Anda 30 00:02:21,960 --> 00:02:27,570 lihat sebelumnya di mana saya menyimpan semua data yang kami terima dalam properti dari objek yang dibuat. 31 00:02:27,570 --> 00:02:37,660 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 32 00:02:37,660 --> 00:02:44,350 produk dan kami akan menggunakannya kemudian di Redux dan pada akhirnya kami akan mendapatkan 33 00:02:44,350 --> 00:02:52,280 daftar produk di layar ikhtisar produk kami. Sekarang untuk mendapatkannya di sana, kita perlu memanfaatkan 34 00:02:52,280 --> 00:02:56,980 Redux dan untuk itu menjadi mungkin, kita perlu mengatur Redux. 35 00:02:56,990 --> 00:03:03,080 Jadi mari kita pergi ke folder store sekarang dan di sana, saya ingin memiliki tindakan subfolder dan 36 00:03:03,080 --> 00:03:07,820 reduksi subfolder, dalam aplikasi ini dengan cara kita akan memiliki berbagai reduksi dan tindakan, 37 00:03:07,820 --> 00:03:10,640 tidak seperti dalam modul terakhir di sini. 38 00:03:10,760 --> 00:03:13,760 Jadi untuk saat ini, kita akan mulai dengan produknya. File js di sini 39 00:03:13,830 --> 00:03:19,510 di folder reduksi dan saya juga akan menambahkan produk. File js di folder tindakan. 40 00:03:19,550 --> 00:03:24,980 Sekali lagi jika membingungkan Anda bahwa kami memiliki nama yang sama di sini di folder yang berbeda, Anda selalu dapat 41 00:03:24,980 --> 00:03:29,440 melihat di file mana saya di sini di bagian atas sini dengan fitur remah roti ini 42 00:03:29,660 --> 00:03:33,480 dan tentu saja, Anda juga dapat bekerja dengan nama yang berbeda di aplikasi 43 00:03:33,620 --> 00:03:39,380 Anda jika ini membingungkan, saya pikir itu cukup jelas meskipun di mana file saya berfungsi, itu jelas dipilih di sini juga. 44 00:03:39,380 --> 00:03:45,200 Jadi mari kita mulai dalam peredam produk dan di sana saya ingin mendefinisikan keadaan awal saya 45 00:03:45,200 --> 00:03:49,600 karena jenis ini mendefinisikan berapa banyak produk yang terkait dengan irisan keadaan 46 00:03:49,880 --> 00:03:54,440 akan terlihat seperti dan tentu saja, seperti biasa dalam pemrograman ada lebih 47 00:03:54,440 --> 00:04:02,890 dari satu pendekatan yang mungkin, saya pikir itu masuk akal untuk mengatakan bahwa kami memiliki daftar produk yang tersedia, itu adalah array dan 48 00:04:03,190 --> 00:04:06,070 produk pengguna dan produk pengguna, ini hanyalah 49 00:04:06,070 --> 00:04:08,630 produk yang kami buat, jadi di 50 00:04:08,710 --> 00:04:14,800 mana ID pemilik adalah ID dari pengguna yang saat ini masuk dan untuk saat ini, kami 51 00:04:14,800 --> 00:04:19,450 tidak akan memiliki fitur masuk tetapi nantinya akan menjadi kasusnya, untuk saat 52 00:04:19,450 --> 00:04:26,380 ini Anda hanya akan mengatur ini menjadi cara tiruan. Produk yang tersedia harus semua produk atau mungkin juga hanya produk yang tidak 53 00:04:26,380 --> 00:04:31,990 kami buat sehingga kami tidak dapat membeli produk kami sendiri, meskipun pada kenyataannya di sebagian besar toko, Anda juga dapat membeli 54 00:04:31,990 --> 00:04:34,990 apa yang Anda jual, jadi saya pikir kami juga bisa 55 00:04:34,990 --> 00:04:39,700 ambil saja semua produk di sini, tetapi itu adalah sesuatu yang juga bisa Anda sesuaikan dengan aplikasi Anda. 56 00:04:39,700 --> 00:04:47,920 Jadi kami memiliki dua array produk ini. Sekarang di peredam di sini yang merupakan fungsi di mana kita mendapatkan keadaan yang harus 57 00:04:47,920 --> 00:04:49,960 diinisialisasi dengan keadaan awal kita dan 58 00:04:49,960 --> 00:04:55,360 harus mengambil ini sebagai nilai default dan di mana kita mendapatkan tindakan, di sana kita nanti akan menangani jenis 59 00:04:55,360 --> 00:05:02,260 tindakan yang berbeda sehingga kita bisa misalnya menambah produk baru dan sebagainya. Untuk saat ini saya hanya akan selalu mengembalikan status saya 60 00:05:02,260 --> 00:05:04,380 di sini dan karena itu 61 00:05:04,450 --> 00:05:09,610 saya akan selalu mengembalikan kondisi awal saya dan itu akan memungkinkan kami untuk memanfaatkan 62 00:05:09,610 --> 00:05:12,300 Redux dan setidaknya mendapatkan kondisi awal tersebut. 63 00:05:12,340 --> 00:05:19,210 Sekarang tentu saja tanpa kemungkinan menambahkan produk baru, keadaan awal kami tidak begitu berguna karena memiliki daftar produk 64 00:05:19,210 --> 00:05:21,550 kosong di sini, jadi tidak ada 65 00:05:21,700 --> 00:05:23,480 yang bisa kami render. 66 00:05:23,740 --> 00:05:25,420 Jadi seperti yang saya 67 00:05:25,480 --> 00:05:32,080 lakukan sebelumnya, saya juga akan menambahkan folder data dan mengatur beberapa data dummy di sini yang tidak akan kita gunakan 68 00:05:32,110 --> 00:05:37,150 di seluruh modul tetapi yang bisa kita gunakan sekarang sehingga kita memiliki beberapa produk untuk 69 00:05:37,150 --> 00:05:43,390 memulai dengan dan untuk ini, Anda menemukan lampiran data-dummy ini. File js yang bisa Anda ambil untuk menggantikan milik Anda atau di mana 70 00:05:43,390 --> 00:05:47,230 Anda bisa menyalin konten ke dalam dummy-data Anda. File js dan apa yang 71 00:05:47,230 --> 00:05:50,620 saya lakukan di sana adalah saya mengimpor model produk saya, 72 00:05:50,620 --> 00:05:54,700 jadi tentu saja karena itu Anda harus memastikan bahwa jalur ini benar untuk 73 00:05:54,700 --> 00:06:00,940 Anda jika Anda hanya menyalin kode saya dan kemudian saya mengatur array produk ini di sini di mana saya memiliki 74 00:06:00,940 --> 00:06:07,150 banyak produk dummy dan sekarang ini penting, kami mendapatkan ID produk, kemudian kami mendapatkan ID pemilik, lalu kami mendapat 75 00:06:07,150 --> 00:06:12,100 judul dan Anda harus memastikan bahwa model produk Anda sudah diatur sehingga pesanan ini benar. 76 00:06:12,130 --> 00:06:19,630 Jadi di sini kita mendapatkan judul, lalu kita mendapatkan imageUrl sebagai argumen keempat yang Anda terima, maka Anda 77 00:06:19,630 --> 00:06:23,590 memiliki deskripsi sebagai argumen kelima dan harga sebagai 78 00:06:23,590 --> 00:06:30,250 argumen terakhir, jadi pastikan bahwa model produk Anda diatur sedemikian rupa sehingga ini adalah urutan argumen. 79 00:06:30,250 --> 00:06:31,690 Inilah yang Anda miliki 80 00:06:31,930 --> 00:06:34,050 di sini, pada akhirnya saya mengekspor array ini 81 00:06:34,070 --> 00:06:38,160 sebagai default dan karena itu sekarang dalam peredam produk ini, kita dapat mengimpor ini. 82 00:06:38,170 --> 00:06:47,080 Jadi di sana kita dapat mengimpor produk, daftar produk boneka dari folder data 83 00:06:47,080 --> 00:06:52,750 dan dari data boneka. File js dan kita cukup menginisialisasi produk 84 00:06:52,750 --> 00:06:59,410 yang tersedia dengan produk di sini untuk saat ini dan produk pengguna juga dapat diinisialisasi dengan itu, meskipun untuk 85 00:06:59,440 --> 00:07:06,310 produk pengguna ada satu perbedaan kecil yang ingin saya buat, saya ingin memfilter mereka untuk ID pemilik tertentu karena 86 00:07:06,310 --> 00:07:12,820 pada akhirnya, tidak semua produk akan dibuat oleh kami. Alih-alih di sini, saya akan memfilter array dummy 87 00:07:12,820 --> 00:07:19,420 itu, lihat setiap produk yang hanya menyertakan produk dalam array produk pengguna saya di mana ID pemilik 88 00:07:19,420 --> 00:07:26,500 sama dengan U1 yang jika Anda melihat data dummy hanya merupakan kasus untuk beberapa produk, tidak untuk mereka 89 00:07:26,500 --> 00:07:26,960 semua. 90 00:07:27,010 --> 00:07:32,650 Beberapa dari mereka memiliki ID pemilik U1 dan ini akan menjadi produk yang saya gunakan di sini 91 00:07:32,650 --> 00:07:39,010 sebagai produk pengguna, sebagai pengaturan tiruan. dengan itu peredam kami untuk produk diatur di sini. kita dapat mengabaikan tindakan produk untuk saat ini, tentu 92 00:07:39,100 --> 00:07:45,070 saja kita akan menambahkan beberapa nanti dan sekarang kita dapat pergi ke aplikasi. File js dan mengatur Redux di 93 00:07:45,070 --> 00:07:46,450 sana juga. 94 00:07:46,450 --> 00:07:50,100 Untuk itu, kita perlu mengimpor sesuatu dari Redux 95 00:07:50,140 --> 00:07:54,720 dan tentu saja, kita juga perlu mengimpor sesuatu dari React Redux. 96 00:07:54,970 --> 00:07:58,870 Sekarang ini sesuatu yang perlu kita impor dari Redux di 97 00:07:58,870 --> 00:08:04,060 sini dan itu tentu saja fungsi create store dan fungsi reducers gabungan, sehingga kita 98 00:08:04,060 --> 00:08:08,910 bisa membuat satu root reducer. Saat ini tentu saja kami hanya memiliki 99 00:08:08,920 --> 00:08:12,610 satu peredam, tetapi seperti yang saya sebutkan di aplikasi ini, kami sebenarnya 100 00:08:12,610 --> 00:08:18,300 akan memiliki beberapa peredam pada akhirnya, jadi di sini Anda pasti perlu menggabungkan peredam Anda dan dari React Redux, 101 00:08:18,310 --> 00:08:25,750 kami membutuhkan komponen penyedia yang kami bungkus sekitar aplikasi kami untuk memberikan sesuatu. Kami tentu saja juga akan perlu mengimpor produk peredam 102 00:08:25,750 --> 00:08:33,600 atau namun Anda ingin nama itu dari folder toko, ada dari peredam dan ada dari file produk sehingga kami 103 00:08:33,660 --> 00:08:39,940 dapat kemudian membuat peredam root kami dengan memanggil peredam gabungan, di mana kami kemudian lulus 104 00:08:40,000 --> 00:08:48,490 dalam sebuah objek di mana kita memetakan katakanlah untuk produk tapi itu terserah Anda, peredam produk kami dan kemudian kami 105 00:08:48,520 --> 00:08:55,330 akan menambahkan lebih banyak reduksi di sana dan kemudian kita dapat membuat toko kami dengan membuat 106 00:08:55,330 --> 00:09:03,280 toko dan ini pada akhirnya mengambil peredam root kami sebagai argumen dan setelah itu di sana dalam kode jsx, 107 00:09:03,970 --> 00:09:11,230 saya akan membuat komponen penyedia saya di antara tag pembuka dan penutup, saya kemudian juga akan memiliki 108 00:09:11,230 --> 00:09:17,900 layar saya, untuk saat ini, kami tidak akan memiliki apa pun di sana, ini tidak berlaku 109 00:09:17,920 --> 00:09:23,080 jsx Ngomong-ngomong, tetapi kita akan memperbaikinya nanti dan untuk komponen penyedia, tentu 110 00:09:23,080 --> 00:09:29,200 saja kita harus mengatur penyangga toko dan mengatur ini ke konstanta toko atau toko 111 00:09:29,200 --> 00:09:36,180 pada umumnya yang kita buat di sini. Dengan itu, Redux harus diatur, dengan itu nantinya kita dapat 112 00:09:36,210 --> 00:09:42,120 memanfaatkannya di sini dari layar tinjauan produk dan tentu saja, langkah selanjutnya adalah menambahkan navigasi sehingga kita 113 00:09:42,120 --> 00:09:46,670 dapat melihat layar tinjauan produk. Jadi mari kita lanjutkan langkah 114 00:09:46,710 --> 00:09:47,190 selanjutnya.