1
00:00:02,510 --> 00:00:05,000
Mari kita mulai dengan mengubah ikon

2
00:00:05,020 --> 00:00:08,580
bintang berdasarkan apakah ini saat ini favorit atau tidak,

3
00:00:08,600 --> 00:00:14,390
saya ingin memiliki bintang yang diisi hanya jika itu adalah favorit dan bintang kosong jika tidak.

4
00:00:14,390 --> 00:00:19,040
Jadi pada akhirnya di layar detail makanan, kita perlu menukar ikon yang kami render di

5
00:00:19,040 --> 00:00:25,270
sini berdasarkan status favorit makanan yang kami muat di sini. Sekarang lagi, masalahnya di sini adalah kita dapat

6
00:00:25,350 --> 00:00:32,040
mengetahui apakah makanan itu adalah favorit atau tidak dengan cara yang sangat mudah dalam fungsi komponen

7
00:00:32,040 --> 00:00:34,910
tetapi tidak benar-benar dalam opsi navigasi.

8
00:00:34,920 --> 00:00:42,010
Jadi sekali lagi, kita perlu params untuk berkomunikasi antara keduanya tetapi secara keseluruhan, itu tidak terlalu sulit.

9
00:00:43,620 --> 00:00:49,830
Apa yang ingin saya lakukan di sini adalah saya ingin mendapatkan makanan favorit saya dengan bantuan pemilih penggunaan dalam fungsi komponen layar makan

10
00:00:49,830 --> 00:00:56,260
detail dengan bantuan negara dan kemudian negara. makanan. makanan favorit, jadi saya ingin

11
00:00:56,270 --> 00:01:01,380
mendapatkan semua makanan favorit saya dan sekarang saya hanya ingin memeriksa apakah makanan

12
00:01:04,190 --> 00:01:12,410
itu adalah bagian dari makanan favorit dan oleh karena itu kita dapat memperbaiki ini dan bahkan menyebutkan makanan saat ini adalah favorit

13
00:01:12,410 --> 00:01:18,830
dan di pemilih tidak hanya kembali makanan favorit tetapi menambahkan sedikit lebih banyak logika di sana dan

14
00:01:18,950 --> 00:01:23,300
hanya menambahkan cek di mana kita memanggil beberapa yang juga merupakan

15
00:01:23,300 --> 00:01:30,170
metode bawaan yang mengembalikan true jika kondisi yang akan kita tentukan benar untuk setidaknya satu item di dalamnya

16
00:01:30,320 --> 00:01:41,090
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.

17
00:01:41,260 --> 00:01:46,570
Jadi di sini, saya mendapatkan mealId dari makanan tempat kami memuat pada layar detail dan

18
00:01:46,570 --> 00:01:54,290
kemudian saya memeriksa makanan favorit saya, jika ID makan itu adalah bagian dari mereka yang berarti bahwa makanan ini adalah bagian dari favorit kami.

19
00:01:54,320 --> 00:01:59,600
Jadi dengan itu, kita punya makanan saat ini adalah informasi favorit, sekarang kita perlu meneruskannya ke opsi navigasi

20
00:01:59,630 --> 00:02:07,010
dan lagi, kita bisa melakukan ini dengan efek penggunaan, mungkin di sana. Sama seperti sebelumnya, berikan fungsi di sini dalam

21
00:02:07,010 --> 00:02:15,020
array dependensi, dalam fungsi di sini saya akan mengatur alat peraga navigasi mengatur params untuk menggabungkan lebih banyak data ke params

22
00:02:15,050 --> 00:02:21,620
saya dan itu mungkin param param, nama terserah Anda, yang memegang makan saat ini adalah nilai favorit

23
00:02:21,620 --> 00:02:27,740
sehingga nilai yang baru saja kami peroleh dan sekarang ketergantungan fungsi itu, dari itu menggunakan efek

24
00:02:27,740 --> 00:02:33,710
panggilan yang saya maksud adalah tentu saja makanan saat ini adalah favorit, ketika itu berubah,

25
00:02:33,710 --> 00:02:41,170
saya ingin meneruskan informasi baru ke params dan karena itu ke header, jika tidak efek ini tidak boleh dijalankan kembali.

