1 00:00:02,060 --> 00:00:07,190 Jadi di pembuat produk tindakan yang saat ini merupakan fungsi yang hanya mengembalikan suatu tindakan, 2 00:00:07,550 --> 00:00:12,560 kita sekarang dapat men-tweak ini sedikit. Alih-alih mengembalikan suatu tindakan, kita sekarang dapat 3 00:00:12,560 --> 00:00:13,050 mengembalikan 4 00:00:13,070 --> 00:00:18,890 fungsi lain di sana berkat Redux Thunk, berkat paket ini kita dapat melakukan ini sekarang dan ini akan 5 00:00:18,890 --> 00:00:29,650 menjadi fungsi yang menerima fungsi pengiriman sebagai argumen dan kemudian pada gilirannya perlu mengirimkan sebuah tindakan. Jadi di sini, dalam fungsi pengembalian ini, saya sekarang 6 00:00:29,650 --> 00:00:31,100 tidak 7 00:00:31,180 --> 00:00:36,310 perlu mengembalikan ini tetapi mengirimkan tindakan ini, itulah 8 00:00:36,310 --> 00:00:42,090 perbedaan penting dan saya kehilangan kurung kurawal di sini. 9 00:00:42,130 --> 00:00:43,110 Jadi apa yang terjadi? 10 00:00:43,360 --> 00:00:50,230 Saya mengubah membuat produk menjadi fungsi yang sebenarnya masih dapat kami kirim dari dalam komponen kami, tetapi yang sekarang 11 00:00:50,740 --> 00:00:53,500 masih dapat berfungsi seperti sebelumnya, jadi 12 00:00:53,530 --> 00:00:58,870 kami tidak perlu mengubah semua pembuat tindakan ini, sehingga Anda dapat tetap menggunakan sintaks lama 13 00:00:58,870 --> 00:01:03,770 tapi sekarang terima kasih kepada Redux Thunk, sebuah sintaks alternatif sehingga dapat dikatakan 14 00:01:03,970 --> 00:01:10,180 juga didukung di mana fungsi pembuat tindakan ini tidak segera mengembalikan objek tindakan tetapi sebaliknya, di mana 15 00:01:10,180 --> 00:01:15,970 ia mengembalikan suatu fungsi dan jika ya, Redux Thunk akan turun tangan dan memastikan bahwa semuanya 16 00:01:16,510 --> 00:01:22,180 masih berfungsi dan jika ia mengembalikan suatu fungsi, maka ini adalah fungsi yang harus menerima 17 00:01:22,390 --> 00:01:28,390 argumen, fungsi pengiriman yang akan diteruskan secara otomatis oleh Redux Thunk, jadi Redux Thunk pada akhirnya akan 18 00:01:28,390 --> 00:01:28,900 memanggil 19 00:01:29,620 --> 00:01:35,560 fungsi ini untuk Anda dan karenanya Anda dapat kemudian kirim tindakan baru dan di sini, kirim 20 00:01:35,560 --> 00:01:39,680 objek tindakan aktual yang sebelumnya ingin kami kirimkan tetapi sebelum Anda 21 00:01:39,850 --> 00:01:47,170 melakukannya, Anda sekarang dapat menjalankan kode async yang Anda inginkan dan itu akan diizinkan dan tidak akan merusak Redux Anda 22 00:01:47,200 --> 00:01:52,240 mengalir karena Redux Thunk akan membereskan hal ini dan Anda dapat mempelajari lebih lanjut 23 00:01:52,240 --> 00:01:56,020 tentang ini di Kursus Bereaksi saya misalnya atau tentu saja 24 00:01:56,110 --> 00:02:00,340 dalam dokumentasi Redux Thunk resmi, juga dalam dokumen resmi Redux sebenarnya. 25 00:02:00,350 --> 00:02:05,900 Jadi sekarang di sini kita dapat mengirim permintaan HTTP dan di React Native, kita dapat menggunakan 26 00:02:05,900 --> 00:02:08,120 fetch API yang built-in dan fetch 27 00:02:08,120 --> 00:02:12,590 here berfungsi pada dasarnya seperti fetch API di browser tempat ini juga tersedia. 28 00:02:12,590 --> 00:02:17,210 Dibutuhkan URL yang ingin Anda kirimi permintaan dan itulah URL yang kami dapatkan di sini, jadi 29 00:02:17,210 --> 00:02:21,180 saya hanya akan menyalin URL itu dari Firebase dan memasukkannya di sini. 30 00:02:21,380 --> 00:02:24,440 Sekarang mengambil suara sepertinya selalu hanya mengambil 31 00:02:24,440 --> 00:02:30,440 data, jadi jika mendapat data tetapi sebenarnya namanya agak membingungkan di sini, itu tidak hanya digunakan untuk 32 00:02:30,440 --> 00:02:33,950 mendapatkan data, Anda juga dapat menggunakannya untuk mengirim permintaan pos 33 00:02:34,040 --> 00:02:40,640 atau permintaan put, jadi apa saja jenis permintaan HTTP. Sekarang juga kami tidak hanya mengirim permintaan ke URL ini, 34 00:02:40,640 --> 00:02:47,930 tetapi sekarang seperti yang saya katakan, Firebase menerjemahkan permintaan Anda ke jenis permintaan basis data dan struktur basis data, sehingga Anda dapat menambahkan 35 00:02:47,930 --> 00:02:50,990 simpul yang Anda inginkan di sini, setiap segmen yang 36 00:02:50,990 --> 00:02:57,230 Anda inginkan, seperti misalnya produk dan Firebase akan membuat semacam folder di sini di basis data dan menyimpan data 37 00:02:57,230 --> 00:02:58,410 Anda di sana. 38 00:02:58,700 --> 00:03:03,800 Penting dan itu hanya hal spesifik Firebase, Anda perlu menambahkan. json di sini. 39 00:03:03,830 --> 00:03:11,140 Jadi itu tidak diperlukan karena Bereaksi Asli atau karena Javascript atau karena permintaan HTTP, ini 40 00:03:11,140 --> 00:03:15,690 hanya hal khusus Firebase. Secara default, ini akan mengirim 41 00:03:15,700 --> 00:03:21,280 permintaan get tetapi untuk menyimpan data Firebase menginginkan permintaan posting dan mengirimkannya, kita harus memberikan 42 00:03:21,280 --> 00:03:27,610 argumen kedua untuk mengambil yang seharusnya berupa objek Javascript. Dalam argumen kedua itu, Anda dapat mengatur 43 00:03:27,610 --> 00:03:34,480 kunci metode dan mendeskripsikan metode HTTP permintaan ini dan yang dapat diperoleh, diletakkan, dan seterusnya, dan 44 00:03:34,480 --> 00:03:42,070 di sini harus ada pos yang menambahkan produk ini yang akan kami kirim ke simpul ini yang 45 00:03:42,070 --> 00:03:44,130 akan dibuat di sana. 46 00:03:44,140 --> 00:03:47,760 Sekarang Anda juga dapat mengatur beberapa tajuk di sana dan kami 47 00:03:47,920 --> 00:03:53,530 perlu mengatur tajuk, kami perlu menambahkan tajuk tipe konten dan Anda cukup menambahkan tajuk sebagai objek dan kemudian 48 00:03:53,530 --> 00:03:58,950 memiliki pasangan nilai kunci dengan tajuk pengenal tajuk sebagai kunci dan nilainya sebagai nilai dan di sini 49 00:03:59,200 --> 00:04:04,290 nilainya adalah aplikasi / json untuk memberi tahu Firebase bahwa kami akan mengirim beberapa data 50 00:04:04,360 --> 00:04:06,530 JSON dan kemudian kami perlu melakukannya. 51 00:04:06,580 --> 00:04:11,680 Kita perlu menambahkan tubuh dengan data yang ingin kita tambahkan ke permintaan ini dan data harus 52 00:04:11,680 --> 00:04:12,730 dalam format JSON. 53 00:04:12,730 --> 00:04:19,240 Untungnya, React Native mendukung objek JSON yang juga didukung Javascript sisi-browser dan di sana 54 00:04:19,240 --> 00:04:26,440 kita dapat memanggil stringify untuk mengubah array Javascript atau objek menjadi format JSON, jadi menjadi string pada 55 00:04:26,440 --> 00:04:28,040 akhirnya dan di 56 00:04:28,040 --> 00:04:33,210 sana, saya ingin menambahkan produk saya. Jadi pada akhirnya, saya ingin 57 00:04:33,210 --> 00:04:37,420 merangkai objek di sini yang memegang judul saya, deskripsi saya, 58 00:04:39,100 --> 00:04:42,100 imageUrl saya dan harga saya, bukan ID 59 00:04:42,100 --> 00:04:47,830 karena sebenarnya Firebase akan menghasilkan ID untuk kami di sini yang benar-benar nyaman. 60 00:04:49,070 --> 00:04:54,610 Sekarang ini akan mengirimkan permintaan tetapi tentu saja saya hanya ingin membuat produk secara lokal 61 00:04:54,820 --> 00:05:00,490 jika permintaan itu berhasil karena saya sebenarnya dapat juga menggunakan ID yang dibuat secara otomatis 62 00:05:00,490 --> 00:05:08,410 yang Firebase akan kembali kepada saya dan mengambil dengan mudah mengembalikan janji, yang merupakan objek Javascript ini yang pada akhirnya akan menentukan 63 00:05:08,410 --> 00:05:12,620 nilai di masa mendatang atau membuat kesalahan di masa depan. 64 00:05:12,940 --> 00:05:19,290 Jadi untuk menunggu tanggapan ini, kita dapat menambahkan kemudian di sini setelah mengambil, jadi pada janji 65 00:05:19,290 --> 00:05:26,170 ini dan kita akan mendapatkan tanggapan kita di sini sehingga kita dapat melakukan apa saja dengan tanggapan tersebut. 66 00:05:26,190 --> 00:05:31,200 Anda juga dapat mendengarkan kesalahan dengan tangkapan dan itu adalah sesuatu yang 67 00:05:31,200 --> 00:05:33,290 seharusnya sudah Anda ketahui 68 00:05:33,300 --> 00:05:39,900 karena janji tidak spesifik Bereaksi asli, itu vanila Javascript dan Bereaksi Asli juga mendukung async yang 69 00:05:39,900 --> 00:05:46,270 lebih modern, menunggu sintaks daripada menunggu dan menangkap. Untuk menggunakannya, Anda menambahkan async di sini di depan fungsi 70 00:05:46,290 --> 00:05:53,700 Anda, kata kunci async ini dan sekarang Anda dapat menunggu respons Anda di sini dan menyimpannya dalam konstanta dengan sintaks ini, dengan 71 00:05:53,700 --> 00:05:55,400 kata kunci yang menunggu. 72 00:05:55,410 --> 00:05:59,520 Sekarang di belakang layar, ini mengubah ini ke sintaks lama dengan itu, jadi 73 00:05:59,580 --> 00:06:05,640 ini seperti jika Anda menambahkan kemudian di sini dan Anda menggunakan respons Anda dalam panggilan balik yang Anda dapatkan di sana. 74 00:06:05,640 --> 00:06:09,480 Tapi ini sedikit lebih mudah dibaca karena itulah saya akan menggunakan sintaks menunggu async 75 00:06:09,480 --> 00:06:17,160 ini, hanya perlu menyadari fakta bahwa ini seperti menambahkan kemudian, hanya lebih mudah dibaca. Ketika Anda menggunakan async yang menunggu, fungsi ini di 76 00:06:17,160 --> 00:06:22,770 sini akan selalu secara otomatis memberikan janji, oleh karena itu seluruh fungsi produk 77 00:06:22,770 --> 00:06:23,780 yang 78 00:06:23,820 --> 00:06:25,880 dibuat ini sekarang mengembalikan janji. 79 00:06:26,010 --> 00:06:27,330 Itu tidak melakukan itu 80 00:06:27,330 --> 00:06:28,300 sebelumnya, sekarang 81 00:06:28,350 --> 00:06:33,040 akan, Anda lihat di sini, sekarang kembali janji. Jadi itulah tanggapan kami, 82 00:06:34,280 --> 00:06:38,960 respons ini sekarang bisa dibongkar untuk mendapatkan data di sana, jadi 83 00:06:39,140 --> 00:06:45,430 data tanggapan, yang dilakukan dengan memanggil respons. json, itulah metode yang tersedia pada 84 00:06:45,430 --> 00:06:50,730 objek respons yang kita peroleh. Ini lagi adalah tugas async yang harus kami 85 00:06:51,050 --> 00:06:56,910 tunggu dan sekarang ini pada akhirnya akan memberi kami data yang dikembalikan oleh Firebase ketika kami menambahkan produk. 86 00:06:56,920 --> 00:07:03,620 Sekarang kita dapat untuk sekarang cukup mencatat data respons itu untuk melihat apa yang ada di sana dan saya masih mengirimkan 87 00:07:03,620 --> 00:07:09,320 tindakan saya di sini tetapi karena kami telah menunggu di sini dan oleh karena itu seperti dalam beberapa 88 00:07:09,320 --> 00:07:13,520 blok maka ini hanya akan dikirim setelah operasi ini di sini selesai 89 00:07:13,520 --> 00:07:19,190 Jadi dengan itu, mari kita simpan ini dan mari kita tambahkan produk baru dengan pergi ke bagian 90 00:07:19,190 --> 00:07:21,580 admin di sini dan kemudian saya akan 91 00:07:21,830 --> 00:07:24,820 menambahkan kemeja putih, saya memilih imageUrl yang bagus untuk 92 00:07:24,820 --> 00:07:26,320 itu, ini dia. 93 00:07:26,320 --> 00:07:34,510 Katakanlah harganya 39. 99, ini adalah kemeja putih yang cukup gaya. 94 00:07:34,510 --> 00:07:39,110 Jika saya sekarang menyimpan ini, perlu memuat ini dulu, sekarang ini ditambahkan, ini dia dan 95 00:07:39,110 --> 00:07:40,130 sekarang jika Anda 96 00:07:40,130 --> 00:07:41,130 melihat Firebase, 97 00:07:41,210 --> 00:07:46,310 kami juga melihat bahwa sekarang ada simpul produk. Di sana, ini adalah ID unik ini dan 98 00:07:46,310 --> 00:07:50,430 di sana kami memiliki data yang kami kirimkan dan jika Anda melihat konsol 99 00:07:50,620 --> 00:07:53,440 Anda, Anda lihat inilah yang kami dapatkan, itulah data 100 00:07:53,440 --> 00:07:55,100 respons ini di sini. 101 00:07:55,120 --> 00:08:01,780 Ini memegang kunci nama dan kemudian juga memegang ID ini yang dihasilkan Firebase, ini berarti bahwa ketika kami mengirim data kami di sini, 102 00:08:01,780 --> 00:08:08,670 kami benar-benar dapat menambahkan kunci ID di sini dan menambahkan resData. nama untuk mengakses kunci nama ini 103 00:08:08,720 --> 00:08:14,800 pada respons balasan oleh Firebase untuk meneruskan ID yang dihasilkan sisi-server 104 00:08:14,800 --> 00:08:21,330 pada akhirnya kami membuat produk peredam atau ke logika yang berjalan di peredam. 105 00:08:21,340 --> 00:08:28,960 Jadi sekarang di peredam produk, kita sebenarnya tidak dapat menggunakan ID dummy ini di sini, 106 00:08:28,960 --> 00:08:36,530 tetapi sebaliknya, berharap pada data produk kami. Di sana kita sekarang mendapatkan bidang ID yang merupakan ID yang dihasilkan 107 00:08:36,530 --> 00:08:43,430 sisi-server, saya akan tetap berpegang pada ID pengguna dummy untuk saat ini, tetapi kita akan mendapatkan ID yang dihasilkan sisi-server ini di sini dan 108 00:08:43,430 --> 00:08:48,910 ini dia dan oleh karena itu, kita menggunakan ini pada frontend juga yang akan penting untuk nanti ketika kita 109 00:08:48,920 --> 00:08:50,600 juga menghapus barang dan sebagainya. 110 00:08:50,630 --> 00:08:55,460 Jadi ini menambahkan produk tetapi tentu saja begitu kita memuat ulang aplikasi, itu hilang karena dalam aplikasi, itu 111 00:08:55,460 --> 00:08:56,810 hanya disimpan dalam memori. 112 00:08:56,810 --> 00:09:01,190 Sekarang kita juga menyimpannya di server tetapi kita tidak pernah mengambilnya dari server, jadi 113 00:09:01,220 --> 00:09:03,170 mari kita pastikan kita melakukannya juga.