1 00:00:02,220 --> 00:00:06,440 Untuk fitur add to cart, kita perlu mengerjakan dua hal - satu 2 00:00:06,450 --> 00:00:09,850 tentu saja kita dapat memiliki layar keranjang, bahwa kita memiliki 3 00:00:09,880 --> 00:00:17,250 ikon di sini di header kita yang membawa kita ke layar keranjang di mana kita dapat melihat seperti jumlah total dan item 4 00:00:17,250 --> 00:00:20,640 keranjang dan di mana kita memiliki tombol pesanan sekarang, tetapi 5 00:00:20,640 --> 00:00:26,580 saya akan mengatakan itu adalah langkah kedua karena langkah pertama yang lebih penting adalah kita menambahkan logika 6 00:00:26,910 --> 00:00:33,030 untuk mengelola item keranjang dan itu melibatkan Redux. Untuk ini, saya akan menambahkan peredam baru, 7 00:00:33,040 --> 00:00:40,620 peredam kedua yang akan saya beri nama troli, gerobak. js dan juga file tindakan dan ini sekarang sebenarnya 8 00:00:40,750 --> 00:00:43,280 file tindakan yang akan kita isi. 9 00:00:43,330 --> 00:00:45,270 Kami akan melakukannya dengan file produk nanti juga 10 00:00:45,280 --> 00:00:52,250 setelah kami masuk ke menambahkan produk dan sebagainya, tetapi untuk sekarang, mari kita mulai dengan fitur keranjang. Jadi di sini, di 11 00:00:52,250 --> 00:00:55,010 gerobak. File js di folder 12 00:00:55,250 --> 00:01:00,350 reduksi, saya akan mengatur keadaan awal saya untuk irisan gerobak itu dan lagi, itu semua reduksi 13 00:01:00,350 --> 00:01:05,390 terpisah dan status yang mereka kelola untuk membuat total toko Redux karena pada akhirnya, itulah 14 00:01:05,390 --> 00:01:11,420 yang kemudian Anda gabungkan di sini dengan gabungan mereduksi menjadi satu peredam akar dan satu kondisi besar pada akhirnya. 15 00:01:11,520 --> 00:01:16,150 Kami hanya memiliki masing-masing sub-negara bagian untuk mengelola data lebih mudah. 16 00:01:16,230 --> 00:01:22,100 Jadi di sini, di peredam kereta, seperti apa kondisi kereta kami? 17 00:01:22,500 --> 00:01:31,000 Nah gerobak kami akan memiliki banyak item, bisa berupa array dan jumlah yang awalnya nol, jadi jumlah total yang bisa Anda katakan, Anda 18 00:01:31,360 --> 00:01:35,680 tentu saja dapat menyebutkan jumlah total ini mungkin untuk membuatnya sangat jelas 19 00:01:35,680 --> 00:01:36,720 apa ini. 20 00:01:36,730 --> 00:01:39,160 Jadi ini adalah dua hal yang membentuk gerobak saya di sini 21 00:01:39,160 --> 00:01:45,460 dan seperti biasa, saya tidak bisa cukup menekankan ini, ada lebih dari satu cara menerapkan ini. Jadi jika Anda ingin mengelola beberapa data lain di 22 00:01:45,460 --> 00:01:47,350 sini juga, pasti melakukannya, tidak 23 00:01:47,380 --> 00:01:48,480 ada pendekatan 24 00:01:48,490 --> 00:01:50,920 yang benar atau salah, ini hanya 25 00:01:50,920 --> 00:01:53,330 pendekatan saya dalam membangun aplikasi ini. 26 00:01:53,410 --> 00:01:58,480 Sekarang penting bahwa untuk kereta ini di sini, saya ingin memastikan bahwa jika kita sudah memiliki 27 00:01:58,590 --> 00:02:02,120 barang di kereta, katakanlah baju merah dan saya klik untuk gerobak 28 00:02:02,440 --> 00:02:09,340 kedua kalinya, saya tidak menambahkan dua item ke array ini tetapi Saya masih hanya memiliki satu item di sana dan sebagai 29 00:02:09,340 --> 00:02:15,850 gantinya setiap item dalam array item harus menjadi objek tempat saya mengelola seperti ID produk mungkin, di mana saya memiliki 30 00:02:15,850 --> 00:02:18,940 judul dan jumlah item dalam keranjang, sehingga kemudian 31 00:02:18,970 --> 00:02:22,630 akan ubah ke 2 jika saya klik untuk yang kedua kalinya. 32 00:02:22,720 --> 00:02:31,960 Oleh karena itu Anda sebenarnya bisa juga berpendapat bahwa item mungkin tidak boleh berupa array tetapi mungkin objek Javascript karena itu memungkinkan kita 33 00:02:32,170 --> 00:02:37,930 untuk menyimpan ID produk sebagai kunci dan nilainya bisa menjadi objek dengan judul, dengan 34 00:02:38,220 --> 00:02:42,420 kuantitas, dengan harga dan itu hanya sebuah alternatif, Anda juga 35 00:02:42,470 --> 00:02:43,840 bisa melakukan ini 36 00:02:43,840 --> 00:02:48,830 semua dengan sebuah array tetapi itu sebenarnya pendekatan yang akan saya gunakan. 37 00:02:49,180 --> 00:02:54,190 Sekarang, peredam yang saya ekspor adalah peredam yang tentu saja mendapatkan keadaan yang 38 00:02:54,190 --> 00:03:00,700 memiliki keadaan awal kami sebagai nilai default dan tindakan sebagai argumen yang pada akhirnya perlu mengembalikan beberapa data. 39 00:03:01,150 --> 00:03:04,890 Jadi pada akhirnya, perlu mengembalikan negara baru yang kemudian digunakan oleh Redux. 40 00:03:04,900 --> 00:03:07,210 Sekarang kita perlu tindakan untuk melanjutkan. 41 00:03:07,660 --> 00:03:15,610 Jadi di sini saya akan mengekspor konstanta, pengidentifikasi tindakan, dan saya akan beri nama ini ke keranjang, pengenal terserah 42 00:03:15,610 --> 00:03:22,790 Anda, saya akan pergi dengan menambahkan ke keranjang seperti ini dan dalam file tindakan, saya akan membuat 43 00:03:22,780 --> 00:03:24,490 seperti fungsi pembuat tindakan. 44 00:03:24,610 --> 00:03:26,620 Jadi di sini konstanta 45 00:03:26,650 --> 00:03:34,800 lain yang akan saya beri nama tambahkan ke keranjang yang menerima katakanlah objek produk lengkap yang ingin saya tambahkan, sehingga saya dapat 46 00:03:34,800 --> 00:03:40,260 mengeluarkan informasi yang saya butuhkan dan kemudian di sini, kita harus mengembalikan objek tindakan seperti 47 00:03:40,260 --> 00:03:44,730 itu yang memiliki tipe yang ditambahkan ke keranjang dan kemudian produk kami. 48 00:03:44,730 --> 00:03:50,010 Ini hanyalah cara untuk membuat tindakan ini yang membuatnya sangat mudah bagi kita untuk melakukan itu di 49 00:03:50,010 --> 00:03:51,240 dalam komponen kita. 50 00:03:51,240 --> 00:03:56,970 Jadi pada akhirnya, dalam peredam gerobak, di semua peredam sebenarnya tapi di tempat peredam gerobak tempat kami peduli, kami 51 00:03:57,310 --> 00:03:58,010 akan 52 00:03:58,020 --> 00:04:06,180 mendapatkan add itu untuk aksi keranjang, jadi di sini kita perlu mengganti jenis tindakan dan menangani case yang ditambahkan ke keranjang dan oleh karena itu Anda 53 00:04:06,360 --> 00:04:07,950 harus mengimpor tambahkan ke keranjang 54 00:04:07,950 --> 00:04:14,050 dari folder tindakan itu dan di sana, dari file keranjang. Sekarang dan yang penting, tindakan ini ketika dikirim 55 00:04:14,070 --> 00:04:19,200 diterima pada semua reduksi tetapi jika Anda tidak menanganinya dengan kasing terpisah, kasing default 56 00:04:19,200 --> 00:04:26,460 Anda akan menendang yang biasanya hanya mengembalikan potongan keadaan Anda saat ini untuk reducer ini, yang berarti potongan negara 57 00:04:26,460 --> 00:04:31,100 untuk peredam ini tidak berubah. Namun di sini di peredam kereta, 58 00:04:31,140 --> 00:04:34,550 saya tentu saja ingin mengubah keadaan saya, maka saya menangani 59 00:04:34,710 --> 00:04:36,750 untuk menambah kasing di sini dan 60 00:04:36,750 --> 00:04:39,660 sekarang di tambahkan ke keranjang, apa yang harus 61 00:04:39,660 --> 00:04:41,240 terjadi di sana? 62 00:04:42,280 --> 00:04:50,720 Kita dapatkan produk tambahan kita, kita dapat menariknya keluar dari tindakan karena di sana dalam aksi, kita akan memiliki kunci produk, itulah yang baru 63 00:04:50,720 --> 00:04:51,750 saja kita 64 00:04:51,770 --> 00:04:56,040 siapkan di sini di keranjang tindakan. File js, jadi saya akan mendapatkan produk 65 00:04:56,060 --> 00:05:00,710 kami dan saya menyimpannya di konstan, menambahkan produk di sini dengan mana kami dapat bekerja sekarang dan 66 00:05:01,920 --> 00:05:08,910 kami akan memiliki harga produk kami di sini yang tentu saja ditambahkan Produk. harga dan kami akan memiliki judul 67 00:05:08,940 --> 00:05:16,170 produk kami yang ditambahkanProduk. judul. Sebelum kita melanjutkan, mari kita tentukan bagaimana 68 00:05:16,170 --> 00:05:21,460 item keranjang, jadi apa yang kita simpan di sini akan terlihat seperti, nilai yang kita miliki di sana. 69 00:05:21,650 --> 00:05:30,550 Jadi saya akan pergi ke folder model saya dan menambahkan item keranjang. File js di sini dan kemudian menambahkan kelas 70 00:05:30,580 --> 00:05:32,650 item keranjang yang menerima 71 00:05:32,890 --> 00:05:39,370 konstruktor dan sebelum saya lupa lagi, yang perlu diekspor di sini dan sekarang 72 00:05:39,370 --> 00:05:46,750 di konstruktor itu, saya berharap untuk mendapatkan jumlah produk yang akan kami tambahkan, harga produk, 73 00:05:47,020 --> 00:05:56,950 judul produk dan jumlah untuk item ini, jika kita memiliki tiga kali kemeja merah, jumlah kita akan menjadi tiga kali 74 00:05:56,950 --> 00:05:58,980 29. 99, 75 00:05:59,110 --> 00:06:01,690 jadi sekitar $ 90. 76 00:06:01,690 --> 00:06:10,220 Sekarang yang tidak saya dapatkan di sini adalah ID produk karena saya akan menggunakannya sebagai kunci di dalam objek saya di sini yang menyimpan barang 77 00:06:10,220 --> 00:06:13,440 dan kemudian akan menjadi lebih jelas setelah kami menerapkannya. 78 00:06:14,150 --> 00:06:17,690 Jadi di sini di item kereta, saya 79 00:06:17,840 --> 00:06:22,890 hanya menyimpan semua data yang saya terima, jumlah, harga produk dan saya 80 00:06:22,900 --> 00:06:34,200 punya data di sana yang saya butuhkan untuk output nanti, jadi judul produk dan jumlahnya, seperti ini dan sekarang kembali ke peredam, kita tentu saja 81 00:06:34,260 --> 00:06:41,520 dapat mengimpor kelas item keranjang ini dari folder model dan dari item keranjang di sini dan 82 00:06:41,520 --> 00:06:47,880 sekarang kembali ke dalam menambahkan ke keranjang kasus di sana, kita pertama-tama perlu mencari 83 00:06:47,980 --> 00:06:52,680 tahu apakah produk itu sudah menjadi bagian dari barang kami. 84 00:06:52,680 --> 00:06:59,370 Sekarang seperti yang saya sebutkan, saya akan menambahkan setiap produk baru dengan menambahkan kunci baru ke item yang merupakan ID dari 85 00:06:59,370 --> 00:07:01,020 produk itu, karena itu 86 00:07:01,020 --> 00:07:06,870 unik kami selalu memiliki setiap kunci hanya sekali dan kemudian nilainya akan menjadi item keranjang seperti yang baru 87 00:07:07,110 --> 00:07:12,990 saja kami lakukan. mendefinisikannya dalam model dan karenanya saya tahu jika ID produk yang saya dapatkan di sini sudah 88 00:07:13,170 --> 00:07:17,050 merupakan kunci barang, maka ini sudah memiliki barang kami sebagai barang keranjang. 89 00:07:17,070 --> 00:07:26,190 Jadi di sini, kita cukup memeriksa apakah item untuk tambahProduk. ID ada, jadi jika itu mengembalikan sesuatu yang 90 00:07:26,200 --> 00:07:36,290 benar-benar, jadi tidak terdefinisi, maka kita sudah memiliki item dalam keranjang yang tidak apa-apa tapi kemudian kita hanya perlu 91 00:07:36,290 --> 00:07:38,800 mengubah kuantitasnya, kalau tidak 92 00:07:38,860 --> 00:07:41,600 kita perlu menambahkan item baru. 93 00:07:41,600 --> 00:07:45,920 Jadi mari kita mulai dengan kasing yang lain karena itulah kasing yang 94 00:07:45,920 --> 00:07:47,170 pertama kali kita 95 00:07:47,330 --> 00:07:51,910 temui ketika kita menambahkan sesuatu untuk pertama kali, di sana kita memerlukan item 96 00:07:51,920 --> 00:07:58,460 keranjang baru, saya membuatnya dengan kata kunci baru dan kelas item keranjang yang saya tetapkan dan di sana , 97 00:07:58,520 --> 00:08:00,530 kita perlu memberikan jumlah yang tentu 98 00:08:00,920 --> 00:08:08,840 saja adalah satu jika kita hanya menambahkan item baru, kita perlu memberikan harga produk, judul produk di sini dan jumlah dan jumlah tentu 99 00:08:09,050 --> 00:08:11,580 saja awalnya hanya harga produk kita, kan? 100 00:08:11,600 --> 00:08:17,810 Karena jika kita menambahkan satu item dari harga itu, maka jumlah untuk item keranjang ini adalah harga produk kami dan sekarang item 101 00:08:17,810 --> 00:08:21,200 keranjang baru ini harus ditambahkan ke item keranjang kami di sini. 102 00:08:24,100 --> 00:08:29,050 Jadi di sini, kami mengembalikan salinan status kami dan kami 103 00:08:29,220 --> 00:08:38,290 menyetel item sama dengan objek baru tempat saya menyalin semua item status saya yang ada, sehingga saya menyalin 104 00:08:38,290 --> 00:08:39,630 objek item 105 00:08:39,640 --> 00:08:47,200 yang ada di sini dan kemudian saya menambahkan kunci baru dengan sintaksis dinamis ini dengan 106 00:08:47,200 --> 00:08:55,280 tanda kurung di mana nama kunci ditambahkanProduk. ID, itulah yang saya maksud dengan ID produk yang menjadi kunci dalam 107 00:08:55,340 --> 00:08:59,190 objek item kami dan nilainya adalah item keranjang baru kami. 108 00:08:59,390 --> 00:09:04,730 Ini hanya sebuah sintaks yang harus Anda ketahui, ini adalah vanilla Javascript, ini adalah bagaimana Anda dapat menambahkan atau 109 00:09:04,730 --> 00:09:11,570 mengakses sebagai properti dinamis di sini alih-alih hardcoding sebagai string di sini. Ngomong-ngomong, ini di sini tentu 110 00:09:11,600 --> 00:09:20,170 saja juga harus menyatakan. barang, kesalahan saya. Maka dengan ini, kita harus menambahkan item keranjang baru di sini. 111 00:09:20,230 --> 00:09:24,790 Sekarang jika Anda sudah memiliki item dalam keranjang, maka tentu saja kami tidak membuat 112 00:09:24,790 --> 00:09:31,480 item keranjang baru, sebaliknya kami ingin memperbarui yang sudah ada. Jadi saya akan memiliki item keranjang saya yang 113 00:09:31,480 --> 00:09:35,470 diperbarui di sini dan untuk itu, saya masih membuat item 114 00:09:35,800 --> 00:09:46,960 keranjang baru tetapi saya akan mengisinya dengan beberapa data yang ada, misalnya jumlah di sini. Kami memperolehnya dari item negara untuk ID produk yang ditambahkan karena itu seharusnya sudah menjadi bagian dari 115 00:09:46,960 --> 00:09:52,150 item negara, kami memeriksa ini di sini dan ini akan memiliki kunci kuantitas tentu saja 116 00:09:52,150 --> 00:09:57,730 karena item seperti di sini di item saya hanya ketik item keranjang, jadi ia akan memiliki properti 117 00:09:57,730 --> 00:09:58,480 kuantitas dan 118 00:09:58,600 --> 00:10:02,020 kami hanya menambahkan satu untuk itu karena kami menambahkan item 119 00:10:02,080 --> 00:10:09,560 keranjang baru, jadi kami harus menambah ini. Sekarang item keranjang sebagai argumen kedua mengambil harga produk. Maka tentu saja karena kita akan membangun 120 00:10:09,570 --> 00:10:14,540 aplikasi sehingga harga tidak pernah berubah yang akan menambah banyak kerumitan di sini, kita 121 00:10:14,550 --> 00:10:19,860 harus mengelola keranjang dengan cara yang sama sekali berbeda dalam hal ini, kita harus menyimpan setiap 122 00:10:19,890 --> 00:10:25,350 item keranjang sebagai daftar transaksi untuk item kereta ini yang terlalu banyak untuk ini di sini. 123 00:10:25,350 --> 00:10:30,760 Jadi karena ini tidak pernah berubah, karena harga tidak pernah berubah, kita bisa pada akhirnya hanya mengambil 124 00:10:30,760 --> 00:10:36,930 harga prod yang kita dapatkan atau mengambil harga yang sudah kita simpan sebelumnya karena itu lagi tidak akan pernah berubah. 125 00:10:36,930 --> 00:10:42,150 Judul mungkin berubah dan saya ingin menyimpan judul terbaru di sini, jadi saya pasti akan mengambil 126 00:10:42,150 --> 00:10:46,620 salah satu produk yang kami dapatkan di sini, bukan snapshot lama saya dan yang 127 00:10:46,710 --> 00:10:51,480 terakhir, nilai terakhir di sini, jumlah total saya untuk item keranjang ini, yang tentu saja 128 00:10:51,480 --> 00:10:59,520 adalah jumlah saat ini, jadi saya mengakses item status untuk ID di sini, jumlah plus harga produk karena kami menambahkan satu item baru di sini, 129 00:10:59,520 --> 00:11:06,660 kami harus menambahkan harga kali 1 ke jumlah saat ini. Itu item keranjang yang 130 00:11:06,660 --> 00:11:08,570 diperbarui. 131 00:11:08,580 --> 00:11:16,750 Sekarang dengan itu, kita dapat mengembalikan potongan negara baru kita di sini dengan menyalin negara lama dan menyetel item yang sama dan 132 00:11:16,930 --> 00:11:26,460 sekarang penting, ke objek tempat kita menyalin negara. item tapi di mana kita sekarang lagi mengatur tambahProduk. ID dan ya, ini sudah ada tetapi dengan 133 00:11:26,460 --> 00:11:33,310 itu kami hanya menimpanya dengan item keranjang kami yang diperbarui, jadi kami melakukan pembaruan yang sama dengan yang 134 00:11:33,310 --> 00:11:37,070 kami lakukan di sana. Namun sekarang tidak semua 135 00:11:37,100 --> 00:11:40,150 yang perlu kita lakukan, kita perlu mengubah 136 00:11:40,250 --> 00:11:43,750 jumlah total juga karena itu tentu saja berubah. 137 00:11:43,940 --> 00:11:52,420 Jadi ketika kita menambahkan item untuk pertama kalinya, maka jumlah total pada dasarnya harus menjadi jumlah total lama kita, jadi sebutkan 138 00:11:52,430 --> 00:11:57,530 jumlah total ditambah harga produk dan itu sama jika kita menambahkan item ke 139 00:11:57,530 --> 00:12:04,910 keranjang yang ada atau ketika sudah ada di sana karena pada akhirnya, total kami selalu saja total lama 140 00:12:04,910 --> 00:12:10,130 ditambah harga, karena kami selalu menambahkan satu item dari produk itu, begitulah cara 141 00:12:10,130 --> 00:12:12,190 aplikasi ini akan bekerja. 142 00:12:12,200 --> 00:12:14,480 Jadi pernyataan pembaruan kami di sini hampir 143 00:12:14,480 --> 00:12:18,920 sama, satu-satunya hal yang berbeda di sini adalah bagaimana kami membuat item keranjang itu, karena itu 144 00:12:18,920 --> 00:12:24,110 tentu saja kami juga dapat menggunakan kembali kode ini, pindahkan ini dari blok if else dan alih-alih memiliki 145 00:12:24,110 --> 00:12:27,590 dua konstanta berbeda di sini , kita dapat membuat variabel sebelum kita 146 00:12:30,670 --> 00:12:33,150 memasukkan pernyataan if, diperbarui atau item keranjang baru 147 00:12:33,190 --> 00:12:36,990 mungkin, itu bisa menjadi nama karena kita tidak tahu apa yang akan terjadi 148 00:12:37,090 --> 00:12:44,590 di muka dan kemudian di sini di cabang if di sini, kita menetapkan yang diperbarui atau item keranjang baru ke item keranjang yang diperbarui ini, di 149 00:12:44,590 --> 00:12:49,900 sini di sisi lain kami menyetelnya ke item keranjang baru ini dan di sini, kami kemudian selalu menggunakan item 150 00:12:49,930 --> 00:12:54,270 keranjang yang diperbarui atau baru dan dengan itu, kami memiliki beberapa penggunaan kembali kode di 151 00:12:54,400 --> 00:13:00,610 sini dan tidak ulangi diri kita sendiri yang selalu baik. Satu sisi catatan lain, menyalin keadaan di sini 152 00:13:00,610 --> 00:13:04,420 tentu saja selalu berlebihan karena Anda selalu mengatur item dan jumlah total. 153 00:13:04,420 --> 00:13:09,520 Jadi, jika Anda selalu hanya memiliki dua bidang ini di sini dan Anda selalu mengubah keduanya, Anda 154 00:13:09,520 --> 00:13:15,940 tidak perlu menyalin status yang ada, jika Anda pernah memperkenalkan sepotong data lain ke potongan negara Anda di sini yang tidak 155 00:13:15,940 --> 00:13:20,680 Anda ubah di sini namun, Anda harus menyalin kondisi lama agar tidak kehilangan data tambahan 156 00:13:20,680 --> 00:13:21,150 itu. 157 00:13:21,190 --> 00:13:26,470 Oleh karena itu di sini saya akan meninggalkan fungsi penyalinan itu meskipun kita tidak secara teknis membutuhkannya 158 00:13:26,470 --> 00:13:30,750 di sini tetapi jika kita harus mengubah keadaan kita di mana disimpan dan kita 159 00:13:31,030 --> 00:13:34,310 tidak lupa menyalinnya dan karena itu kita kehilangan data. 160 00:13:34,330 --> 00:13:36,190 Yah, ada banyak pekerjaan, dengan 161 00:13:36,190 --> 00:13:38,300 itu kita bisa mulai mengirimkan tindakan 162 00:13:38,320 --> 00:13:42,130 ini dan tentu saja, saya ingin mengirimnya dari tinjauan produk dan detail 163 00:13:42,190 --> 00:13:45,650 produk karena di kedua layar, saya telah menambahkan tombol keranjang. 164 00:13:45,710 --> 00:13:50,890 Jadi mari kita mulai pada layar gambaran umum produk, di sana untuk mengirim 165 00:13:50,890 --> 00:13:52,380 tindakan Redux kita 166 00:13:52,600 --> 00:14:00,880 perlu menyertakan kait pengiriman yang digunakan di sini, dengan itu di sini kita cukup mendapatkan akses ke fungsi pengiriman ini dengan memanggil 167 00:14:00,880 --> 00:14:08,410 menggunakan pengiriman seperti ini dan sekarang ketika kita klik add to gerobak di sana, kami dapat mengirimkan tindakan kami di 168 00:14:08,410 --> 00:14:13,330 sini dan tentu saja dengan cara alih-alih menggunakan fungsi inline di sini, 169 00:14:13,480 --> 00:14:15,930 Anda dapat memiliki fungsi yang disimpan 170 00:14:16,090 --> 00:14:24,700 dalam konstanta terpisah di dalam komponen fungsional Anda di sini, sebagai alternatif, saya akan tetap menggunakan fungsi inline untuk sekarang dan saya akan 171 00:14:24,790 --> 00:14:32,080 mengimpor semua tindakan saya di sini sebagai tindakan keranjang dari folder toko dan di sana, folder tindakan, file keranjang. 172 00:14:32,080 --> 00:14:37,060 Sekarang ini adalah sintaks impor yang menggabungkan semua ekspor dari file menjadi satu objek, kami 173 00:14:37,060 --> 00:14:40,020 hanya memiliki satu ekspor di sini karena itu Anda 174 00:14:40,030 --> 00:14:42,610 juga dapat menargetkan ekspor tertentu, kemudian 175 00:14:42,610 --> 00:14:46,630 kami akan memiliki beberapa ekspor dan karenanya saya akan menggunakan pendekatan ini. 176 00:14:46,630 --> 00:14:49,750 Jadi di sini, kami kemudian mengirim tindakan keranjang. 177 00:14:49,930 --> 00:14:55,400 tambahkan ke troli dan ini adalah fungsi yang harus kita jalankan, ini adalah fungsi pembuat tindakan kita 178 00:14:55,400 --> 00:14:57,050 dan ini sebagai argumen yang 179 00:14:57,430 --> 00:15:05,270 mengambil produk kita, jadi pada akhirnya di sini, kita harus memasukkan itemData. item yang hanya produk kami di sini di layar 180 00:15:05,270 --> 00:15:06,330 detail produk. 181 00:15:06,410 --> 00:15:12,850 Oleh karena itu kami melakukan hal yang sama persis, kami mengimpor menggunakan pengiriman dari React Redux, oleh karena 182 00:15:12,890 --> 00:15:17,560 itu di sini kita bisa mendapatkan akses ke fungsi pengiriman dengan memanggil use 183 00:15:18,050 --> 00:15:23,990 dispatch dan kemudian untuk tombol ini di sini di fungsi inline atau dalam fungsi bernama terpisah 184 00:15:24,440 --> 00:15:26,330 jika Anda suka itu 185 00:15:26,360 --> 00:15:31,490 , Anda dapat memanggil pengiriman, sekarang kami perlu mengimpor tindakan kami dan saya akan 186 00:15:31,490 --> 00:15:42,190 menggunakan sintaks yang sama seperti sebelumnya di mana saya mengimpor semuanya sebagai tindakan keranjang dari folder toko, folder tindakan, file keranjang dan sekarang tindakan keranjang, panggilan tambahkan ke keranjang di 187 00:15:42,190 --> 00:15:48,630 sini dan teruskan produk yang dipilih yang merupakan produk kami yang ingin kami tambahkan ke keranjang di sini. 188 00:15:48,820 --> 00:15:54,190 Mudah-mudahan ini mengirimkan tindakan sedemikian sehingga item ditambahkan ke troli tetapi tentu saja saat ini kami 189 00:15:54,190 --> 00:15:56,040 tidak dapat mengonfirmasi hal ini. 190 00:15:56,110 --> 00:16:04,390 Sebenarnya kita bisa. Anda dapat memutar React Nger debugger dan saya belum pernah menggunakan 191 00:16:04,990 --> 00:16:12,010 ini sebelumnya tetapi di sana, Anda sekarang dapat menekan perintah atau kontrol t untuk membuka tab baru, lalu 192 00:16:15,030 --> 00:16:15,660 konfirmasikan 193 00:16:19,500 --> 00:16:20,520 impor ini 194 00:16:23,560 --> 00:16:30,790 di sini, lalu buka aplikasi Anda dan di sana, buka menu debug pada iOS dengan perintah D, di Android 195 00:16:35,000 --> 00:16:43,990 dengan kontrol atau perintah M dan klik debug Javascript jarak jauh. Sekarang saya membuka di Port 19003 sebenarnya, jadi saya membuka React Native debugger 196 00:16:43,990 --> 00:16:45,290 di port yang 197 00:16:45,300 --> 00:16:52,120 salah, pilih saya lagi tekan perintah T atau kontrol T di debugger dan pilih 19003, gunakan port apa saja 198 00:16:52,120 --> 00:17:00,460 yang terbuka untuk Anda di Chrome, klik konfirmasi dan sekarang ini menghubungkan ke aplikasi Bereaksi Anda yang sedang berjalan di sini di debugger, pastikan 199 00:17:01,210 --> 00:17:05,550 Anda menutup debugger Chrome Anda dan kemudian memuat ulang aplikasi Anda, sekarang 200 00:17:05,590 --> 00:17:09,630 ini harus terhubung di sini dan sekarang Anda tidak hanya dapat 201 00:17:09,640 --> 00:17:11,310 memeriksa aplikasi Anda di sini 202 00:17:11,410 --> 00:17:11,940 seperti 203 00:17:11,980 --> 00:17:17,950 yang saya jelaskan sebelumnya, tidak, Anda juga bisa lihat bagian di sana dan itu adalah debugger Redux 204 00:17:17,950 --> 00:17:22,200 Anda, di sana Anda dapat melihat apa yang Redux lakukan untuk Anda. 205 00:17:22,280 --> 00:17:28,620 Satu-satunya hal yang harus Anda lakukan untuk membuatnya berfungsi adalah menginstal paket baru 206 00:17:28,660 --> 00:17:34,160 dengan instal npm - save dev karena ini adalah ketergantungan pengembangan 207 00:17:34,160 --> 00:17:40,520 yang hanya kita perlukan selama pengembangan dan di sana, instal ekstensi alat Redux dev, 208 00:17:40,650 --> 00:17:44,870 buka aplikasi Anda . File js sesudahnya 209 00:17:47,350 --> 00:17:50,010 dan kemudian impor dari 210 00:17:50,010 --> 00:17:56,280 ekstensi alat Redux dev ini. Anda dapat mengimpor komposisi dengan alat dev dari sana dan itu 211 00:17:56,300 --> 00:18:00,050 adalah fungsi yang Anda berikan untuk membuat store sebagai argumen kedua, Anda dapat 212 00:18:00,090 --> 00:18:03,260 menjalankannya di sana seperti ini. Ngomong-ngomong, ini adalah kode, ini 213 00:18:03,260 --> 00:18:04,530 impor dan penggunaan 214 00:18:04,560 --> 00:18:10,020 ini harus Anda hapus sebelum Anda menyebarkan aplikasi Anda karena ini hanya sesuatu yang harus berjalan 215 00:18:10,020 --> 00:18:14,160 selama pengembangan, bukan di aplikasi produksi Anda, Anda perlu menghapusnya sebelum Anda 216 00:18:14,160 --> 00:18:20,580 menggunakan aplikasi Anda tetapi selama pengembangan, itu baik-baik saja. Dan dengan itu ditambahkan, jika Anda sekarang menyimpan ini, Anda 217 00:18:20,580 --> 00:18:26,940 benar-benar akan melihat bahwa di sini di Inspektur Redux ini, Anda melihat tindakan init dikirim, Anda tidak melihat itu sebelumnya. 218 00:18:26,940 --> 00:18:30,560 Itu tindakan yang secara otomatis dikirim ketika aplikasi Anda mulai. 219 00:18:30,570 --> 00:18:35,670 Jika sekarang saya klik untuk keranjang di sini, Anda juga akan melihat tindakan tambahkan ke 220 00:18:35,670 --> 00:18:41,990 keranjang dan sekarang di sini, Anda dapat melihat detail tentang tindakan itu seperti data yang dilampirkan padanya dan 221 00:18:41,990 --> 00:18:48,120 tentang keadaan Anda di sini dan di sana Anda melihat contoh ini Apakah kondisi produk saya dan di 222 00:18:48,590 --> 00:18:50,380 mana kondisi keranjang saya? 223 00:18:50,670 --> 00:18:54,840 Yah itu tentu saja hilang karena sementara kita memiliki peredam dalam aksi diatur, di app. File js, dalam 224 00:18:54,840 --> 00:18:58,660 reduksi gabungan, kami tidak termasuk status keranjang. 225 00:18:58,740 --> 00:19:07,110 Jadi, ayo impor peredam kereta dari. / StoreReducers / gerobak dan sekarang dengan yang diimpor, kita dapat menambahkannya ke 226 00:19:07,440 --> 00:19:13,890 objek reduksi gabungan kita dan sekarang di sana, kita menambahkan irisan gerobak misalnya, arahkan ke peredam gerobak dan karena 227 00:19:13,890 --> 00:19:20,560 itu sekarang ini dimasukkan ke dalam toko Redux kami. Dengan itu jika Anda sekarang menunggu ini untuk memuat 228 00:19:20,560 --> 00:19:25,830 ulang dan Anda mengklik ke troli lagi, sekarang dalam tindakan add to cart, dalam keadaan, 229 00:19:25,830 --> 00:19:30,960 Anda akan melihat bahwa sekarang ada irisan gerobak dan sekarang Anda melihat ada jumlah total, 230 00:19:30,990 --> 00:19:35,700 Anda melihat ada item dengan kunci P1 yang merupakan produk kami dengan jumlah 1, 231 00:19:35,710 --> 00:19:43,900 harga itu, jumlah ini dan jika saya sekarang klik untuk troli yang kedua kali di sini, ada tindakan lain yang dikirim dan jika kami 232 00:19:43,900 --> 00:19:48,790 memiliki lihat keadaan setelah tindakan ini, kita sekarang melihat, mendinginkan hanya satu item tetapi 233 00:19:48,790 --> 00:19:52,620 sekarang dengan kuantitas dua, harga produk per item adalah ini tetapi 234 00:19:52,630 --> 00:19:54,030 jumlahnya adalah ini. 235 00:19:54,190 --> 00:19:55,120 Ini adalah 236 00:19:55,120 --> 00:19:57,760 baju itu, jika saya sekarang mengirim karpet biru juga, 237 00:19:57,760 --> 00:20:02,590 kita harus menambah keranjang sekali lagi dan di sana di negara bagian, kita sekarang memang 238 00:20:02,590 --> 00:20:04,190 melihat ada dua item di 239 00:20:04,270 --> 00:20:09,930 sana, P1 dan P2, P1 tidak berubah tetapi P2 sekarang ditambahkan dan jumlah total juga terlihat bagus untuk saya. 240 00:20:09,940 --> 00:20:16,150 Jadi ini sepertinya bekerja dan ini adalah bagaimana Anda dapat melihat ke dalam kondisi Redux Anda saat aplikasi Anda berjalan tanpa 241 00:20:16,240 --> 00:20:17,140 mengeluarkannya di sini. 242 00:20:17,140 --> 00:20:21,610 Sekarang tentu saja, kami juga ingin menampilkannya secara visual tetapi ini adalah cara yang bagus untuk 243 00:20:21,610 --> 00:20:25,120 melihat keadaan Anda di balik layar dengan bantuan debugger React Native. 244 00:20:25,120 --> 00:20:30,010 Sekarang kita akan menutupnya di sini karena memperlambat aplikasi sedikit dan karena itu di sini 245 00:20:30,010 --> 00:20:35,230 di menu debug, saya juga akan menghentikan debugging jarak jauh saya dan tutup inspektur di sini sepenuhnya. 246 00:20:35,260 --> 00:20:40,660 Juga kembali dalam aplikasi. File js, saya akan menyingkirkan kompos dengan hal-hal alat dev 247 00:20:40,660 --> 00:20:42,000 di sini sehingga saya 248 00:20:42,070 --> 00:20:47,020 tidak melupakannya nanti tetapi Anda selalu dapat menambahkan ini di sini atau meninggalkannya di sini saat Anda sedang mengembangkan sehingga 249 00:20:47,020 --> 00:20:48,380 Anda dapat melihat ke toko Anda. 250 00:20:48,460 --> 00:20:51,010 Keuntungan utama bagi kami di sini adalah 251 00:20:51,010 --> 00:20:57,280 bahwa ini tampaknya berhasil dan dengan kerja itu, tentu saja kami sekarang dapat bekerja pada menambahkan tombol tindakan di sini 252 00:20:57,280 --> 00:21:03,430 ke header dan memastikan kami dapat pergi ke halaman kereta dari itu atau dengan bantuan itu tombol aksi sehingga 253 00:21:03,430 --> 00:21:06,220 pada halaman keranjang, kami dapat menampilkan informasi keranjang kami.