Mari kita mulai dengan mengubah ikon
bintang berdasarkan apakah ini saat ini favorit atau tidak,
saya ingin memiliki bintang yang diisi hanya jika itu adalah favorit dan bintang kosong jika tidak.
Jadi pada akhirnya di layar detail makanan, kita perlu menukar ikon yang kami render di
sini berdasarkan status favorit makanan yang kami muat di sini. Sekarang lagi, masalahnya di sini adalah kita dapat
mengetahui apakah makanan itu adalah favorit atau tidak dengan cara yang sangat mudah dalam fungsi komponen
tetapi tidak benar-benar dalam opsi navigasi.
Jadi sekali lagi, kita perlu params untuk berkomunikasi antara keduanya tetapi secara keseluruhan, itu tidak terlalu sulit.
Apa yang ingin saya lakukan di sini adalah saya ingin mendapatkan makanan favorit saya dengan bantuan pemilih penggunaan dalam fungsi komponen layar makan
detail dengan bantuan negara dan kemudian negara. makanan. makanan favorit, jadi saya ingin
mendapatkan semua makanan favorit saya dan sekarang saya hanya ingin memeriksa apakah makanan
itu adalah bagian dari makanan favorit dan oleh karena itu kita dapat memperbaiki ini dan bahkan menyebutkan makanan saat ini adalah favorit
dan di pemilih tidak hanya kembali makanan favorit tetapi menambahkan sedikit lebih banyak logika di sana dan
hanya menambahkan cek di mana kita memanggil beberapa yang juga merupakan
metode bawaan yang mengembalikan true jika kondisi yang akan kita tentukan benar untuk setidaknya satu item di dalamnya
array dan di sana, saya memeriksa setiap makanan yang ada di sana, jika ID makan sama dengan ID makan saya ambil di sini dan karenanya saya harus bertukar garis.
Jadi di sini, saya mendapatkan mealId dari makanan tempat kami memuat pada layar detail dan
kemudian saya memeriksa makanan favorit saya, jika ID makan itu adalah bagian dari mereka yang berarti bahwa makanan ini adalah bagian dari favorit kami.
Jadi dengan itu, kita punya makanan saat ini adalah informasi favorit, sekarang kita perlu meneruskannya ke opsi navigasi
dan lagi, kita bisa melakukan ini dengan efek penggunaan, mungkin di sana. Sama seperti sebelumnya, berikan fungsi di sini dalam
array dependensi, dalam fungsi di sini saya akan mengatur alat peraga navigasi mengatur params untuk menggabungkan lebih banyak data ke params
saya dan itu mungkin param param, nama terserah Anda, yang memegang makan saat ini adalah nilai favorit
sehingga nilai yang baru saja kami peroleh dan sekarang ketergantungan fungsi itu, dari itu menggunakan efek
panggilan yang saya maksud adalah tentu saja makanan saat ini adalah favorit, ketika itu berubah,
saya ingin meneruskan informasi baru ke params dan karena itu ke header, jika tidak efek ini tidak boleh dijalankan kembali.
Jadi sekarang kembali ke opsi navigasi, kita dapat mengambil informasi itu di sini, adalah
favorit dapat diambil dari navigationData. navigasi dengan bantuan get param dan di sana saya
beri nama ini fav, ini dia, jadi itulah nama yang
dengannya kita dapat mengambilnya.
Sekarang kita memiliki informasi favorit di header dan sekarang kita dapat menggunakan ini untuk membuat ikon yang berbeda
di sini.
Jadi, alih-alih selalu merender bintang iOS, saya akan memiliki ekspresi dinamis di sini dan saya akan memeriksa apakah
favorit itu benar, jika
ya, maka saya ingin menggunakan bintang iOS yang merupakan bintang bidang ini,
jika
tidak, saya akan ll membuat garis besar bintang iOS dan itu
akan menjadi bintang kosong.
Dengan itu, kami berharap memiliki set yang berfungsi seperti yang diharapkan.
Jika saya pergi ke spageti,
sekarang ini adalah bintang kosong dan jika saya klik
ini, itu adalah bintang yang terisi dan merupakan bagian dari favorit.
Jika saya kemudian pergi ke layar detail di sini, Anda melihatnya perlu sedikit sampai
bintang diisi di sini juga, kita harus memperbaikinya. Jika sekarang saya klik di sini dan kami kembali ke makanan,
ada juga yang diperbarui dan itulah keajaiban Redux, itu memperbarui satu bagian dari aplikasi jika ada sesuatu yang terkait perubahan di
bagian lain, itulah yang harusnya berlaku di sini. Jadi yang biasanya berfungsi,
satu-satunya hal yang tidak terlalu indah adalah bahwa bintang ini awalnya kosong dan hanya diisi setelah
ini dimuat, jadi kita dapat memperbaikinya
tetapi selain itu, ini berfungsi sebagaimana mestinya. Sekarang untuk memperbaiki bintang yang awalnya kosong ini, sekali
lagi kita
bisa menggunakan solusi yang saya jelaskan sebelumnya untuk data header awal itu.
Kami tidak ingin menunggu render pertama selesai,
alih-alih kami harus meneruskan data awal ini ke komponen ini ketika kami menavigasi ke sana.
Oleh karena itu saatnya untuk daftar makanan lagi di mana kita memiliki tindakan navigasi ini
untuk juga meneruskan ini sudah kunci fav, jadi kunci ini yang saya coba ekstrak di sini di layar detail
makanan di sana, dapatkan param adalah fav. Saya ingin meneruskan nilai saat ini ketika kami memuat komponen
ini, ketika kami memuat layar ini di sini dari dalam daftar makanan yang merupakan komponen
yang memicu navigasi
ke detail makanan dan tentu saja di sana, itemData. item adalah makanan tunggal tetapi itu tidak menyimpan informasi tentang apakah itu bagian dari favorit
kami atau tidak,
tetapi tentu saja kita dapat mengetahui apakah itu masalahnya atau tidak. Dalam daftar makanan,
kita juga dapat memanfaatkan toko Redux, tidak hanya dari komponen layar.
Jadi di sini saya juga dapat menggunakan pemilih penggunaan dari React Redux seperti ini dan kemudian di komponen saya di sini, saya bisa mendapatkan makanan favorit
saya dengan bantuan pemilih penggunaan di mana saya mendapatkan status saya dan kemudian mengembalikan status. makanan dot makanan favorit untuk mendapatkan semua makanan favorit saya dan
sekarang ketika kita membuat item makanan
tunggal, kita bisa menggunakannya untuk mengetahui apakah makanan itu merupakan bagian dari makanan
favorit kita. Omong-omong, Anda
tidak dapat menggunakan pemilih penggunaan di sana,
itu tidak akan menjadi penggunaan yang valid karena Anda harus menggunakan React hooks hanya pada tingkat
akar fungsi komponen Anda, tidak dalam fungsi bersarang atau bersarang jika blok
atau sesuatu seperti itu, jadi gunakan pemilih
penggunaan di sini tidak diperbolehkan tetapi kita dapat menggunakan makanan favorit kami di sana tentu saja dan
oleh karena itu di sini, kita dapat mengetahui apakah ini adalah favorit dengan hanya memeriksa makanan favorit dan mencari makanan di mana ID-nya cocok dengan itemData
.
barang.
id, jadi ID makanan saat ini kami render. Oleh karena itu favorit akan menyimpan item yang kami temukan
di sana, atau kami menggunakan beberapa di sini yang merupakan metode Javascript bawaan yang akan mengembalikan true jika item
dalam makanan favorit cocok dengan kondisi ini.
Jadi jika favorit adalah benar, kita tahu item ini adalah favorit dan oleh karena itu kita dapat
menggunakan favorit sebagai nilai untuk fav yang kita lewati sebagai parameter awal ke layar
detail makanan dan sekarang bintang yang berkedip ini yang awalnya kosong harus pergi
Sekarang jika saya menandai ini sebagai favorit di sini dan saya meninggalkan ini dan saya kembali, itu
sudah diisi
sejak awal, juga di layar favorit tentu saja. Jadi begitulah, ini adalah bagaimana kita dapat bekerja
dengan favorit, mari sekarang pastikan kita menunjukkan
beberapa teks dummy di sini di layar favorit jika kita tidak punya data untuk ditampilkan sebaliknya
dan setelah itu, mari kita
berhati-hati dengan filter kita.