Sebelum kita melanjutkan dengan memperbarui atau mengedit data atau menghapusnya, mari kita pastikan
juga bahwa pada awalnya kita tidak melihat data dummy tetapi kita benar-benar
melihat pemintal pemuatan dan mungkin juga pesan jika tidak ada data yang akan dimuat atau pesan kesalahan
jika kita memiliki kesalahan dan untuk itu, mari kita
mulai dengan pemintal pemuatan. Pada layar ikhtisar produk, di sana
saya ingin menampilkan pemintal pemuatan sementara kami menunggu data tiba. Untuk itu kita pertama-tama perlu tahu
apakah kita memuat atau tidak dan kita dapat mengontrolnya dengan status penggunaan,
jadi dengan keadaan internal dalam komponen ini.
Jadi di sana, kita dapat menambahkan isLoading dan mengatur isLoading dan kemudian cukup gunakan status di sini seperti ini dan pada awalnya kita tidak
memuat, jadi saya mengatur status awal ke false
dan sekarang di sini ketika kita mengirim ini, jadi di sini dalam efek penggunaan, saya atur
IsLoading ke true tentu saja tetapi begitu kita selesai, saya ingin mengembalikannya ke false.
Sekarang hal yang baik adalah pengiriman di sini mengirimkan tindakan mengambil produk kami dan oleh karena itu ini di sini memberi kita janji
sebenarnya, jadi di
sini saya dapat menambahkan kemudian dan juga menangkap kemudian untuk penanganan kesalahan untuk melakukan sesuatu setelah ini dilakukan.
Anda juga dapat menggunakan async menunggu tetapi tidak diizinkan menggunakannya seperti
ini di sini dalam efek penggunaan, itu bukan hanya bagaimana penggunaan efek harus digunakan.
Jadi jika Anda ingin menggunakan async di sini, Anda harus membungkus ini menjadi
fungsi terpisah yang harus Anda buat di efek Anda, seperti memuat produk yang hanya fungsi pembungkus dummy yang
terlihat seperti ini, mungkin dengan set isLoading in di sana juga.
Sekarang di sini Anda dapat menambahkan async dan sekarang kemudian Anda dapat memanggil memuat produk seperti itu setelahnya,
cukup pembungkus yang diperlukan karena cara penggunaan efek bekerja,
itu tidak boleh mengembalikan
janji, itu akan melakukannya jika Anda menggunakan async di sini dan oleh karena itu, menggunakan async tidak
diperbolehkan, ini di sisi lain diperbolehkan.
Jadi sekarang di sini,
kita dapat menggunakan menunggu di sini untuk menunggu pengiriman ini dilakukan, yang berarti ini akan secara
otomatis menunggu janji yang ada di sana, jadi untuk permintaan HTTP dan setelah itu kita mengatur isLoading
ke false setelah ini selesai.
Sekarang untuk menunjukkan seorang pemintal, untungnya React Native punya satu untuk kita, indikator aktivitas yang secara otomatis
akan terlihat bagus untuk iOS dan
Android, jadi itu akan secara otomatis mendapatkan gaya platform default
dan sekarang kita dapat merendernya jika kita memuat. Jadi, bukannya mengembalikan daftar datar,
jika isLoading benar, saya akan mengembalikan potongan jsx yang berbeda, saya akan mengembalikan tampilan baru
di sini dengan indikator aktivitas saya di sana. Untuk itu tentu saja, Anda juga perlu melihat impor, jadi pastikan ini juga tersedia.
Sekarang dengan itu kami mengembalikan tampilan ini dengan indikator aktivitas, di sana
Anda dapat mengatur ukuran menjadi besar dan warna menjadi Warna. primer untuk contoh dan ini tentu saja mengharuskan Anda untuk memiliki warna
konstan yang diimpor, jadi pastikan yang tersedia dan yang tak kalah pentingnya, sekarang saya ingin memusatkan indikator ini, jadi di sini kita
dapat menambahkan gaya yang tentu saja dapat kita atur dengan stylesheet atau di sini cepat
dan kotor, lenturkan yang membenarkan pusat konten, sejajarkan pusat item. Namun sebenarnya saya akan menggunakan stylesheet di sini
karena kita akan membutuhkannya di tempat yang berbeda nanti juga.
Jadi di sini saya akan merujuk ke gaya katakanlah berpusat dan mengimpor stylesheet dari React Native
dan dengan itu, kemudian pergi ke sana, tambahkan objek gaya saya setelah mengatur
opsi navigasi mungkin, gaya dengan Stylesheet. buat, tambahkan properti terpusat di sana yang memiliki gaya ini dengan
fleksibel membenarkan item menyelaraskan konten dan sekarang dengan itu, kita akan melihat indikator aktivitas terpusat saat kita memuat.
Jadi jika saya menyimpan ini dan ini dimuat kembali, Firebase sangat cepat sehingga Anda tidak melihatnya selama itu tetapi untuk waktu
yang singkat, Anda melihat pemuatan pemintal di sini, dengan tampilan yang berbeda pada iOS dan Android tentu saja.
Sekarang tentu saja memuat adalah satu hal, kadang-kadang Anda juga tidak punya data yang bisa dimuat. Katakanlah dalam
peredam, kami menjangkau produk. json yang merupakan sumber di mana tidak ada data dapat
diambil dan karena itu kita berakhir dengan layar kosong.
Ya itu sesuatu yang bisa kita lakukan tetapi itu bukan pengalaman
pengguna terbaik, jadi saya ingin menambahkan yang lain jika memeriksa di mana saya memeriksa apakah Memuat tidak benar, jadi
jika kita tidak memuat lagi dan produk saya di sini, panjangnya sama dengan nol yang berarti kami tidak memiliki produk.
Dalam hal ini, saya juga akan mengembalikan konten terpusat saya di sini tetapi di sana saya hanya
ingin menampilkan teks di mana saya mengatakan tidak ada produk yang
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
komponen pembungkus teks default yang kami gunakan dalam modul sebelumnya, untuk saat ini saya hanya akan memiliki teks saya seperti ini
dan ini memang
yang kita lihat di sana untuk saat ini. Tentu saja begitu saya beralih kembali ke
URL yang benar di mana kami benar-benar menemukan data, itu berfungsi. Sekarang, last but not least, Anda juga bisa
memiliki kesalahan. Katakanlah di sini, saya
tidak punya. json di
sana, tentu saja itu adalah kesalahan yang biasanya akan kita hindari karena itu hanya kesalahan ketik
di pihak kita tetapi sayangnya server Firebase relatif kuat. Jadi untuk memalsukan bahwa mereka misalnya turun atau ada yang salah,
saya
hanya akan memecah URL dengan cara ini yang merupakan URL tidak valid dan sekarang apa yang kita lihat adalah pemintal tak terbatas.
Alasan untuk itu adalah bahwa sebenarnya kita sekarang tidak memiliki respons yang valid. Jadi jika kita melihat tindakan kita di sini dan kita konsol
mencatat data respons ini di sini, kita melihat bahwa saat ini dimuat ulang, pengambilan akan
terjadi segera, tetapi kita tidak
mendapatkan output apa
pun di sana, kita tidak
melihat apa pun yang masuk dari ini, kami baru saja mendapatkan peringatan penolakan janji, jadi sepertinya
kami hanya mendapatkan kesalahan dan saat
ini, kami tidak menangani kesalahan.
Sekarang jika Anda akan menggunakan janji tanpa menunggu async, Anda hanya akan menambahkan pernyataan tangkapan.
Di sini kita
menggunakan async menunggu jadi apa yang kita lakukan adalah kita membungkus ini menjadi blok try, semua kode
yang akhirnya ingin kita jalankan jika semuanya berhasil dan menangkap kesalahan
di sini, jadi blok try catch. Di situlah kita mendapatkan kesalahan potensial dan
sekarang dengan kesalahan itu sampai di sini, kita dapat menanganinya, misalnya
mengirimnya ke server analitik kita sendiri atau melakukan apa pun yang kita inginkan dan kemudian mungkin juga mengolahnya kembali,
tentu saja jika semua yang Anda lakukan adalah rethrowing, Anda tidak perlu menambahkan blok tangkapan ini tetapi
biasanya, Anda mungkin ingin melakukan lebih banyak di sini - kirim ke server analytics khusus atau yang seperti
itu seperti yang saya sebutkan.
Jadi sekarang kita rethrow kesalahan, masih tidak lebih baik, masih menyebabkan
kita memiliki kesalahan dan selain hanya mencoba menangkap ini, kita harus benar-benar juga menambahkan cek
lain di sini sebelum kita membongkar
badan respons, kita juga harus memeriksa apakah respons oke itu salah, kalau itu salah.
OK adalah bidang yang Anda miliki pada objek respons ini dan ini benar jika
responsnya dalam kisaran 200 kode status. Jika berada dalam rentang yang berbeda, misalnya karena
Anda tidak diautentikasi atau semacamnya, maka ambil API secara default tidak akan menimbulkan kesalahan.
Namun saya ingin melemparkan kesalahan dalam kasus itu sehingga kami selalu berakhir di blok tangkap jika kami
memiliki kode status 400 atau 500 atau jika kami memiliki masalah permintaan jaringan, misalnya jika permintaan bahkan tidak dapat
meninggalkan alat.
Jadi di sini dan itu mengambil API khusus untuk menangani 400 dan 500 kode status juga yang biasanya tidak akan menyebabkan
kesalahan, saya juga akan
melemparkan kesalahan baru di sini dalam kasus di mana saya mengatakan ada yang salah, tentu
saja Anda bisa menyelam ke dalam badan tanggapan di sini dalam kasus itu juga dan mencari tahu apa yang salah di sana
tapi saya hanya akan membuang kesalahan umum ini dan sekarang kita pasti akan memiliki kesalahan jika
ada yang salah jika kita tidak mendapatkan kembali data kita tetapi tetap saja, kita kemudian hanya rethrow kesalahan di sini.
Tetapi tempat di mana saya akhirnya ingin menanganinya adalah komponen saya di sini, komponen
layar saya karena di sana, saya kemudian ingin menampilkan pesan kesalahan. Jadi di sana, kami memiliki efek kami dan sama
seperti kami dapat menggunakan catch atau handler jika Anda menggunakan itu dan catch atau async menunggu dengan mencoba catch
dalam aksinya, kami
dapat melakukannya di sini juga.
Jadi di sini, saya ingin mencoba mengirim ini, tetapi saya ingin menangkap potensi kesalahan yang mungkin kita dapatkan.
Jadi di sini saya
menangkap kesalahan yang mungkin terjadi dan karena saya kembalikan kesalahan saya di sana, itulah yang baru saja saya lakukan di sini,
benar, akhirnya kesalahan itu akan mencapai kita di sini.
Jadi sekarang kita akhirnya akan berakhir di blok tangkap ini
dan sekarang untuk menampilkan data kesalahan kami, kami dapat menambahkan negara lain - kesalahan dan mengatur kesalahan, Anda dapat menamainya sesuka
Anda.
Awalnya itu tidak terdefinisi karena pada awalnya saya tidak memiliki kesalahan tetapi kemudian di sini, saya akan memanggil set kesalahan dan mengatur
ini menjadi kesalahan. pesan misalnya, jadi
untuk pesan kesalahan ini saya terima.
Masih tentu saja, saya ingin mengatur pemuatan ke false setelah itu, itu tidak berubah karena
kami jelas tidak
memuat lagi bahkan jika kami mendapat kesalahan tetapi sekarang kami juga memiliki keadaan kesalahan ini yang dapat kami gunakan, kami dapat menggunakannya
untuk memeriksa itu disini. Jika kita memang
memiliki kesalahan, jadi jika itu benar, saya bahkan tidak perlu melanjutkan, alih-alih saya ingin mengembalikan konten jsx terpusat saya di sini tapi
di sana, saya hanya
ingin menampilkan teks di mana saya mengatakan kesalahan terjadi misalnya , seperti ini. Jika sekarang kita melakukan itu, Anda akan melihat kita
melihat pemintal tetapi kemudian
kita
melihat teks kesalahan ini. Sekarang tentu saja, ini tidak memungkinkan pengguna
untuk melakukan banyak hal, kita sekarang dapat menavigasi dan kembali lagi
tetapi kita mungkin ingin memberi pengguna cara mencoba lagi, mungkin dengan menambahkan tombol di sini. Jadi sekarang di sini dengan tombol yang diimpor, kita
bisa pergi ke sana dan kemudian di sini menambahkan komponen tombol ini dengan judul coba lagi dan tentu saja terserah Anda bagaimana
Anda ingin membiarkan pengguna menangani ini dan di sana Anda
dapat menambahkan penangan onPress dan sekarang untuk dapat memuat lagi, saya benar-benar akan
mengambil fungsi produk beban ini di sini, memindahkannya
dari efek dan menjadikannya fungsi reguler dari komponen ini sehingga saya dapat memanggilnya dari
dalam efek penggunaan.
Namun sekarang ini juga perlu ketergantungan dan oleh karena itu untuk menghindari loop tak
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
kemudian adalah fungsi pengiriman
saya, Anda
juga bisa tambahkan set isLoading
dan set error tetapi semua fungsi ini tidak akan pernah berubah, karena
itu Anda juga bisa menghilangkannya dan karena itu ini tidak akan pernah dibuat kembali yang
bagus tapi sekarang kita bisa menggunakan
produk beban sebagai ketergantungan di sini dalam efek penggunaan dan
sekarang karena tidak ada di dalam dari fungsi efek penggunaan lagi, kita dapat menggunakan produk beban
di tempat lain di komponen ini dan bagian
mana pun di sini tombol ini, jika kita menekan ini, saya ingin juga memicu memuat produk lagi dan
juga bertahan tetapi tidak kalah pentingnya, berikan tombol warna warna. utama. Dengan itu, sepertinya saya memiliki kesalahan di sini dengan impor saya,
ya saya sudah memiliki tombol impor, jadi mari kita singkirkan impor kedua, hanya impor sekali dan sekarang
apa yang akan Anda
dapatkan adalah bahwa ini benar-benar akan dimuat ulang, akhirnya melemparkan kesalahan dan Anda dapat menekan coba lagi untuk memuat ulang ini, namun kami
selalu melihat pesan kesalahan hanya karena kami tidak pernah menghapus kesalahan dan jika kami
memang memiliki kesalahan, kami selalu mengembalikan
ini, kami bahkan tidak membuatnya ke pemuatan pemintal.
Jadi kami harus memastikan bahwa setiap kali kami memuat produk kami di sini, kami mengatur kesalahan kembali
ke nol, jadi kami mengatur ulang kesalahan. Ngomong-ngomong, beberapa panggilan status panggilan di sebelah satu sama lain akan dikelompokkan
bersama oleh React, jadi ini tidak akan menyebabkan beberapa siklus perenderan
ulang komponen, tidak apa-apa menggunakannya seperti ini.
Jadi sekarang dengan itu jika saya klik coba lagi, kita bisa coba lagi. Jelas itu tidak akan pernah berhasil karena URL
kami rusak tetapi masih, ini adalah bagaimana kami dapat menangani kesalahan ini. Namun dengan itu, saya akan kembali ke tindakan saya dan
memperbaiki kesalahan itu dengan memperbaiki URL ini lagi dan sekarang ini juga
akan memuat data kami dengan benar dan menampilkannya.