1 00:00:02,200 --> 00:00:06,570 Sebelum kita melanjutkan dengan memperbarui atau mengedit data atau menghapusnya, mari kita pastikan 2 00:00:06,680 --> 00:00:10,810 juga bahwa pada awalnya kita tidak melihat data dummy tetapi kita benar-benar 3 00:00:10,810 --> 00:00:16,660 melihat pemintal pemuatan dan mungkin juga pesan jika tidak ada data yang akan dimuat atau pesan kesalahan 4 00:00:16,840 --> 00:00:19,810 jika kita memiliki kesalahan dan untuk itu, mari kita 5 00:00:19,810 --> 00:00:23,400 mulai dengan pemintal pemuatan. Pada layar ikhtisar produk, di sana 6 00:00:23,470 --> 00:00:28,270 saya ingin menampilkan pemintal pemuatan sementara kami menunggu data tiba. Untuk itu kita pertama-tama perlu tahu 7 00:00:28,270 --> 00:00:32,430 apakah kita memuat atau tidak dan kita dapat mengontrolnya dengan status penggunaan, 8 00:00:32,440 --> 00:00:34,850 jadi dengan keadaan internal dalam komponen ini. 9 00:00:35,140 --> 00:00:42,910 Jadi di sana, kita dapat menambahkan isLoading dan mengatur isLoading dan kemudian cukup gunakan status di sini seperti ini dan pada awalnya kita tidak 10 00:00:42,910 --> 00:00:45,890 memuat, jadi saya mengatur status awal ke false 11 00:00:46,630 --> 00:00:51,610 dan sekarang di sini ketika kita mengirim ini, jadi di sini dalam efek penggunaan, saya atur 12 00:00:51,610 --> 00:00:56,130 IsLoading ke true tentu saja tetapi begitu kita selesai, saya ingin mengembalikannya ke false. 13 00:00:56,170 --> 00:01:03,610 Sekarang hal yang baik adalah pengiriman di sini mengirimkan tindakan mengambil produk kami dan oleh karena itu ini di sini memberi kita janji 14 00:01:03,610 --> 00:01:04,780 sebenarnya, jadi di 15 00:01:04,840 --> 00:01:10,690 sini saya dapat menambahkan kemudian dan juga menangkap kemudian untuk penanganan kesalahan untuk melakukan sesuatu setelah ini dilakukan. 16 00:01:10,870 --> 00:01:15,670 Anda juga dapat menggunakan async menunggu tetapi tidak diizinkan menggunakannya seperti 17 00:01:15,670 --> 00:01:20,910 ini di sini dalam efek penggunaan, itu bukan hanya bagaimana penggunaan efek harus digunakan. 18 00:01:20,910 --> 00:01:25,910 Jadi jika Anda ingin menggunakan async di sini, Anda harus membungkus ini menjadi 19 00:01:25,910 --> 00:01:32,720 fungsi terpisah yang harus Anda buat di efek Anda, seperti memuat produk yang hanya fungsi pembungkus dummy yang 20 00:01:32,720 --> 00:01:37,350 terlihat seperti ini, mungkin dengan set isLoading in di sana juga. 21 00:01:37,350 --> 00:01:43,530 Sekarang di sini Anda dapat menambahkan async dan sekarang kemudian Anda dapat memanggil memuat produk seperti itu setelahnya, 22 00:01:43,530 --> 00:01:46,530 cukup pembungkus yang diperlukan karena cara penggunaan efek bekerja, 23 00:01:46,530 --> 00:01:48,260 itu tidak boleh mengembalikan 24 00:01:48,300 --> 00:01:54,030 janji, itu akan melakukannya jika Anda menggunakan async di sini dan oleh karena itu, menggunakan async tidak 25 00:01:54,030 --> 00:01:55,940 diperbolehkan, ini di sisi lain diperbolehkan. 26 00:01:55,950 --> 00:01:57,520 Jadi sekarang di sini, 27 00:01:57,540 --> 00:02:03,060 kita dapat menggunakan menunggu di sini untuk menunggu pengiriman ini dilakukan, yang berarti ini akan secara 28 00:02:03,060 --> 00:02:08,670 otomatis menunggu janji yang ada di sana, jadi untuk permintaan HTTP dan setelah itu kita mengatur isLoading 29 00:02:08,670 --> 00:02:10,300 ke false setelah ini selesai. 30 00:02:10,710 --> 00:02:16,380 Sekarang untuk menunjukkan seorang pemintal, untungnya React Native punya satu untuk kita, indikator aktivitas yang secara otomatis 31 00:02:16,380 --> 00:02:18,810 akan terlihat bagus untuk iOS dan 32 00:02:18,840 --> 00:02:21,950 Android, jadi itu akan secara otomatis mendapatkan gaya platform default 33 00:02:22,320 --> 00:02:27,630 dan sekarang kita dapat merendernya jika kita memuat. Jadi, bukannya mengembalikan daftar datar, 34 00:02:27,630 --> 00:02:34,740 jika isLoading benar, saya akan mengembalikan potongan jsx yang berbeda, saya akan mengembalikan tampilan baru 35 00:02:34,740 --> 00:02:42,040 di sini dengan indikator aktivitas saya di sana. Untuk itu tentu saja, Anda juga perlu melihat impor, jadi pastikan ini juga tersedia. 36 00:02:44,480 --> 00:02:49,370 Sekarang dengan itu kami mengembalikan tampilan ini dengan indikator aktivitas, di sana 37 00:02:49,380 --> 00:02:58,310 Anda dapat mengatur ukuran menjadi besar dan warna menjadi Warna. primer untuk contoh dan ini tentu saja mengharuskan Anda untuk memiliki warna 38 00:02:58,310 --> 00:03:05,830 konstan yang diimpor, jadi pastikan yang tersedia dan yang tak kalah pentingnya, sekarang saya ingin memusatkan indikator ini, jadi di sini kita 39 00:03:05,830 --> 00:03:10,960 dapat menambahkan gaya yang tentu saja dapat kita atur dengan stylesheet atau di sini cepat 40 00:03:11,020 --> 00:03:18,880 dan kotor, lenturkan yang membenarkan pusat konten, sejajarkan pusat item. Namun sebenarnya saya akan menggunakan stylesheet di sini 41 00:03:18,880 --> 00:03:23,010 karena kita akan membutuhkannya di tempat yang berbeda nanti juga. 42 00:03:23,110 --> 00:03:33,450 Jadi di sini saya akan merujuk ke gaya katakanlah berpusat dan mengimpor stylesheet dari React Native 43 00:03:33,450 --> 00:03:41,640 dan dengan itu, kemudian pergi ke sana, tambahkan objek gaya saya setelah mengatur 44 00:03:41,640 --> 00:03:50,890 opsi navigasi mungkin, gaya dengan Stylesheet. buat, tambahkan properti terpusat di sana yang memiliki gaya ini dengan 45 00:03:50,890 --> 00:03:57,450 fleksibel membenarkan item menyelaraskan konten dan sekarang dengan itu, kita akan melihat indikator aktivitas terpusat saat kita memuat. 46 00:03:57,570 --> 00:04:03,790 Jadi jika saya menyimpan ini dan ini dimuat kembali, Firebase sangat cepat sehingga Anda tidak melihatnya selama itu tetapi untuk waktu 47 00:04:03,790 --> 00:04:09,580 yang singkat, Anda melihat pemuatan pemintal di sini, dengan tampilan yang berbeda pada iOS dan Android tentu saja. 48 00:04:12,900 --> 00:04:19,110 Sekarang tentu saja memuat adalah satu hal, kadang-kadang Anda juga tidak punya data yang bisa dimuat. Katakanlah dalam 49 00:04:19,110 --> 00:04:25,740 peredam, kami menjangkau produk. json yang merupakan sumber di mana tidak ada data dapat 50 00:04:25,740 --> 00:04:28,750 diambil dan karena itu kita berakhir dengan layar kosong. 51 00:04:29,150 --> 00:04:32,920 Ya itu sesuatu yang bisa kita lakukan tetapi itu bukan pengalaman 52 00:04:33,060 --> 00:04:39,540 pengguna terbaik, jadi saya ingin menambahkan yang lain jika memeriksa di mana saya memeriksa apakah Memuat tidak benar, jadi 53 00:04:41,530 --> 00:04:48,190 jika kita tidak memuat lagi dan produk saya di sini, panjangnya sama dengan nol yang berarti kami tidak memiliki produk. 54 00:04:48,190 --> 00:04:54,340 Dalam hal ini, saya juga akan mengembalikan konten terpusat saya di sini tetapi di sana saya hanya 55 00:04:54,340 --> 00:04:58,230 ingin menampilkan teks di mana saya mengatakan tidak ada produk yang 56 00:04:58,240 --> 00:05:08,530 ditemukan, mungkin mulai menambahkan beberapa dan untuk itu tentu saja, Anda perlu memastikan Anda mengimpor komponen teks dan Anda juga dapat menetapkan gaya font Anda di sana atau membuat 57 00:05:08,530 --> 00:05:15,880 komponen pembungkus teks default yang kami gunakan dalam modul sebelumnya, untuk saat ini saya hanya akan memiliki teks saya seperti ini 58 00:05:15,880 --> 00:05:17,140 dan ini memang 59 00:05:17,140 --> 00:05:22,900 yang kita lihat di sana untuk saat ini. Tentu saja begitu saya beralih kembali ke 60 00:05:22,900 --> 00:05:31,360 URL yang benar di mana kami benar-benar menemukan data, itu berfungsi. Sekarang, last but not least, Anda juga bisa 61 00:05:31,360 --> 00:05:33,680 memiliki kesalahan. Katakanlah di sini, saya 62 00:05:33,700 --> 00:05:35,850 tidak punya. json di 63 00:05:35,860 --> 00:05:41,610 sana, tentu saja itu adalah kesalahan yang biasanya akan kita hindari karena itu hanya kesalahan ketik 64 00:05:41,620 --> 00:05:48,010 di pihak kita tetapi sayangnya server Firebase relatif kuat. Jadi untuk memalsukan bahwa mereka misalnya turun atau ada yang salah, 65 00:05:48,010 --> 00:05:48,520 saya 66 00:05:48,550 --> 00:05:54,850 hanya akan memecah URL dengan cara ini yang merupakan URL tidak valid dan sekarang apa yang kita lihat adalah pemintal tak terbatas. 67 00:05:55,120 --> 00:06:04,340 Alasan untuk itu adalah bahwa sebenarnya kita sekarang tidak memiliki respons yang valid. Jadi jika kita melihat tindakan kita di sini dan kita konsol 68 00:06:04,340 --> 00:06:10,490 mencatat data respons ini di sini, kita melihat bahwa saat ini dimuat ulang, pengambilan akan 69 00:06:14,420 --> 00:06:16,220 terjadi segera, tetapi kita tidak 70 00:06:19,170 --> 00:06:20,950 mendapatkan output apa 71 00:06:21,060 --> 00:06:23,130 pun di sana, kita tidak 72 00:06:23,160 --> 00:06:29,760 melihat apa pun yang masuk dari ini, kami baru saja mendapatkan peringatan penolakan janji, jadi sepertinya 73 00:06:29,970 --> 00:06:32,470 kami hanya mendapatkan kesalahan dan saat 74 00:06:32,820 --> 00:06:34,870 ini, kami tidak menangani kesalahan. 75 00:06:34,890 --> 00:06:39,990 Sekarang jika Anda akan menggunakan janji tanpa menunggu async, Anda hanya akan menambahkan pernyataan tangkapan. 76 00:06:39,990 --> 00:06:41,720 Di sini kita 77 00:06:41,720 --> 00:06:48,660 menggunakan async menunggu jadi apa yang kita lakukan adalah kita membungkus ini menjadi blok try, semua kode 78 00:06:48,660 --> 00:06:52,960 yang akhirnya ingin kita jalankan jika semuanya berhasil dan menangkap kesalahan 79 00:06:52,960 --> 00:06:57,340 di sini, jadi blok try catch. Di situlah kita mendapatkan kesalahan potensial dan 80 00:06:57,340 --> 00:07:00,820 sekarang dengan kesalahan itu sampai di sini, kita dapat menanganinya, misalnya 81 00:07:00,820 --> 00:07:06,460 mengirimnya ke server analitik kita sendiri atau melakukan apa pun yang kita inginkan dan kemudian mungkin juga mengolahnya kembali, 82 00:07:06,670 --> 00:07:11,740 tentu saja jika semua yang Anda lakukan adalah rethrowing, Anda tidak perlu menambahkan blok tangkapan ini tetapi 83 00:07:11,740 --> 00:07:17,080 biasanya, Anda mungkin ingin melakukan lebih banyak di sini - kirim ke server analytics khusus atau yang seperti 84 00:07:17,080 --> 00:07:18,930 itu seperti yang saya sebutkan. 85 00:07:19,150 --> 00:07:23,800 Jadi sekarang kita rethrow kesalahan, masih tidak lebih baik, masih menyebabkan 86 00:07:23,860 --> 00:07:29,890 kita memiliki kesalahan dan selain hanya mencoba menangkap ini, kita harus benar-benar juga menambahkan cek 87 00:07:29,890 --> 00:07:32,890 lain di sini sebelum kita membongkar 88 00:07:32,890 --> 00:07:38,770 badan respons, kita juga harus memeriksa apakah respons oke itu salah, kalau itu salah. 89 00:07:38,770 --> 00:07:44,670 OK adalah bidang yang Anda miliki pada objek respons ini dan ini benar jika 90 00:07:44,680 --> 00:07:50,800 responsnya dalam kisaran 200 kode status. Jika berada dalam rentang yang berbeda, misalnya karena 91 00:07:50,800 --> 00:07:55,360 Anda tidak diautentikasi atau semacamnya, maka ambil API secara default tidak akan menimbulkan kesalahan. 92 00:07:55,360 --> 00:08:01,000 Namun saya ingin melemparkan kesalahan dalam kasus itu sehingga kami selalu berakhir di blok tangkap jika kami 93 00:08:01,450 --> 00:08:07,780 memiliki kode status 400 atau 500 atau jika kami memiliki masalah permintaan jaringan, misalnya jika permintaan bahkan tidak dapat 94 00:08:07,780 --> 00:08:08,790 meninggalkan alat. 95 00:08:08,980 --> 00:08:15,250 Jadi di sini dan itu mengambil API khusus untuk menangani 400 dan 500 kode status juga yang biasanya tidak akan menyebabkan 96 00:08:15,250 --> 00:08:16,590 kesalahan, saya juga akan 97 00:08:16,600 --> 00:08:21,350 melemparkan kesalahan baru di sini dalam kasus di mana saya mengatakan ada yang salah, tentu 98 00:08:21,370 --> 00:08:27,850 saja Anda bisa menyelam ke dalam badan tanggapan di sini dalam kasus itu juga dan mencari tahu apa yang salah di sana 99 00:08:28,150 --> 00:08:32,910 tapi saya hanya akan membuang kesalahan umum ini dan sekarang kita pasti akan memiliki kesalahan jika 100 00:08:32,920 --> 00:08:38,750 ada yang salah jika kita tidak mendapatkan kembali data kita tetapi tetap saja, kita kemudian hanya rethrow kesalahan di sini. 101 00:08:38,770 --> 00:08:43,020 Tetapi tempat di mana saya akhirnya ingin menanganinya adalah komponen saya di sini, komponen 102 00:08:43,030 --> 00:08:50,640 layar saya karena di sana, saya kemudian ingin menampilkan pesan kesalahan. Jadi di sana, kami memiliki efek kami dan sama 103 00:08:50,830 --> 00:08:58,330 seperti kami dapat menggunakan catch atau handler jika Anda menggunakan itu dan catch atau async menunggu dengan mencoba catch 104 00:08:58,330 --> 00:08:59,860 dalam aksinya, kami 105 00:08:59,920 --> 00:09:01,800 dapat melakukannya di sini juga. 106 00:09:01,840 --> 00:09:09,380 Jadi di sini, saya ingin mencoba mengirim ini, tetapi saya ingin menangkap potensi kesalahan yang mungkin kita dapatkan. 107 00:09:09,400 --> 00:09:10,830 Jadi di sini saya 108 00:09:10,840 --> 00:09:16,810 menangkap kesalahan yang mungkin terjadi dan karena saya kembalikan kesalahan saya di sana, itulah yang baru saja saya lakukan di sini, 109 00:09:16,840 --> 00:09:19,370 benar, akhirnya kesalahan itu akan mencapai kita di sini. 110 00:09:19,400 --> 00:09:22,750 Jadi sekarang kita akhirnya akan berakhir di blok tangkap ini 111 00:09:23,080 --> 00:09:29,740 dan sekarang untuk menampilkan data kesalahan kami, kami dapat menambahkan negara lain - kesalahan dan mengatur kesalahan, Anda dapat menamainya sesuka 112 00:09:29,740 --> 00:09:30,250 Anda. 113 00:09:30,340 --> 00:09:38,690 Awalnya itu tidak terdefinisi karena pada awalnya saya tidak memiliki kesalahan tetapi kemudian di sini, saya akan memanggil set kesalahan dan mengatur 114 00:09:38,690 --> 00:09:41,540 ini menjadi kesalahan. pesan misalnya, jadi 115 00:09:41,540 --> 00:09:43,670 untuk pesan kesalahan ini saya terima. 116 00:09:46,500 --> 00:09:51,330 Masih tentu saja, saya ingin mengatur pemuatan ke false setelah itu, itu tidak berubah karena 117 00:09:51,330 --> 00:09:52,330 kami jelas tidak 118 00:09:52,350 --> 00:09:58,920 memuat lagi bahkan jika kami mendapat kesalahan tetapi sekarang kami juga memiliki keadaan kesalahan ini yang dapat kami gunakan, kami dapat menggunakannya 119 00:09:58,920 --> 00:10:01,490 untuk memeriksa itu disini. Jika kita memang 120 00:10:01,500 --> 00:10:08,820 memiliki kesalahan, jadi jika itu benar, saya bahkan tidak perlu melanjutkan, alih-alih saya ingin mengembalikan konten jsx terpusat saya di sini tapi 121 00:10:08,820 --> 00:10:10,130 di sana, saya hanya 122 00:10:10,140 --> 00:10:18,620 ingin menampilkan teks di mana saya mengatakan kesalahan terjadi misalnya , seperti ini. Jika sekarang kita melakukan itu, Anda akan melihat kita 123 00:10:18,650 --> 00:10:20,290 melihat pemintal tetapi kemudian 124 00:10:20,320 --> 00:10:21,370 kita 125 00:10:21,380 --> 00:10:24,990 melihat teks kesalahan ini. Sekarang tentu saja, ini tidak memungkinkan pengguna 126 00:10:24,990 --> 00:10:27,800 untuk melakukan banyak hal, kita sekarang dapat menavigasi dan kembali lagi 127 00:10:29,820 --> 00:10:36,820 tetapi kita mungkin ingin memberi pengguna cara mencoba lagi, mungkin dengan menambahkan tombol di sini. Jadi sekarang di sini dengan tombol yang diimpor, kita 128 00:10:36,820 --> 00:10:45,860 bisa pergi ke sana dan kemudian di sini menambahkan komponen tombol ini dengan judul coba lagi dan tentu saja terserah Anda bagaimana 129 00:10:45,870 --> 00:10:49,810 Anda ingin membiarkan pengguna menangani ini dan di sana Anda 130 00:10:49,920 --> 00:10:55,260 dapat menambahkan penangan onPress dan sekarang untuk dapat memuat lagi, saya benar-benar akan 131 00:10:55,350 --> 00:10:58,770 mengambil fungsi produk beban ini di sini, memindahkannya 132 00:10:58,770 --> 00:11:04,290 dari efek dan menjadikannya fungsi reguler dari komponen ini sehingga saya dapat memanggilnya dari 133 00:11:04,290 --> 00:11:06,030 dalam efek penggunaan. 134 00:11:06,090 --> 00:11:10,740 Namun sekarang ini juga perlu ketergantungan dan oleh karena itu untuk menghindari loop tak 135 00:11:10,800 --> 00:11:19,350 terbatas, itu harus dibungkus menggunakan callback, jadi mari kita impor menggunakan callback di sini dan membungkus ini di sekitar fungsi ini di sini di mana dependensi 136 00:11:19,350 --> 00:11:20,920 kemudian adalah fungsi pengiriman 137 00:11:20,980 --> 00:11:21,870 saya, Anda 138 00:11:21,870 --> 00:11:23,760 juga bisa tambahkan set isLoading 139 00:11:23,800 --> 00:11:27,600 dan set error tetapi semua fungsi ini tidak akan pernah berubah, karena 140 00:11:27,640 --> 00:11:32,440 itu Anda juga bisa menghilangkannya dan karena itu ini tidak akan pernah dibuat kembali yang 141 00:11:32,440 --> 00:11:34,480 bagus tapi sekarang kita bisa menggunakan 142 00:11:34,630 --> 00:11:37,930 produk beban sebagai ketergantungan di sini dalam efek penggunaan dan 143 00:11:37,960 --> 00:11:43,120 sekarang karena tidak ada di dalam dari fungsi efek penggunaan lagi, kita dapat menggunakan produk beban 144 00:11:43,120 --> 00:11:45,750 di tempat lain di komponen ini dan bagian 145 00:11:45,750 --> 00:11:51,700 mana pun di sini tombol ini, jika kita menekan ini, saya ingin juga memicu memuat produk lagi dan 146 00:11:52,000 --> 00:12:02,260 juga bertahan tetapi tidak kalah pentingnya, berikan tombol warna warna. utama. Dengan itu, sepertinya saya memiliki kesalahan di sini dengan impor saya, 147 00:12:02,260 --> 00:12:07,590 ya saya sudah memiliki tombol impor, jadi mari kita singkirkan impor kedua, hanya impor sekali dan sekarang 148 00:12:07,780 --> 00:12:09,480 apa yang akan Anda 149 00:12:09,520 --> 00:12:16,450 dapatkan adalah bahwa ini benar-benar akan dimuat ulang, akhirnya melemparkan kesalahan dan Anda dapat menekan coba lagi untuk memuat ulang ini, namun kami 150 00:12:16,460 --> 00:12:20,810 selalu melihat pesan kesalahan hanya karena kami tidak pernah menghapus kesalahan dan jika kami 151 00:12:20,840 --> 00:12:22,850 memang memiliki kesalahan, kami selalu mengembalikan 152 00:12:22,850 --> 00:12:25,220 ini, kami bahkan tidak membuatnya ke pemuatan pemintal. 153 00:12:25,220 --> 00:12:31,010 Jadi kami harus memastikan bahwa setiap kali kami memuat produk kami di sini, kami mengatur kesalahan kembali 154 00:12:31,010 --> 00:12:36,780 ke nol, jadi kami mengatur ulang kesalahan. Ngomong-ngomong, beberapa panggilan status panggilan di sebelah satu sama lain akan dikelompokkan 155 00:12:36,800 --> 00:12:39,550 bersama oleh React, jadi ini tidak akan menyebabkan beberapa siklus perenderan 156 00:12:39,560 --> 00:12:41,730 ulang komponen, tidak apa-apa menggunakannya seperti ini. 157 00:12:41,750 --> 00:12:46,490 Jadi sekarang dengan itu jika saya klik coba lagi, kita bisa coba lagi. Jelas itu tidak akan pernah berhasil karena URL 158 00:12:46,490 --> 00:12:53,540 kami rusak tetapi masih, ini adalah bagaimana kami dapat menangani kesalahan ini. Namun dengan itu, saya akan kembali ke tindakan saya dan 159 00:12:53,540 --> 00:12:57,610 memperbaiki kesalahan itu dengan memperbaiki URL ini lagi dan sekarang ini juga 160 00:12:57,740 --> 00:13:00,560 akan memuat data kami dengan benar dan menampilkannya.