1
00:00:02,630 --> 00:00:05,410
Mari kita mulai dengan favorit.

2
00:00:05,420 --> 00:00:13,270
Saya ingin memastikan bahwa ketika saya dalam resep, saya dapat mengklik bintang itu dan menambahkan ini sebagai favorit dan menunjukkannya di sini di layar favorit

3
00:00:13,660 --> 00:00:18,490
di mana saya saat ini tidak melihat apa-apa karena saya menghapus favorit boneka ini.

4
00:00:19,880 --> 00:00:20,200
Untuk itu

5
00:00:20,210 --> 00:00:25,830
saya akan mulai di folder toko, di folder tindakan dan tambahkan folder baru yang juga akan saya beri nama makanan. js, Anda dapat menamainya secara berbeda jika itu membingungkan

6
00:00:25,840 --> 00:00:30,570
Anda, tetapi ya, kedua file ini makan. js di sini dalam aksi

7
00:00:30,560 --> 00:00:34,970
dan makan. js dalam reduksi dan dalam aksi makan. File js,

8
00:00:34,960 --> 00:00:41,900
saya akan mengatur beberapa tindakan Redux yang biasanya dimulai dengan menyiapkan beberapa

9
00:00:41,930 --> 00:00:48,760
pengidentifikasi unik yang saya simpan dalam konstanta dan yang akan beralih favorit.

10
00:00:49,070 --> 00:00:50,710
Anda dapat menggunakan apa pun yang

11
00:00:50,780 --> 00:00:53,860
Anda inginkan di sini, nilai yang Anda simpan di sini biasanya adalah

12
00:00:54,350 --> 00:00:59,570
pengidentifikasi yang sama, jadi ini adalah nilai pengenal dan itu hanya disimpan dalam konstanta sehingga kita tidak harus mengetikkan ini

13
00:00:59,570 --> 00:01:02,870
secara manual nanti tetapi kita selalu dapat mengimpor ini konstan dan menghindari

14
00:01:02,870 --> 00:01:03,690
kesalahan ketik.

15
00:01:03,860 --> 00:01:05,440
Sekali lagi jika ini

16
00:01:05,440 --> 00:01:09,730
baru bagi Anda, periksa sumber daya React Redux khusus terlebih dahulu.

17
00:01:09,950 --> 00:01:12,680
Sekarang saya juga akan menggunakan pola pembuat tindakan di

18
00:01:12,680 --> 00:01:19,190
sini yang berarti saya memiliki pengenal di sini, tetapi sekarang saya juga akan mengekspor fungsi yang membuat saya tindakan karena suatu

19
00:01:19,280 --> 00:01:24,050
tindakan bukan hanya pengidentifikasi sering dan dalam hal ini kasusnya, itu juga membutuhkan beberapa payload

20
00:01:24,050 --> 00:01:29,630
tambahan dan oleh karena itu kita benar-benar memiliki tindakan yang merupakan objek dengan pengidentifikasi dan payload dan oleh

21
00:01:29,780 --> 00:01:35,930
karena itu di sini, saya akan menambahkan fungsi yang membuat saya objek tindakan seperti itu dan saya akan beri nama

22
00:01:35,930 --> 00:01:37,430
ini toggle favorit seperti

23
00:01:37,490 --> 00:01:42,950
ini, pilih pengenal tetapi dalam kasus unta dan ini adalah fungsi yang dapat menerima beberapa data karena saya

24
00:01:42,950 --> 00:01:48,500
akan menjadi orang yang memanggilnya dan yang akan mengembalikan objek Javascript yang menggambarkan tindakan ini, jadi yang memiliki

25
00:01:48,500 --> 00:01:50,300
katakanlah sebuah tipe, itu biasanya

26
00:01:50,330 --> 00:01:55,010
bagaimana Anda memanggil bidang pengidentifikasi tetapi Anda umumnya bebas menggunakan apa pun yang Anda inginkan

27
00:01:55,010 --> 00:01:55,590
di

28
00:01:55,670 --> 00:01:57,490
sana dan dalam kasus saya, itu

29
00:01:57,500 --> 00:02:03,700
akan menjadi favorit, jadi saya menunjuk pengenal ini, saya menggunakan string ini sebagai pengidentifikasi dan kemudian data tambahan yang Anda