26
00:02:41,240 --> 00:02:48,740
Jadi sekarang kembali ke opsi navigasi, kita dapat mengambil informasi itu di sini, adalah

27
00:02:48,740 --> 00:02:54,960
favorit dapat diambil dari navigationData. navigasi dengan bantuan get param dan di sana saya

28
00:02:54,980 --> 00:02:58,640
beri nama ini fav, ini dia, jadi itulah nama yang

29
00:02:59,460 --> 00:03:01,360
dengannya kita dapat mengambilnya.

30
00:03:01,370 --> 00:03:06,080
Sekarang kita memiliki informasi favorit di header dan sekarang kita dapat menggunakan ini untuk membuat ikon yang berbeda

31
00:03:06,080 --> 00:03:06,610
di sini.

32
00:03:06,620 --> 00:03:12,260
Jadi, alih-alih selalu merender bintang iOS, saya akan memiliki ekspresi dinamis di sini dan saya akan memeriksa apakah

33
00:03:12,260 --> 00:03:13,610
favorit itu benar, jika

34
00:03:13,610 --> 00:03:17,440
ya, maka saya ingin menggunakan bintang iOS yang merupakan bintang bidang ini,

35
00:03:17,810 --> 00:03:18,500
jika

36
00:03:18,620 --> 00:03:22,220
tidak, saya akan ll membuat garis besar bintang iOS dan itu

37
00:03:22,220 --> 00:03:23,570
akan menjadi bintang kosong.

38
00:03:24,730 --> 00:03:28,960
Dengan itu, kami berharap memiliki set yang berfungsi seperti yang diharapkan.

39
00:03:29,020 --> 00:03:30,400
Jika saya pergi ke spageti,

40
00:03:30,400 --> 00:03:32,760
sekarang ini adalah bintang kosong dan jika saya klik

41
00:03:32,770 --> 00:03:35,640
ini, itu adalah bintang yang terisi dan merupakan bagian dari favorit.

42
00:03:35,650 --> 00:03:41,020
Jika saya kemudian pergi ke layar detail di sini, Anda melihatnya perlu sedikit sampai

43
00:03:41,020 --> 00:03:47,590
bintang diisi di sini juga, kita harus memperbaikinya. Jika sekarang saya klik di sini dan kami kembali ke makanan,

44
00:03:47,590 --> 00:03:53,660
ada juga yang diperbarui dan itulah keajaiban Redux, itu memperbarui satu bagian dari aplikasi jika ada sesuatu yang terkait perubahan di

45
00:03:53,740 --> 00:03:58,570
bagian lain, itulah yang harusnya berlaku di sini. Jadi yang biasanya berfungsi,

46
00:03:58,570 --> 00:04:05,890
satu-satunya hal yang tidak terlalu indah adalah bahwa bintang ini awalnya kosong dan hanya diisi setelah

47
00:04:05,890 --> 00:04:08,640
ini dimuat, jadi kita dapat memperbaikinya

48
00:04:08,650 --> 00:04:15,760
tetapi selain itu, ini berfungsi sebagaimana mestinya. Sekarang untuk memperbaiki bintang yang awalnya kosong ini, sekali

49
00:04:15,880 --> 00:04:16,950
lagi kita

50
00:04:16,990 --> 00:04:21,400
bisa menggunakan solusi yang saya jelaskan sebelumnya untuk data header awal itu.

51
00:04:21,550 --> 00:04:24,040
Kami tidak ingin menunggu render pertama selesai,

52
00:04:24,040 --> 00:04:29,140
alih-alih kami harus meneruskan data awal ini ke komponen ini ketika kami menavigasi ke sana.

53
00:04:30,090 --> 00:04:35,910
Oleh karena itu saatnya untuk daftar makanan lagi di mana kita memiliki tindakan navigasi ini

54
00:04:35,910 --> 00:04:43,170
untuk juga meneruskan ini sudah kunci fav, jadi kunci ini yang saya coba ekstrak di sini di layar detail

