1 00:00:02,260 --> 00:00:08,030 Untuk memastikan bahwa kami juga dapat memiliki pesanan di aplikasi ini, kami akan mengulangi sesuatu yang kami lakukan 2 00:00:08,050 --> 00:00:13,940 sebelumnya, kami akan bekerja pada layar pesanan dan kami akan bekerja pada logika Redux kami sehingga kami dapat menyimpan pesanan. 3 00:00:14,020 --> 00:00:15,980 Jadi saya akan 4 00:00:16,060 --> 00:00:22,060 mulai dengan menambahkan peredam baru, pesanan. File js yang menyimpan peredam pesanan kami dan tentu saja kami juga akan memerlukan file 5 00:00:22,060 --> 00:00:26,280 tindakan tempat kami mengelola tindakan terkait pesanan kami, pesanan. File js juga. 6 00:00:27,010 --> 00:00:33,910 Jadi mari kita mulai dengan pesanan. File reduksi js di sini dan lagi seperti biasa, kita 7 00:00:33,910 --> 00:00:41,020 akan ingin memiliki beberapa keadaan awal di sini yang juga jenis mendefinisikan bagaimana data kita dibentuk di sana dan pesanan akan sangat 8 00:00:41,020 --> 00:00:42,640 sederhana dalam aplikasi ini, 9 00:00:42,640 --> 00:00:46,660 itu hanya akan menjadi array pesanan , itu benar-benar yang kita butuhkan. 10 00:00:47,390 --> 00:00:53,630 Kemudian kita dapat mengekspor fungsi default di sini yang merupakan peredam kami, yang tentu saja memiliki keadaan yang diinisialisasi 11 00:00:53,630 --> 00:01:00,830 dengan keadaan awal, yang menerima tindakan dan yang tentu saja semua ditangani oleh Redux dan kami mengembalikan negara kami di sini 12 00:01:00,830 --> 00:01:01,520 tetapi 13 00:01:01,520 --> 00:01:07,580 tentu saja biasanya, kami juga kemudian ingin mengaktifkan jenis tindakan dan menangani beberapa kasus berbeda di sini, 14 00:01:08,300 --> 00:01:13,350 jadi kami sudah dapat menambahkan pernyataan beralih ini. Sekarang mengenai kasus yang ingin 15 00:01:13,380 --> 00:01:19,130 kami tangani, tindakan yang ingin kami tangani, ada satu tindakan yang ingin saya 16 00:01:19,130 --> 00:01:26,500 tangani saat ini dan itu adalah tindakan menambahkan pesanan saya, jadi menambahkan pesanan juga terlihat seperti pengidentifikasi 17 00:01:26,510 --> 00:01:34,390 pas dan kemudian saya akan mengekspor tambahkan pembuat tindakan pesanan di sini yang seharusnya menerima dua hal sekarang - 18 00:01:34,910 --> 00:01:40,450 item keranjang saya atau item yang menjadi bagian dari pesanan tetapi ini adalah 19 00:01:40,550 --> 00:01:47,180 item keranjang saya akhir dan tentu saja jumlah total dan itu tentu saja semua data 20 00:01:47,180 --> 00:01:52,550 yang kita miliki di keranjang pada akhirnya, kita berhasil dalam kereta, kan? 21 00:01:52,550 --> 00:01:58,760 Kami memiliki jumlah total gerobak dan kami memiliki item dari gerobak dan karena kami memesan seluruh gerobak 22 00:01:58,760 --> 00:02:03,380 kami, tentu saja masuk akal bahwa data ini berakhir dalam urutan. 23 00:02:03,520 --> 00:02:08,900 Sekarang di sini di pembuat tindakan, oleh karena itu kami mengembalikan objek 24 00:02:08,900 --> 00:02:17,240 tindakan baru kami dan objek tindakan ini memiliki jenis yang menambahkan pesanan dan kemudian misalnya kunci data pesanan tempat kami menggabungkan 25 00:02:17,240 --> 00:02:23,270 item keranjang kami, menyimpannya di properti item keranjang dan kemudian jumlah memegang jumlah total misalnya. 26 00:02:23,270 --> 00:02:29,660 Sekarang terserah Anda apakah Anda meneruskan ini dalam satu properti data pesanan gabungan atau jika Anda memiliki dua 27 00:02:30,140 --> 00:02:33,690 properti atau lebih sebagai bagian dari objek tindakan Anda. 28 00:02:33,720 --> 00:02:37,710 Ini aksinya, kembali ke peredam, apa yang harus terjadi ketika kita mendapatkan pesanan? 29 00:02:38,580 --> 00:02:45,040 Yah saya ingin membuat objek pesanan baru dan untuk ini, seperti sebelumnya, saya akan bekerja dengan model saya sendiri. 30 00:02:45,090 --> 00:02:52,110 Jadi mari kita pergi ke folder model dan di sana, tambahkan pesanan. File js di mana kami memiliki perintah kelas yang akan 31 00:02:52,110 --> 00:02:52,800 saya 32 00:02:52,830 --> 00:02:58,890 ekspor sehingga saya tidak lupa lagi dan di sana, kami mendapatkan konstruktor yang memungkinkan kami membuat pesanan baru. 33 00:02:58,890 --> 00:03:04,700 Sekarang bagaimana seharusnya sebuah pesanan? Pesanan harus memiliki ID tentu saja, yang bukan 34 00:03:04,770 --> 00:03:10,970 ID produk karena tentu saja kami dapat memesan produk yang sama beberapa kali dan karenanya, pesanan benar-benar terpisah. 35 00:03:11,040 --> 00:03:13,650 Selain itu, pesanan dapat menampung lebih dari satu 36 00:03:13,650 --> 00:03:16,380 produk, pada akhirnya kami memesan seluruh gerobak kami di sana. 37 00:03:16,380 --> 00:03:18,570 Jadi pesanan memiliki ID 38 00:03:18,750 --> 00:03:26,160 mandiri, itu akan mendapatkan barang, jumlah total dan pesanan juga perlu tanggal tentu saja karena ketika kami melakukan 39 00:03:26,160 --> 00:03:29,430 pemesanan, kami ingin menyimpan tanggal itu ketika dibuat. 40 00:03:29,940 --> 00:03:31,500 Dan kemudian saya akan menyimpan 41 00:03:31,500 --> 00:03:42,160 semua data itu, dapatkan ID saya, dapatkan barang saya di sini, dapatkan jumlah totalnya dan juga dapatkan tanggalnya. Dengan itu mari kita kembali ke peredam, ke peredam pesanan dan melihat apa 42 00:03:42,170 --> 00:03:49,310 yang bisa kita lakukan dengan pesanan di sana. Di sana, saya ingin menangani case add 43 00:03:49,340 --> 00:03:53,260 order sekarang yang merupakan satu-satunya tindakan yang saya miliki. 44 00:03:53,270 --> 00:04:01,140 Jadi, Anda perlu mengimpor pengidentifikasi tindakan ini tentu saja dan di sana, saya ingin membuat pesanan baru, menyimpannya dalam konstanta 45 00:04:01,160 --> 00:04:01,820 pesanan 46 00:04:01,820 --> 00:04:07,960 baru dengan model pesanan yang baru saja kami buat yang karena itu Anda juga harus mengimpor. 47 00:04:08,030 --> 00:04:14,030 Sekarang dengan kata kunci baru, kita dapat membuat objek Javascript baru berdasarkan kelas itu dan di sana, kita 48 00:04:14,180 --> 00:04:17,330 memerlukan ID, item, jumlah total dan tanggal yang dibuat. 49 00:04:17,330 --> 00:04:23,040 Sekarang kami hanya mendapatkan barang dan jumlah total sebagai bagian dari tindakan kami di sini seperti yang Anda tahu. 50 00:04:23,240 --> 00:04:28,630 Sekarang ID adalah sesuatu yang nantinya akan kita hasilkan secara dinamis di 51 00:04:28,640 --> 00:04:36,530 server, untuk saat ini, saya akan menggunakan ID unik palsu palsu dengan tanggal baru untuk string, tanggal tentu saja 52 00:04:36,560 --> 00:04:42,140 adalah objek Javascript built-in dan ini pada akhirnya menghasilkan ID yang agak unik. 53 00:04:42,140 --> 00:04:48,230 Secara teknis, kami dapat membuat dua pesanan pada stempel waktu yang sama persis, pada milidetik yang sama persis, meskipun di 54 00:04:48,230 --> 00:04:52,340 aplikasi kami tempat kami membersihkan keranjang setelah menekan tambah pesanan atau pesanan sekarang, 55 00:04:52,340 --> 00:04:54,230 ini tidak akan benar-benar mungkin. 56 00:04:54,230 --> 00:04:57,470 Jadi ini adalah ID boneka yang baik untuk saat ini, itu 57 00:04:57,470 --> 00:04:59,050 harus berupa string sehingga itu 58 00:05:00,110 --> 00:05:06,170 penting dan selain itu, item tentu saja, yang dapat disimpan. Kami mendapatkan ini pada tindakan kami, benar, 59 00:05:06,170 --> 00:05:10,770 tindakan memiliki properti data pesanan ini dan di sana, kami akan memiliki item. 60 00:05:11,060 --> 00:05:16,580 Jadi data pesanan tindakan. item memberi kita item dan untuk jumlah total, kita dapat 61 00:05:16,580 --> 00:05:17,280 menggunakan tindakan. 62 00:05:17,330 --> 00:05:20,250 data pesanan. 63 00:05:20,450 --> 00:05:23,810 dan kemudian di sana, kita memiliki properti jumlah ini yang dapat 64 00:05:23,810 --> 00:05:25,650 kita ekstrak, sehingga kita dapat menggunakannya. 65 00:05:25,850 --> 00:05:31,700 Terakhir tetapi tidak kalah pentingnya untuk tanggal tersebut, saya tentu saja ingin membuat timestamp di sini 66 00:05:31,700 --> 00:05:37,730 dengan tanggal baru, konstruktor Javascript bawaan ini, jika kita menjalankannya seperti ini memberi kita cap waktu saat 67 00:05:37,940 --> 00:05:41,060 ini yang disimpan dalam objek Javascript pada akhirnya. 68 00:05:41,060 --> 00:05:46,700 Sekarang pesanan baru ini hanya perlu ditambahkan ke susunan pesanan kami, jadi kami mengembalikan snapshot keadaan baru di 69 00:05:47,000 --> 00:05:48,960 sini tempat kami menyalin keadaan lama, 70 00:05:49,010 --> 00:05:53,650 sekali lagi kami tidak benar-benar memiliki keadaan lain di sini, jadi menyalinnya adalah mubazir 71 00:05:53,750 --> 00:05:55,410 jika kami mengganti Bagaimanapun 72 00:05:55,460 --> 00:06:01,160 juga, jika Anda memiliki snapshot keadaan yang lebih kompleks di sini untuk potongan toko Redux Anda ini, Anda 73 00:06:01,160 --> 00:06:04,550 ingin memastikan Anda menyalin keadaan lain sehingga Anda tidak kehilangan itu. 74 00:06:04,550 --> 00:06:11,510 Itu sebabnya saya menambahkannya di sini dan kemudian saya menetapkan pesanan sama dengan perintah negara dan sekarang memanggil concat pada array 75 00:06:11,510 --> 00:06:17,450 ini yang merupakan fungsi Javascript built-in yang menambahkan item baru ke array dan mengembalikan array baru yang 76 00:06:17,450 --> 00:06:18,530 mencakup item itu. 77 00:06:18,560 --> 00:06:24,040 Jadi array lama tetap tidak tersentuh, array baru dikembalikan dan tentu saja memungkinkan kita untuk memperbarui ini dengan cara yang 78 00:06:24,040 --> 00:06:29,450 tidak berubah di mana kita tidak pernah menyentuh data asli tetapi kita menetapkan negara baru dengan membuat array baru yang 79 00:06:29,450 --> 00:06:36,590 mencakup objek baru dan di sana saya hanya menggabungkan pesanan baru saya. Dengan itu, kita 80 00:06:36,770 --> 00:06:45,590 bisa masuk ke aplikasi. File js dan mengimpor peredam pesanan di sana dari folder 81 00:06:45,590 --> 00:06:52,040 store, folder reduksi dan di sana, pesanan. File js tentu saja dan menggabungkannya ke 82 00:06:52,100 --> 00:06:57,750 dalam peredam root kami, mungkin dengan pengidentifikasi pesanan dan kemudian menunjuk pada peredam pesanan. 83 00:06:57,780 --> 00:07:04,160 Sekarang ini harus tersedia dan sekarang kita dapat mengirimkan tindakan, yaitu di sini tindakan pesanan tambahan kami 84 00:07:04,230 --> 00:07:11,740 dan tentu saja memasuki bagian slice dan dapatkan pesanan kami. Tindakan pengiriman adalah hal pertama yang ingin saya 85 00:07:11,740 --> 00:07:18,220 lakukan, saya ingin melakukannya dari dalam layar keranjang ketika kami menekan tombol pesanan sekarang. 86 00:07:18,220 --> 00:07:19,990 Saat ini kami tidak melakukan apa-apa 87 00:07:20,020 --> 00:07:26,790 di sana, sekarang tujuannya adalah untuk melakukan pemesanan dan juga membersihkan keranjang kami. Jadi di sini, di layar keranjang, 88 00:07:26,800 --> 00:07:33,270 kami sudah melakukan impor menggunakan pengiriman dan kami menjalankannya sehingga kami memiliki fungsi pengiriman. 89 00:07:33,340 --> 00:07:45,490 Yang perlu kita lakukan adalah kita perlu mengimpor semuanya sebagai tindakan pesanan dari pesanan tindakan toko dan oleh karena itu saya akan menamai 90 00:07:45,520 --> 00:07:50,140 tindakan pesanan ini menjadi sangat tepat dan sekarang 91 00:07:50,290 --> 00:07:57,450 di sini ketika kita mengklik tombol ini, tombol pesanan sekarang, kita dapat menjalankan 92 00:07:57,450 --> 00:08:05,500 fungsi dan dalam fungsi ini, kami mengirimkan tindakan Redux, tindakan pesanan, tambahkan pesanan dengan pembuat 93 00:08:05,580 --> 00:08:10,500 tindakan ini. Sekarang di sana kita harus melewati dua hal - item keranjang dan jumlah total. Tentu saja keduanya 94 00:08:10,500 --> 00:08:16,680 tersedia di sini, jumlah total disimpan dalam jumlah total keranjang konstan, item keranjang ada di 95 00:08:16,680 --> 00:08:23,580 sini, jadi kami hanya meneruskan ini, kami meneruskan jumlah total keranjang dan yang seharusnya menjadi argumen 96 00:08:23,580 --> 00:08:32,420 kedua, sehingga sebagai argumen pertama, sebenarnya item keranjang, seperti ini. Sekarang harap dicatat bahwa dengan itu tentu saja, saya meneruskan item keranjang, saya 97 00:08:32,430 --> 00:08:37,620 menyimpan item keranjang yang ada dalam array dan tidak dalam format yang saya miliki di toko 98 00:08:37,620 --> 00:08:40,310 keranjang Redux saya. Di sana, saya 99 00:08:40,380 --> 00:08:48,130 memang punya objek tetapi menyimpan array item keranjang seperti itu dalam urutan harus benar-benar baik-baik saja, jadi tidak 100 00:08:48,130 --> 00:08:48,900 perlu 101 00:08:48,970 --> 00:08:52,500 untuk mendapatkan objek yang tidak berubah juga, saya 102 00:08:52,510 --> 00:08:53,340 akan tetap 103 00:08:53,340 --> 00:08:56,690 berpegang pada array yang sekarang saya simpan. 104 00:08:56,720 --> 00:08:58,460 Jadi sekarang kita kirim ini, untuk melihatnya, 105 00:08:58,460 --> 00:09:00,860 kita sekarang perlu menambahkan layar pesanan dan untuk itu, 106 00:09:00,980 --> 00:09:06,140 saya juga ingin menambahkan tombol menu dan laci yang memungkinkan kita untuk sampai ke sana sebagai alternatif untuk layar 107 00:09:06,140 --> 00:09:07,520 toko kami di sini.