30
00:02:03,740 --> 00:02:09,500
inginkan, misalnya di sini saya ' Saya perlu iklan d ID makan dari makanan yang harus diaktifkan dan itu

31
00:02:09,500 --> 00:02:14,540
berarti bahwa fungsi ini juga perlu mendapatkan ID ini sebagai input karena jika tidak saya tidak

32
00:02:14,540 --> 00:02:16,700
dapat menyimpannya dalam tindakan yang saya buat.

33
00:02:16,710 --> 00:02:21,120
Jadi ini adalah pencipta aksi saya untuk aksi toggle favorit, sekarang di

34
00:02:21,120 --> 00:02:27,810
peredam, saya ingin bertindak ketika saya mendapatkan aksi toggle favorit dan untuk ini, saya akan menggunakan pola yang mungkin

35
00:02:27,810 --> 00:02:28,370
Anda

36
00:02:28,380 --> 00:02:34,020
lihat jika Anda bekerja dengan Redux sebelumnya , Saya akan menggunakan pernyataan sakelar di sini dan

37
00:02:34,020 --> 00:02:40,890
aktifkan jenis tindakan saya karena perlu diingat bahwa tindakan akan menjadi objek dengan properti jenis yang mengidentifikasi tindakan yang terjadi.

38
00:02:40,890 --> 00:02:45,330
Jadi saya mengaktifkan jenis tindakan itu dan kemudian saya menangani kasus yang berbeda untuk tindakan berbeda

39
00:02:45,330 --> 00:02:46,650
yang mungkin saya miliki.

40
00:02:46,650 --> 00:02:53,040
Jadi di sini saya memiliki tindakan beralih favorit dan untuk ini, Anda perlu mengimpor beralih favorit dari tindakan makan dan itulah sebabnya

41
00:02:53,390 --> 00:02:58,590
saya menyimpan ini di konstanta terpisah karena sekarang saya tidak perlu mengetikkan favorit beralih secara manual di

42
00:02:58,590 --> 00:03:00,820
mana saya mungkin memiliki kesalahan ketik di

43
00:03:00,840 --> 00:03:07,410
sana, sebagai gantinya saya hanya menggunakan konstanta di mana string disimpan. Dan sekarang di sini, saya menjalankan logika apa pun yang

44
00:03:07,410 --> 00:03:13,310
ingin saya jalankan untuk kemudian bekerja dengan tindakan itu dan mengubah keadaan saya sehingga makan dengan ID makan yang

45
00:03:13,350 --> 00:03:19,470
merupakan bagian dari tindakan saya ditambahkan ke makanan favorit atau dihapus dari sana jika sudah menjadi bagian karena itu tindakan

46
00:03:19,470 --> 00:03:20,790
beralih di sini,

47
00:03:20,820 --> 00:03:28,770
saya ingin menambahkan item yang belum menjadi favorit, saya ingin menghapus item yang. Catatan samping, dalam pernyataan switch, saya juga akan menambahkan case

48
00:03:28,770 --> 00:03:29,250
default

49
00:03:29,250 --> 00:03:33,150
di mana saya baru saja mengembalikan status yang tidak berubah.

50
00:03:33,150 --> 00:03:36,900
Kita seharusnya tidak benar-benar mencapai itu tetapi jika kita melakukannya, maka itu yang kita lakukan

51
00:03:37,380 --> 00:03:40,800
tetapi kembali ke kasing beralih favorit. Di sana, saya sekarang ingin

52
00:03:42,770 --> 00:03:48,740
pada akhirnya mencari tahu apakah makan saya dengan ID itu bagian dari tindakan karena saya menambahkan ID

53
00:03:48,740 --> 00:03:50,450
makan ke tindakan, jika

54
00:03:50,450 --> 00:03:52,550
makanan itu sudah menjadi bagian dari

55
00:03:52,550 --> 00:03:53,660
makanan favorit,

56
00:03:53,690 --> 00:04:00,960
jika ya saya ingin hapus, jika tidak, saya ingin menambahkannya. Jadi untuk ini, saya akan mulai dengan menemukan indeks makanan di array makanan

57
00:04:00,960 --> 00:04:07,380
favorit karena jika itu adalah -1, saya tahu saya tidak menemukan indeks jadi itu bukan bagian, jika itu lebih besar atau sama dengan