55
00:04:44,040 --> 00:04:50,580
makanan di sana, dapatkan param adalah fav. Saya ingin meneruskan nilai saat ini ketika kami memuat komponen

56
00:04:50,790 --> 00:04:55,680
ini, ketika kami memuat layar ini di sini dari dalam daftar makanan yang merupakan komponen

57
00:04:56,390 --> 00:04:57,540
yang memicu navigasi

58
00:04:57,690 --> 00:05:03,390
ke detail makanan dan tentu saja di sana, itemData. item adalah makanan tunggal tetapi itu tidak menyimpan informasi tentang apakah itu bagian dari favorit

59
00:05:03,390 --> 00:05:04,070
kami atau tidak,

60
00:05:04,180 --> 00:05:08,460
tetapi tentu saja kita dapat mengetahui apakah itu masalahnya atau tidak. Dalam daftar makanan,

61
00:05:08,460 --> 00:05:14,360
kita juga dapat memanfaatkan toko Redux, tidak hanya dari komponen layar.

62
00:05:14,370 --> 00:05:22,260
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

63
00:05:22,260 --> 00:05:31,560
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

64
00:05:31,560 --> 00:05:34,150
sekarang ketika kita membuat item makanan

65
00:05:34,260 --> 00:05:39,240
tunggal, kita bisa menggunakannya untuk mengetahui apakah makanan itu merupakan bagian dari makanan

66
00:05:39,240 --> 00:05:41,070
favorit kita. Omong-omong, Anda

67
00:05:41,100 --> 00:05:43,710
tidak dapat menggunakan pemilih penggunaan di sana,

68
00:05:43,770 --> 00:05:49,680
itu tidak akan menjadi penggunaan yang valid karena Anda harus menggunakan React hooks hanya pada tingkat

69
00:05:49,680 --> 00:05:53,950
akar fungsi komponen Anda, tidak dalam fungsi bersarang atau bersarang jika blok

70
00:05:53,970 --> 00:05:56,370
atau sesuatu seperti itu, jadi gunakan pemilih

71
00:05:57,430 --> 00:06:03,500
penggunaan di sini tidak diperbolehkan tetapi kita dapat menggunakan makanan favorit kami di sana tentu saja dan

72
00:06:03,830 --> 00:06:12,890
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

73
00:06:12,890 --> 00:06:14,840
.

74
00:06:14,840 --> 00:06:14,840
barang.

75
00:06:14,870 --> 00:06:20,990
id, jadi ID makanan saat ini kami render. Oleh karena itu favorit akan menyimpan item yang kami temukan

76
00:06:20,990 --> 00:06:27,290
di sana, atau kami menggunakan beberapa di sini yang merupakan metode Javascript bawaan yang akan mengembalikan true jika item

77
00:06:27,290 --> 00:06:29,930
dalam makanan favorit cocok dengan kondisi ini.

78
00:06:29,930 --> 00:06:35,570
Jadi jika favorit adalah benar, kita tahu item ini adalah favorit dan oleh karena itu kita dapat

79
00:06:35,570 --> 00:06:40,300
menggunakan favorit sebagai nilai untuk fav yang kita lewati sebagai parameter awal ke layar

80
00:06:40,460 --> 00:06:44,930
detail makanan dan sekarang bintang yang berkedip ini yang awalnya kosong harus pergi

81
00:06:44,930 --> 00:06:50,630
Sekarang jika saya menandai ini sebagai favorit di sini dan saya meninggalkan ini dan saya kembali, itu

82
00:06:50,630 --> 00:06:51,550
sudah diisi

83
00:06:51,590 --> 00:06:56,660
sejak awal, juga di layar favorit tentu saja. Jadi begitulah, ini adalah bagaimana kita dapat bekerja

84
00:06:56,730 --> 00:06:58,830
dengan favorit, mari sekarang pastikan kita menunjukkan

85
00:06:58,830 --> 00:07:03,660
beberapa teks dummy di sini di layar favorit jika kita tidak punya data untuk ditampilkan sebaliknya

86
00:07:03,680 --> 00:07:05,400
dan setelah itu, mari kita

87
00:07:05,400 --> 00:07:06,960
berhati-hati dengan filter kita.