1 00:00:02,110 --> 00:00:07,990 Jadi sekarang kita menambahkan penyimpanan, pengambilan, pembaruan, dan penghapusan dan oleh karena itu semua fungsi kasar 2 00:00:07,990 --> 00:00:12,070 dan kita telah melihat menunjukkan pemintalan pemuatan dan penanganan kesalahan, ada 3 00:00:12,070 --> 00:00:14,020 dua hal yang hilang. 4 00:00:14,020 --> 00:00:20,560 Salah satunya adalah ketika kita benar-benar melakukan pemesanan, kita juga mengirim pesanan itu ke server dan kita menyimpan pesanan di sana juga 5 00:00:20,560 --> 00:00:22,900 dan bukan hanya secara lokal karena sekarang 6 00:00:22,900 --> 00:00:27,760 tentu saja ketika kita memesan sesuatu yang kita lihat di sini tetapi segera setelah kami memuat 7 00:00:27,760 --> 00:00:30,650 ulang aplikasi karena kami tidak menyimpannya di server, itu hilang, 8 00:00:30,660 --> 00:00:32,160 jadi itu satu hal. 9 00:00:32,170 --> 00:00:35,130 Hal lain tentu saja kami hanya menampilkan pemintal pemuatan di sini 10 00:00:35,200 --> 00:00:39,570 dan kami juga hanya menangani kesalahan di sini. Pada layar admin jika terjadi kesalahan, 11 00:00:39,610 --> 00:00:43,970 kami tidak mendapatkan kesalahan, juga di sini jika kami mengedit ini dan kami mengirimkan 12 00:00:44,080 --> 00:00:47,320 ini, kami tidak melihat pemuatan pemintal sementara kami menunggu ini dikirimkan. 13 00:00:47,320 --> 00:00:49,120 Jadi itu juga sesuatu yang bisa kita 14 00:00:49,150 --> 00:00:51,310 tingkatkan dan itu sebenarnya bagian yang ingin saya mulai. 15 00:00:52,210 --> 00:00:57,670 Jadi di sini di layar edit produk ketika kami mengirim pembaruan atau membuat, dalam kedua kasus 16 00:00:57,670 --> 00:01:04,210 ini tentu saja membutuhkan waktu dan memang kami mendapatkan kembali janji di sini karena baik dalam pembaruan dan membuat 17 00:01:04,600 --> 00:01:10,270 tindakan produk, kami menggunakan fitur Redux Thunk dari mengembalikan fungsi pengiriman async di sini yang karenanya mengembalikan 18 00:01:10,270 --> 00:01:15,340 janji yang karenanya dikembalikan sebagai bagian dari panggilan fungsi pengiriman kami di sini. 19 00:01:15,520 --> 00:01:20,680 Jadi karena itu kita benar-benar mendapatkan informasi, apakah kita sedang menunggu respons, apakah kita mendapatkan kesalahan 20 00:01:20,710 --> 00:01:22,470 atau apakah kita sudah selesai, kita 21 00:01:22,630 --> 00:01:24,380 hanya perlu menggunakannya dan 22 00:01:24,520 --> 00:01:31,300 tentu saja kita dapat menggunakannya dengan cara yang sama seperti yang kita lakukan sebelumnya, dengan menggunakan status yang diimpor dari Bereaksi 23 00:01:31,300 --> 00:01:37,650 dan kemudian dengan mengelola pemuatan dan status kesalahan di sini. Catatan, Anda tentu saja dapat juga bekerja dengan 24 00:01:37,650 --> 00:01:43,080 peredam di mana Anda menggabungkan kedua negara bersama jika Anda ingin dengan bantuan penggunaan kait peredam. 25 00:01:43,380 --> 00:01:52,750 Namun di sini, saya akan tetap pada isLoading dan mengatur isLoading dan pada awalnya tentu saja ini salah dan juga memiliki kesalahan 26 00:01:52,750 --> 00:02:02,510 dan mengatur variabel kesalahan di sini dengan menggunakan negara seperti ini, yang awalnya tidak terdefinisi dan sekarang kita hanya perlu mengatur ini seperti 27 00:02:02,880 --> 00:02:07,470 kita ' mengirim kembali tindakan atau karena kami mendapatkan kesalahan. 28 00:02:07,470 --> 00:02:13,530 Jadi di sini ketika kita akan mengirimkan ini, tidak peduli apakah kita sedang mengedit atau 29 00:02:13,530 --> 00:02:25,000 jika kita sedang membuat, saya ingin mengatur isLoading menjadi true dan saya juga ingin mengatur kesalahan saya di sini menjadi false atau tidak ke false, ke nol , atur ulang. 30 00:02:25,190 --> 00:02:30,420 Sekarang setelah kita selesai, saya ingin melakukan sesuatu yang lain tetapi untuk itu, kita pertama-tama 31 00:02:30,420 --> 00:02:31,840 harus menunggu pengiriman selesai. 32 00:02:31,860 --> 00:02:37,770 Sekarang karena itu kita dapat mengubah ini menjadi fungsi async lagi, hanya supaya saya dapat menggunakan 33 00:02:37,770 --> 00:02:44,720 untuk menunggu kata kunci di sana, alternatifnya adalah tidak mengubah ini dalam fungsi async dan cukup menambahkan kemudian dan menangkap 34 00:02:44,770 --> 00:02:45,810 setelah itu, 35 00:02:45,810 --> 00:02:52,620 itu akan berfungsi juga tetapi Saya suka menggunakan async, tunggu. Jadi sekarang kita dapat menunggu pengiriman kedua selesai, tentu saja hanya 36 00:02:52,620 --> 00:02:57,230 satu dari dua akan berjalan karena itu adalah kondisi if tetapi kita bisa menunggu itu 37 00:02:57,330 --> 00:03:00,380 selesai dan karena itu setelah blok ini, kita tahu 38 00:03:00,370 --> 00:03:08,370 bahwa akan dilakukan pengiriman jadi di sini kita dapat mengatur isLoading kembali ke false. Jadi itulah status pemuatan, sekarang untuk menangani kesalahan, kita hanya 39 00:03:08,370 --> 00:03:15,420 perlu membungkus ini dengan blok coba tangkap dan kita benar-benar dapat membungkus keseluruhan jika memblokir di sini dengan 40 00:03:15,420 --> 00:03:23,250 try menangkap, jadi mari kita ambil itu, pindahkan di sini dan kemudian menangkap potensi apa pun kesalahan yang mungkin kita 41 00:03:23,250 --> 00:03:29,400 dapatkan di sini dan sekarang di sini, saya tentu saja ingin mengatur kesalahan saya ke kesalahan 42 00:03:29,400 --> 00:03:30,000 yang 43 00:03:33,030 --> 00:03:39,720 saya dapatkan di sini atau ke pesan kesalahan yang saya dapatkan di sini Sekarang kita sedang mengatur kesalahan, 44 00:03:39,780 --> 00:03:50,380 kita sedang mengatur pemuatan negara, tentu saja ini tidak berpengaruh di layar ini. Jadi untuk memperlihatkan pemintal pemuatan, kita perlu mengimpor indikator aktivitas dari 45 00:03:50,410 --> 00:03:54,120 React Native, indikator aktivitas dari React Native 46 00:03:54,130 --> 00:03:58,930 dan untuk menunjukkan kesalahan, saya juga ingin melempar peringatan dan 47 00:03:58,930 --> 00:04:10,540 untuk itu, Anda perlu memastikan bahwa Anda mengimpor peringatan yang sudah kami lakukan. Sekarang sebagai langkah selanjutnya, untuk menangani keadaan memuat, mungkin di sana sebelum saya 48 00:04:10,540 --> 00:04:19,930 mengembalikan formulir saya, saya akan memeriksa apakah isian Memuat benar dan jika ya, saya akan mengembalikan pandangan saya di sini 49 00:04:19,930 --> 00:04:30,010 dengan indikator aktivitas di sana-sini, saya ' akan mengatur ukuran ke besar dan mengatur warna ke warna dan untuk itu, Anda perlu 50 00:04:30,310 --> 00:04:38,980 memastikan bahwa Anda mengimpor warna yang konstan primer. Jadi pastikan Anda memiliki konstanta warna yang diimpor 51 00:04:38,980 --> 00:04:47,480 di sini, itu diperlukan dan sekarang saya juga akan menggunakan stylesheet di sini untuk menambahkan gaya baru, gaya 52 00:04:47,500 --> 00:04:55,120 terpusat ini lebih tepatnya, di sini saya akan menambahkan terpusat dan ya karena itu kami juga 53 00:04:55,120 --> 00:04:59,910 dapat mengalihdayakan ini menjadi pisahkan komponen pembungkus jika Anda mau. 54 00:05:00,010 --> 00:05:08,300 Di sana, saya akan mengatur flex ke satu, membenarkan konten ke pusat dan juga menyelaraskan item ke pusat, seperti ini. 55 00:05:08,410 --> 00:05:15,250 Sekarang kita dapat menerapkan gaya terpusat ini di sini ke tampilan yang saya bungkus di sekitar indikator aktivitas saya dengan 56 00:05:15,250 --> 00:05:19,990 mengatur gaya di sini untuk gaya. terpusat. 57 00:05:20,040 --> 00:05:26,460 Sekarang kita harus melihat ini sementara kita memuat dan sebagai catatan, kita juga sekarang tidak boleh menavigasi kembali sebelum 58 00:05:26,460 --> 00:05:27,480 kita selesai. 59 00:05:27,840 --> 00:05:33,700 Jadi jika saya menambahkan atau jika saya menghapus tanda seru itu dan kemudian meninggalkan input itu sehingga ini disampaikan dan 60 00:05:33,700 --> 00:05:34,640 saya klik simpan, 61 00:05:34,770 --> 00:05:38,400 Anda melihat pemintal pemuatan dan kami hanya menavigasi kembali setelah ini selesai. 62 00:05:38,400 --> 00:05:42,180 Sekarang Firebase sangat cepat tapi tetap saja, itulah yang terjadi. 63 00:05:42,330 --> 00:05:52,970 Sekarang untuk mensimulasikan kesalahan, saya akan pergi ke tindakan produk dan di sana memperbarui produk di sini, saya akan menghapus itu di sini lagi untuk memaksa kesalahan dan saya juga 64 00:05:52,970 --> 00:05:58,310 akan menambahkan sesuatu yang lain, saya sekarang akan menyimpan respons di sini dalam konstan karena 65 00:05:58,400 --> 00:06:03,130 sekarang saya benar-benar peduli, saya ingin memastikan bahwa jika responsnya tidak oke, jadi 66 00:06:03,200 --> 00:06:07,240 jika kita memiliki kode status 400 atau 500, saya juga melempar kesalahan 67 00:06:07,250 --> 00:06:14,360 baru di mana saya mengatakan ada kesalahan atau di mana Anda melakukan kesalahan apa pun penanganan yang ingin Anda lakukan, sehingga 68 00:06:14,360 --> 00:06:20,200 kami juga membuat kesalahan dalam kasus itu. Ngomong-ngomong, saya akan melakukan hal 69 00:06:20,210 --> 00:06:25,620 yang sama untuk menghapus sebelum kita menguji kesalahan paksa yang saya terapkan. 70 00:06:25,670 --> 00:06:29,150 Jadi di sini untuk dihapus, saya juga ingin memeriksa ini dan untuk itu tentu saja 71 00:06:29,360 --> 00:06:36,120 di sini, saya juga perlu mendapatkan tanggapan saya dengan menunggu pengambilan di sini. Oke dengan itu, mari kita lihat apakah 72 00:06:36,120 --> 00:06:40,400 kesalahan yang dipaksa untuk memperbarui karena mengabaikan ada 73 00:06:40,470 --> 00:06:46,680 di sini, jika itu berpengaruh. Jika sekarang saya kembali ke admin, saya mulai menambahkan ini, 74 00:06:46,680 --> 00:06:48,010 saya menambahkan tanda seru 75 00:06:48,030 --> 00:06:54,150 dan klik ini, sekarang yang akan Anda lihat adalah bahwa pembaruannya hanya dibubarkan, jadi kami tidak melihat tanda seru di 76 00:06:54,240 --> 00:07:00,230 sini tetapi kami juga tidak ada pesan kesalahan yang masuk akal karena saya tidak punya logika untuk melakukan itu. 77 00:07:00,310 --> 00:07:01,700 Sekarang bagaimana kita bisa menangani ini? 78 00:07:01,720 --> 00:07:04,310 Seperti yang saya katakan, saya ingin 79 00:07:04,330 --> 00:07:10,610 melempar peringatan dan karena itu saya akan menggunakan efek penggunaan, sehingga gunakan efek kait yang Bereaksi menawarkan 80 00:07:10,690 --> 00:07:16,690 yang kami temukan di sini, saya ingin menggunakan itu dan saya bisa menerapkannya di sini setelah 81 00:07:16,710 --> 00:07:24,490 menginisialisasi peredam katakanlah, posisi yang tepat tidak masalah terlalu banyak. Gunakan efek di sini harus menjalankan kembali setiap kali 82 00:07:24,880 --> 00:07:28,670 kesalahan berubah, jadi jika kita mengatur ini menjadi kesalahan 83 00:07:28,750 --> 00:07:34,510 agar tidak menjadi kesalahan, maka di sini saya memeriksa apakah kesalahan itu benar-ish, jadi 84 00:07:34,510 --> 00:07:39,010 jika kita memiliki kesalahan dan jika kita memiliki ini, maka saya 85 00:07:39,010 --> 00:07:41,380 dapat memunculkan peringatan, terjadi kesalahan. 86 00:07:41,380 --> 00:07:48,920 Saya ingin menampilkan kesalahan saya di sini dan itu harus menjadi pesan kesalahan karena itulah yang saya atur di sini, 87 00:07:48,920 --> 00:07:49,350 saya 88 00:07:49,370 --> 00:07:55,270 mengatur kesalahan saya ke pesan sehingga harus berupa string yang dapat saya tampilkan dan kemudian saya 89 00:07:55,270 --> 00:08:04,610 akan menambahkan tombol di mana saya katakan OK yang hanya menolak ini. Sekarang juga penting, jika kita mendapatkan kesalahan, 90 00:08:04,610 --> 00:08:11,180 saya tidak ingin menavigasi. Jadi untuk menghindari hal ini terjadi, saya ingin 91 00:08:11,210 --> 00:08:19,670 memastikan bahwa di sini, alat peraga ini, navigasi di sini sebenarnya hanya dilakukan jika kita tidak berakhir di blok tangkap ini. 92 00:08:19,700 --> 00:08:27,390 Jadi pada dasarnya di sini setelah blok if else tetapi masih di try block, di sana saya ingin menavigasi. 93 00:08:27,410 --> 00:08:29,300 Jadi sekarang mari kita coba lagi, mari kembali 94 00:08:29,300 --> 00:08:30,710 ke sini, edit ini, tambahkan 95 00:08:30,710 --> 00:08:33,920 tanda seru, klik di tempat lain, klik simpan dan sekarang saya mendapatkan pesan 96 00:08:33,920 --> 00:08:40,730 kesalahan saya di sini dan saya tetap di halaman ini dan itu juga reset. Saya dapat menambahkan ini lagi, klik 97 00:08:40,760 --> 00:08:43,430 di sini dan hilang. 98 00:08:43,700 --> 00:08:50,150 Di sisi lain jika kita sekarang memperbaiki kesalahan itu di sini dalam tindakan dengan membaca bahwa ada di 99 00:08:50,150 --> 00:08:52,960 sini dan sekarang kita kembali dan melihat lagi, 100 00:08:52,970 --> 00:08:57,170 jika saya mengedit ini, tambahkan tanda seru, klik di tempat lain dan 101 00:08:57,170 --> 00:08:59,880 klik simpan, sekarang semua berfungsi sebagaimana mestinya. 102 00:08:59,900 --> 00:09:04,200 Jadi sekarang ini benar-benar berfungsi dan sekarang ini berperilaku seperti seharusnya. 103 00:09:04,220 --> 00:09:09,890 Sekarang Anda tentu saja dapat juga menambahkan pemintal pemuatan dan penangan kesalahan di sini ke layar produk pengguna 104 00:09:09,890 --> 00:09:10,840 jika Anda mau. 105 00:09:10,850 --> 00:09:15,800 Jadi jika Anda menghapus ini yang tidak akan saya lakukan di sini tetapi jika Anda akan menghapus ini, saat ini 106 00:09:15,800 --> 00:09:17,300 Anda tidak akan mendapatkan pemintal, 107 00:09:17,300 --> 00:09:22,610 pemintal pemuatan, Anda juga tidak akan mendapatkan kesalahan jika gagal. Untuk menghemat waktu, saya tidak akan menerapkan ini di sini, tetapi 108 00:09:22,610 --> 00:09:26,590 pada dasarnya Anda bisa menerapkannya dengan cara yang persis sama seperti yang kami lakukan sebelumnya jika Anda mau. 109 00:09:26,600 --> 00:09:28,670 Jadi itu sesuatu yang pasti bisa Anda lakukan.