58
00:04:07,390 --> 00:04:07,820
nol,

59
00:04:07,840 --> 00:04:13,540
saya tahu bahwa barang itu adalah bagian dari itu. Jadi saya akan memiliki indeks yang ada di

60
00:04:13,540 --> 00:04:21,960
sini dan saya mendapatkan ini dengan menggunakan makanan favorit negara dan di sana saya memasukkan tanda sama dengan dan menyatakan hanya snapshot keadaan saya

61
00:04:22,010 --> 00:04:27,510
saat ini yang saya dapatkan dan di sana, kita akan memiliki properti makanan favorit dan

62
00:04:27,510 --> 00:04:33,780
saya bisa menggunakan metode indeks pencarian, metode Javascript normal yang dapat saya gunakan pada array untuk mendapatkan indeks

63
00:04:33,840 --> 00:04:39,810
item yang cocok dengan kriteria tertentu yang saya atur di sini dalam fungsi yang saya berikan untuk

64
00:04:40,230 --> 00:04:47,040
menemukan indeks, fungsi ini berjalan pada setiap makanan di array dan jika itu mengembalikan true, maka itu memberi saya indeks

65
00:04:47,040 --> 00:04:48,610
elemen yang dilaluinya.

66
00:04:48,660 --> 00:04:56,900
Jadi di sini saya ingin mengembalikan true jika makan. id sama dengan tindakan. makan Itu hanya berarti bahwa makanan yang

67
00:04:56,930 --> 00:05:02,090
saya lihat di makanan favorit saya memiliki ide yang sama dengan makanan untuk mana tindakan ini

68
00:05:02,090 --> 00:05:08,450
terjadi dan itu berarti jika itu benar untuk setiap item dalam makanan favorit, bahwa makanan yang kita coba untuk beralih

69
00:05:08,540 --> 00:05:13,490
sudah menjadi bagian dari favorit, jadi kita harus menghapusnya karena ini sekarang akan mengembalikan kita indeks

70
00:05:13,490 --> 00:05:13,990
item,

71
00:05:13,990 --> 00:05:20,090
oleh karena itu indeks yang ada akan lebih besar dari -1 dan oleh karena itu, kita kemudian dapat menggunakan indeks

72
00:05:20,090 --> 00:05:21,120
itu untuk menghapusnya.

73
00:05:21,170 --> 00:05:23,660
Jika ini mengembalikan true tanpa item, jadi jika ini pada

74
00:05:23,720 --> 00:05:29,870
akhirnya mengembalikan -1, saya tahu bahwa item tersebut belum menjadi bagian dari makanan favorit. Jadi indeks yang ada menyimpan informasi yang sangat penting

75
00:05:29,870 --> 00:05:34,520
dan karenanya saya akan menggunakannya di sini dalam pernyataan if dan memeriksa apakah indeks

76
00:05:34,520 --> 00:05:40,760
yang ada lebih besar atau sama dengan 0, yang berarti kita sudah memiliki makanan itu sebagai bagian dari

77
00:05:41,390 --> 00:05:43,040
makanan favorit atau tidak.

78
00:05:43,040 --> 00:05:48,290
Sekarang dalam hal ini, jadi item sudah menjadi bagian dari makanan favorit, saya ingin menghapusnya.

79
00:05:48,290 --> 00:05:53,210
Jadi di sini, saya pada akhirnya akan mengembalikan negara baru karena di peredam Anda, pada akhirnya,

80
00:05:53,210 --> 00:06:00,740
Anda harus mengembalikan negara baru yang merupakan objek baru di mana saya pertama-tama menyalin negara yang ada dengan operator penyebaran di sini untuk menarik keluar

81
00:06:00,740 --> 00:06:01,110
semua

82
00:06:01,110 --> 00:06:05,810
pasangan nilai kunci dari kondisi yang ada, sehingga saya tidak kehilangan status apa pun dan

83
00:06:05,870 --> 00:06:06,980
jangan menimpa keadaan

84
00:06:06,980 --> 00:06:12,200
apa pun yang tidak ingin saya timpa dan kemudian saya hanya akan mengganti makanan favorit, jadi saya

85
00:06:12,200 --> 00:06:17,870
akan menambahkan ini properti lagi untuk mengganti makanan favorit yang ada dengan makanan favorit baru saya yang pada

86
00:06:17,930 --> 00:06:21,520
akhirnya harus menjadi makanan favorit lama tanpa item pada indeks ini.

87
00:06:24,250 --> 00:06:30,360
Dan sekarang di sini untuk mendapatkan makanan favorit saya yang diperbarui, saya akan membuat konstanta baru,

88
00:06:30,360 --> 00:06:39,470
updatedFavMeals, di sana saya pertama-tama akan membuat array baru dan mengisinya dengan makanan saya yang sudah ada, jadi pindahkan makanan favorit saya yang sudah ada

89
00:06:39,470 --> 00:06:46,240
seperti ini dan saya melakukan ini untuk membuat salinan array itu sehingga saya tidak memanipulasi array asli jika

90
00:06:46,250 --> 00:06:53,000
sekarang saya mulai mengerjakannya karena sekarang saya ingin mengambil updatedFavMeals saya, panggil sambungan di sini dan kemudian hapus

91
00:06:53,660 --> 00:06:57,470
item di indeks yang ada dan hanya item itu.

92
00:06:57,470 --> 00:07:03,950
Jadi ini pada akhirnya akan mengambil indeks updatedFavMeals ini, edit dan hapus item pada indeks ini dan edit array ini,

93
00:07:04,250 --> 00:07:06,200
itu sebabnya saya menyalinnya sehingga

94
00:07:06,200 --> 00:07:12,110
saya tidak mengedit array asli dan sekarang kita dapat menggunakan array updatedFavMeals ini di sini dan simpan ini

95
00:07:12,110 --> 00:07:17,330
kembali sebagai makanan favorit ke dalam toko kami karena itu akan menjadi susunan makanan favorit

96
00:07:17,390 --> 00:07:19,880
tanpa makanan yang baru saja kami hapus.

97
00:07:23,360 --> 00:07:29,680
Dalam kasus lain yang tentu saja relevan jika kita tidak menemukan produk jadi kami ingin menambahkannya,

98
00:07:29,690 --> 00:07:36,380
di sini saya juga ingin mengembalikan negara baru di mana saya pertama-tama menyalin negara lama dan kemudian

99
00:07:36,380 --> 00:07:42,230
saya akan mengganti makanan favorit untuk pada dasarnya menjadi makanan favorit lama saya dan

100
00:07:42,230 --> 00:07:48,380
sekarang saya bisa memanggil concat, metode Javascript yang dibangun ke dalam Javascript yang mengembalikan array

101
00:07:48,410 --> 00:07:55,520
baru yang mengambil array lama dan menambahkan item baru dan di sana, saya ingin menambahkan makanan untuk ID

102
00:07:55,700 --> 00:08:05,130
itu di sini dan tentu saja Saya dapat menemukan makanan di negara saya, di sana saat makan, ini adalah properti ini, negara di sini

103
00:08:05,130 --> 00:08:08,940
selalu mengacu hanya pada struktur keadaan ini di sini

104
00:08:08,940 --> 00:08:14,240
dan sekarang di sini, saya dapat menemukan makanan yang ingin saya tambahkan dan

105
00:08:14,380 --> 00:08:18,210
karena ini menjadi sangat lama, saya benar-benar akan meng-outsource

106
00:08:18,490 --> 00:08:27,770
ini ke baris baru, jadi makanan saya yang ingin saya tambahkan dapat ditemukan dengan metode find yang berjalan pada semua makanan dan di

107
00:08:27,800 --> 00:08:33,560
sana, jika mealId sama dengan tindakan. mealId, maka saya memiliki makanan yang ingin saya tambahkan dan ini adalah

108
00:08:33,560 --> 00:08:40,180
makanan yang saya gabungkan dengan makanan favorit saya, sehingga saya menambahkan ini ke array itu. Itu harus menjadi logika

109
00:08:40,180 --> 00:08:45,690
yang berfungsi dan yang mengelola favorit kami.

110
00:08:45,700 --> 00:08:52,120
Sekarang kita perlu memastikan bahwa kita benar-benar mengirimkan tindakan ini setiap kali kita mengklik ikon bintang di header

111
00:08:52,120 --> 00:08:52,540
kita.

112
00:08:55,360 --> 00:08:56,570
Untuk mengirim aksi,

113
00:08:56,570 --> 00:09:00,550
mari kita pergi ke layar detail makan karena di situlah kita memiliki ikon

114
00:09:00,550 --> 00:09:05,590
bintang kita di sini dan ketika saya menekan tombol ini, saya pada akhirnya ingin mengirim tindakan.

115
00:09:05,710 --> 00:09:08,520
Kabar baiknya adalah tindakan pengiriman sangat mudah,

116
00:09:08,530 --> 00:09:09,800
kami menggunakan

117
00:09:09,850 --> 00:09:16,190
pemilih, kami juga menggunakan pengiriman yang pada akhirnya memberi kami cara mudah untuk menjalankan suatu fungsi.

118
00:09:16,200 --> 00:09:24,110
Berita buruknya adalah ini tentu saja hanya dapat digunakan di badan komponen di sini, di komponen fungsional kami dan

119
00:09:24,260 --> 00:09:26,150
bukan di opsi navigasi.

120
00:09:26,210 --> 00:09:32,690
Jadi sekali lagi kita harus bekerja dengan mengatur params untuk berkomunikasi antara opsi navigasi dan komponen tetapi tentu saja

121
00:09:32,720 --> 00:09:37,970
itu adalah sesuatu yang bisa kita lakukan. Jadi di sini, di layar detail makanan,

122
00:09:38,040 --> 00:09:45,470
saya hanya akan mulai dengan menelepon menggunakan pengiriman dan apa yang dilakukannya adalah memberi kita fungsi pengiriman, fungsi yang bisa kita panggil

123
00:09:45,470 --> 00:09:53,650
untuk mengirim tindakan baru dan saya akan menyimpan dalam pengiriman bernama konstan. Selanjutnya, saya ingin membuat toler

124
00:09:53,650 --> 00:10:01,210
handler favorit yang merupakan fungsi yang pada akhirnya harus mengirimkan tindakan ini.

125
00:10:01,210 --> 00:10:06,390
Jadi di sini saya ingin memanggil pengiriman yang saya miliki berkat kait ini dan sekarang untuk

126
00:10:06,610 --> 00:10:10,600
mengirim, saya perlu meneruskan tindakan yang ingin saya kirim dan untuk ini,

127
00:10:10,600 --> 00:10:14,410
saya akan menggunakan pembuat tindakan ini untuk beralih favorit di sini.

128
00:10:14,620 --> 00:10:18,340
Jadi kita hanya perlu mengimpor ini, impor dari folder toko, di

129
00:10:20,780 --> 00:10:27,410
sana dari aksi dan di sana dari makanan. File js, dari sana saya ingin mengimpor toggle

130
00:10:27,410 --> 00:10:35,740
favorit, bukan pengidentifikasi di semua huruf besar tapi fungsi pembuat tindakan ini. Dengan yang diimpor di sini, dalam pengiriman kita dapat

131
00:10:35,740 --> 00:10:40,940
memanggil toggle favorit seperti ini dan sekarang di sini kita perlu meneruskan

132
00:10:40,940 --> 00:10:45,440
ID dan itu tentu saja adalah mealId yang sudah kita ekstrak

133
00:10:48,480 --> 00:10:53,310
di sana atau dipilih Meal. Saya juga akan bekerja, apa pun yang

134
00:10:55,350 --> 00:10:58,910
Anda inginkan, saya hanya akan pergi untuk makan. Aku suka ini.

135
00:10:59,010 --> 00:11:07,110
Sekarang kita dapat mengaktifkan kembali efek penggunaan untuk berkomunikasi dengan header kita, bukan dengan baris ini, tetapi dengan navigasi props

136
00:11:07,110 --> 00:11:14,130
set params dan sekarang di sini, saya akan beri nama toggle fav ini, namanya terserah Anda dan

137
00:11:14,130 --> 00:11:16,890
arahkan ke handler toggle favorit saya.

138
00:11:16,890 --> 00:11:22,980
Sekarang toggle handler favorit karena itu harus ditambahkan sebagai dependensi di sini dan untuk menghindari loop

139
00:11:23,580 --> 00:11:30,180
tak terbatas, saya akan menggunakan kembali callback yang saya impor dari React untuk membungkus fungsi ini di sini.

140
00:11:30,180 --> 00:11:37,060
Jadi di sini gunakan callback melilit fungsi ini dan kita perlu menentukan dependensi di sini dan dependensi nomor satu adalah

141
00:11:37,200 --> 00:11:40,020
pengiriman, React Redux akan memastikan bahwa ini tidak

142
00:11:40,020 --> 00:11:44,640
pernah berubah, jadi itu adalah dependensi yang tidak akan pernah berubah, dependensi dua adalah

143
00:11:45,210 --> 00:11:46,730
mealId, itu juga tidak

144
00:11:46,740 --> 00:11:49,270
boleh berubah saat kita berada di halaman

145
00:11:49,340 --> 00:11:54,900
ini, itu akan selalu memiliki nilai yang sama. Jadi dengan itu, fungsi ini seharusnya tidak benar-benar diciptakan

146
00:11:54,900 --> 00:12:00,360
kembali yang berarti efek ini tidak akan pernah dijalankan kembali kecuali itu dibuat kembali yang hanya terjadi jika

147
00:12:00,360 --> 00:12:07,820
kita memiliki ID baru, dalam hal ini akan lebih baik jika ini dibuat ulang tetapi jika tidak, ini akan menang dapat berubah dan karenanya kita

148
00:12:07,820 --> 00:12:10,340
harus memiliki saluran komunikasi yang aman di sini.

149
00:12:10,550 --> 00:12:16,490
Sekarang di header, kita sekarang dapat mengekstrak handler itu, dengan cara kita juga

150
00:12:16,510 --> 00:12:19,040
tidak perlu makanId di sini

151
00:12:19,150 --> 00:12:28,420
lagi, kita sekarang bisa dengan mudah mendapatkan fungsi beralih dari navigasi data navigasi kita dapatkan param dan kemudian saya beri nama

152
00:12:28,420 --> 00:12:35,080
toggle fav , jadi itulah nama param yang dapat kita ekstrak dan ini harus memberi kita

153
00:12:35,080 --> 00:12:41,050
akses ke fungsi ini yang kita lewati. Sekarang beralih favorit adalah apa yang sebenarnya harus dieksekusi ketika kita

154
00:12:41,050 --> 00:12:42,130
menekan tombol ini.

155
00:12:42,550 --> 00:12:49,570
Jadi di sini, saya akan menunjuk ke beralih favorit karena ini memegang pointer pada fungsi ini dan karena itu fungsi

156
00:12:49,600 --> 00:12:56,740
ini akan dieksekusi ketika kita sekarang menekan bintang ini. Kita akan lihat apakah itu berhasil.

157
00:12:56,750 --> 00:13:04,760
Mari kita simpan itu dan kembali ke spageti di sini dan klik bintang ini dan klik ke favorit dan itu

158
00:13:04,760 --> 00:13:05,450
terlihat

159
00:13:05,450 --> 00:13:07,600
bagus, spageti adalah bagian dari favorit.

160
00:13:07,670 --> 00:13:11,440
Mari klik bintang lagi di sini dan pergi ke favorit dan itu hilang,

161
00:13:11,480 --> 00:13:12,730
itu masuk akal.

162
00:13:12,740 --> 00:13:18,290
Klik lagi, itu kembali, buka halaman detail di sini di tab favorit dan klik pada

163
00:13:18,290 --> 00:13:20,550
bintang dan kembali, baik itu hilang.

164
00:13:20,750 --> 00:13:27,410
Mari kita verifikasi juga di Android, untuk schnitzel mungkin, favorit sekarang kosong. Mari kita kembali dan mengklik bintang,

165
00:13:27,410 --> 00:13:30,560
pergi ke favorit, ini

166
00:13:30,560 --> 00:13:39,250
dia, kembali, klik bintang dan itu hilang. Jadi logika ini umumnya berfungsi.

167
00:13:39,250 --> 00:13:43,150
Ada beberapa hal yang masih ingin saya kerjakan, misalnya saya ingin mengubah

168
00:13:43,150 --> 00:13:44,250
ikon berdasarkan status

169
00:13:44,260 --> 00:13:49,600
favorit, saya juga ingin menampilkan beberapa teks di layar favorit ketika itu kosong tetapi secara umum, mengirim

170
00:13:49,600 --> 00:13:52,840
dan menggunakan karya data bahkan jika kita membutuhkannya di tajuk.