1
00:00:02,370 --> 00:00:08,100
Sekarang dengan filter yang diberikan di sini, tentu akan menyenangkan jika memiliki tombol simpan di sini di bagian atas

2
00:00:08,100 --> 00:00:11,840
yang memungkinkan kita menyimpan perubahan apa pun ke filter yang kita buat.

3
00:00:11,940 --> 00:00:16,530
Jadi di layar filter, kami sudah memiliki satu tombol tajuk di headerLeft, sekarang saya juga

4
00:00:16,530 --> 00:00:23,430
ingin memiliki satu di tajuk Kanan, jadi di sebelah kanan tajuk. Jadi headerRight di sini pada dasarnya sama dengan yang kita

5
00:00:23,430 --> 00:00:28,050
miliki di sini, jadi kita bisa menyalin ini di sini karena kita ingin memiliki

6
00:00:28,050 --> 00:00:35,280
tombol header di sana dengan satu tombol, yang akan menjadi tombol simpan dan ikon yang dapat kita gunakan ada misalnya dan dari Tentu

7
00:00:35,280 --> 00:00:41,250
saja Anda dapat memilih yang berbeda tetapi di sini, saya akan pergi dengan misalnya menyimpan dan sekarang ketika ini

8
00:00:41,400 --> 00:00:44,940
ditekan, itu akan sedikit rumit. Tentu saja, kita dapat

9
00:00:44,940 --> 00:00:48,710
menjalankan fungsi dan kita bisa menghibur filter penyimpanan log di sini.

10
00:00:48,900 --> 00:00:54,000
Sekarang logika sebenarnya untuk menyimpan dan menerapkan filter adalah sesuatu yang akan kami urus dalam modul

11
00:00:54,120 --> 00:00:57,150
berikutnya, tetapi masih ada beberapa masalah dengan itu.

12
00:00:57,720 --> 00:01:01,530
Jika saya menyimpannya seperti ini dan kita pergi ke filter,

13
00:01:01,530 --> 00:01:12,150
tentu saja kita dapat menekan ini, ini berhasil tetapi yang akan menyenangkan adalah kita kemudian benar-benar mengumpulkan keadaan filter kita saat ini, jadi pada dasarnya mendapatkan potret keadaan kita

14
00:01:12,150 --> 00:01:19,170
saat ini di sini dan untuk saat ini log ini ke konsol, dalam modul berikutnya menerapkan ini entah bagaimana

15
00:01:19,320 --> 00:01:26,740
untuk menyaring resep yang kami tunjukkan di layar lain. Sekarang ini mungkin terdengar sepele tetapi kita akan memiliki masalah

16
00:01:26,740 --> 00:01:28,910
di sini, filter kami,

17
00:01:29,110 --> 00:01:36,360
sehingga informasi, filter mana yang ditetapkan, itu semua disimpan dalam variabel status ini di sini, tepat dan itu adalah bagian

18
00:01:36,370 --> 00:01:38,560
dari komponen kami, tombol kami bagaimanapun

19
00:01:38,770 --> 00:01:41,530
dalam navigasi pilihan dan ya, di sana kita

20
00:01:41,530 --> 00:01:47,440
mendapatkan data snap yang misalnya memberi kita alat navigasi pada akhirnya tetapi apa yang tidak kita

21
00:01:47,450 --> 00:01:52,990
miliki di sini adalah akses ke keadaan komponen kita dan itulah yang saya butuhkan di

22
00:01:52,990 --> 00:01:57,970
sini dan sekarang ini di sini adalah benar-benar pola penting yang mungkin terlihat seperti

23
00:01:58,540 --> 00:02:08,020
peretasan yang aneh atau solusi tetapi yang merupakan cara untuk benar-benar berkomunikasi antara opsi navigasi Anda dan komponen Anda jika Anda bergantung pada perubahan data di

24
00:02:08,020 --> 00:02:13,150
komponen Anda di dalam opsi navigasi Anda. Jadi dalam opsi navigasi,

25
00:02:13,150 --> 00:02:18,830
Anda memerlukan informasi tentang data yang berubah di komponen Anda.

26
00:02:18,840 --> 00:02:24,980
Ini juga merupakan pendekatan yang Anda temukan di dokumen resmi navigasi. Kita dapat menggunakan params, sehingga hal yang

27
00:02:25,190 --> 00:02:30,940
kita lewati antara layar, untuk berkomunikasi antara komponen kita dan opsi navigasi dan ini

28
00:02:31,010 --> 00:02:35,070
mungkin terdengar aneh tapi inilah yang akan kita lakukan sekarang.

29
00:02:36,360 --> 00:02:44,170
Katakanlah di sini di komponen kami, kami menambahkan fungsi baru dan saya akan memberi nama fungsi ini di sini menyimpan filter, Anda

30
00:02:44,460 --> 00:02:46,950
dapat memberi nama sesuai keinginan Anda.

31
00:02:47,000 --> 00:02:49,970
Ini adalah fungsi yang tidak memerlukan argumen tetapi

32
00:02:51,110 --> 00:02:57,410
memiliki satu pekerjaan, itu akan membuat filter yang diterapkan konstan misalnya yang merupakan objek yang mengumpulkan filter kami.

33
00:02:57,410 --> 00:03:02,300
Jadi di sana kita bisa memiliki glutenFree sebagai kunci dan kita menyimpan isGlutenFree

34
00:03:02,300 --> 00:03:07,250
sebagai nilai, kita memiliki lactoseFree sebagai kunci dan kita menyimpan nilai keadaan isLactoseFree

35
00:03:07,250 --> 00:03:08,480
kita saat ini.

36
00:03:08,690 --> 00:03:17,540
Kami melakukan hal yang sama untuk vegan dengan isVegan dan kami melakukan hal yang sama untuk isVegetarian dan isVegetarian, seperti

37
00:03:17,540 --> 00:03:23,930
itu dan setelah itu, saya akan menghibur log hal filter yang diterapkan ini.

38
00:03:24,070 --> 00:03:32,770
Sekarang masalahnya, saya ingin memberikan akses ke fungsi ini yang merupakan bagian dari komponen saya untuk opsi navigasi saya sehingga saya dapat

39
00:03:32,770 --> 00:03:38,080
memicu fungsi ini dari dalam opsi navigasi dan untuk ini, kita dapat menggunakan

40
00:03:38,200 --> 00:03:38,890
params.

41
00:03:42,490 --> 00:03:49,300
Mari kita tambahkan efek penggunaan sehingga kita memiliki cara mengeksekusi kode setiap kali keadaan kita

42
00:03:49,300 --> 00:03:58,810
berubah karena saat itulah saya ingin meneruskan fungsi yang diperbarui ini yang pada dasarnya menangkap keadaan saya saat ini ke opsi

43
00:03:58,810 --> 00:03:59,830
navigasi saya.

44
00:03:59,830 --> 00:04:06,280
Jadi di sini, saya dapat menambahkan efek penggunaan dan menggunakan efek mengambil fungsi yang

45
00:04:06,280 --> 00:04:16,460
berjalan setiap kali keadaan kita berubah dan apa pun komponen yang di-render dan di sana, kita sekarang dapat menggunakan params navigasi set props.

46
00:04:16,460 --> 00:04:18,130
Kami belum pernah menggunakan set

47
00:04:18,130 --> 00:04:20,400
params sebelumnya, kami hanya bekerja dengan get param.

48
00:04:20,510 --> 00:04:27,170
Kami tidak menggunakan set params karena sebelumnya kami hanya mengatur params ketika kami menavigasi ke layar baru, lalu misalnya

49
00:04:27,170 --> 00:04:33,530
seperti pada layar kategori, kami meneruskan params kami seperti ini ke layar baru tetapi kami dapat menggunakan params

50
00:04:33,560 --> 00:04:42,160
yang ditetapkan untuk memperbarui params nilai untuk layar yang saat ini dimuat. Sekarang di sini di layar ini, kami tidak punya params, jadi kosong,

51
00:04:42,160 --> 00:04:44,600
maka kami dapat mengatur params ke objek

52
00:04:45,690 --> 00:04:51,120
baru di sini dan saya ingin menambahkan satu entri di sana tetapi Anda dapat menambahkan

53
00:04:51,120 --> 00:04:52,810
sebanyak yang Anda inginkan.

54
00:04:53,780 --> 00:05:04,040
Saya ingin menambahkan tombol simpan dan Anda dapat mengambil nama apa pun untuk kunci yang Anda inginkan dan arahkan ke simpan filter,

55
00:05:04,060 --> 00:05:08,520
jadi pada fungsi ini. Saya tidak menjalankan fungsi, saya tidak

56
00:05:08,580 --> 00:05:10,050
menambahkan tanda kurung,

57
00:05:10,080 --> 00:05:16,740
saya hanya menunjuk itu, saya hanya menggunakan variabel ini yang memegang pointer pada fungsi ini pada akhirnya dan

58
00:05:16,740 --> 00:05:23,250
meneruskan nilai ini, jadi teruskan pointer ini atau simpan pointer ini ke fungsi di tombol simpan itu, di

59
00:05:23,250 --> 00:05:28,230
objek yang sekarang saya tetapkan sebagai params di layar ini, di layar filter.

60
00:05:28,430 --> 00:05:34,280
Ini memungkinkan kita untuk pergi ke opsi navigasi dan di sana kita memiliki akses ke data

61
00:05:34,340 --> 00:05:43,310
nav dan oleh karena itu untuk navigasi ke kanan dan itu berarti bahwa di sini untuk tombol simpan, ketika menekan ini, kita sebenarnya dapat

62
00:05:43,310 --> 00:05:46,790
menggunakan navData. navigasi. getParam, itu

63
00:05:46,790 --> 00:05:53,060
adalah bagaimana kita dapat mengambil parameter dan itu tersedia di sini di opsi navigasi juga,

64
00:05:53,060 --> 00:06:03,270
simpan dan saya dapat mengambil parameter penyimpanan yang saya atur di sini dalam efek penggunaan dan saya tahu ini sangat aneh saat pertama kali

65
00:06:03,280 --> 00:06:08,120
Anda melihat ini dan sepertinya hack yang benar-benar kotor tetapi tidak.

66
00:06:08,200 --> 00:06:14,230
Ini adalah cara yang sah untuk berkomunikasi antara komponen Anda dan opsi navigasi Anda yang biasanya

67
00:06:14,230 --> 00:06:18,300
Anda butuhkan ketika memiliki item tindakan dalam opsi navigasi Anda.

68
00:06:18,310 --> 00:06:26,880
Ini akan memberi kita akses ke parameter kita dan di sana kita mengakses parameter simpan, parameter simpan akan menjadi fungsi ini dan kita

69
00:06:27,600 --> 00:06:33,180
memperbarui nilai dalam parameter itu setiap kali keadaan kita berubah dan kita perlu melakukan ini

70
00:06:33,180 --> 00:06:38,880
karena dalam fungsi ini, ini dibuat setiap kali keadaan kita berubah dan itu masuk dalam

71
00:06:38,880 --> 00:06:40,530
nilai-nilai negara terbaru

72
00:06:40,620 --> 00:06:45,420
dan tentu saja itu yang kita inginkan ketika fungsi ini dijalankan pada akhirnya

73
00:06:45,750 --> 00:06:49,110
dengan bantuan params melalui tombol itu di opsi navigasi.

74
00:06:49,110 --> 00:06:54,300
Jadi kami menggunakan params sebagai cara berkomunikasi antara komponen kami dan

75
00:06:54,300 --> 00:06:59,730
opsi navigasi, semacam solusi tapi memang, yang Anda temukan di dokumen resmi

76
00:06:59,730 --> 00:07:07,390
juga dan cara Anda berkomunikasi di sini. Sekarang sebelum kita menyimpan ini, ada dua hal yang perlu kita lakukan,

77
00:07:07,390 --> 00:07:14,320
gunakan efek sekarang berjalan setiap kali komponen ini diperbarui. Pada akhirnya, itu hanya akan berjalan ketika menyimpan filter memiliki nilai baru.

78
00:07:14,440 --> 00:07:20,740
Jadi saya akan menambahkan argumen kedua untuk menggunakan efek yang merupakan array dependensi ini dan di sana, simpan filter, jadi

79
00:07:20,980 --> 00:07:23,530
variabel ini di sini yang memiliki

80
00:07:23,530 --> 00:07:26,470
fungsi adalah dependensi dan sekarang, ini akan selalu dibangun

81
00:07:26,470 --> 00:07:30,900
kembali ketika komponen Anda dibangun kembali, jadi tidak benar-benar ketergantungan yang membantu kami tetapi

82
00:07:31,090 --> 00:07:37,600
kami akan segera memperbaikinya dan alat peraga juga merupakan ketergantungan. Sekarang sebenarnya untuk menghindari rendering ulang yang tidak perlu

83
00:07:37,600 --> 00:07:39,140
setiap kali ada perubahan

84
00:07:39,370 --> 00:07:48,330
komponen param, saya akan menggunakan cara berbeda untuk mengekstraksi prop navigasi saya, saya akan menggunakan destrrukturisasi di sini, seperti ini, navigasi sama dengan

85
00:07:48,870 --> 00:07:49,770
props.

86
00:07:49,770 --> 00:07:56,350
Ini adalah sintaks yang menggunakan destruksi objek yang berarti alat peraga adalah objek dan ini mengeluarkan kunci navigasi dan menyimpannya dalam konstanta

87
00:07:56,350 --> 00:08:02,460
baru dengan nama yang sama, sehingga dari navigasi yang sama. Ini menyimpan nilai dalam prop navigasi dalam

88
00:08:02,460 --> 00:08:05,560
konstanta navigasi sekarang, itulah yang dilakukan oleh sintaks

89
00:08:05,560 --> 00:08:11,940
dan keuntungan bahwa kita sekarang memiliki konstanta navigasi di sini yang dapat kita gunakan dalam efek penggunaan

90
00:08:11,940 --> 00:08:17,780
tanpa props karena kita menyimpannya dalam konstanta terpisah sekarang dan sekarang kita dapat menambahkan ini sebagai

91
00:08:17,820 --> 00:08:21,860
dependensi yang berarti ketika ini berubah, ini akan dibangun kembali

92
00:08:21,990 --> 00:08:27,500
tetapi jika ada hal lain di props yang berubah, ini tidak akan perlu mengulangi efeknya.

93
00:08:27,750 --> 00:08:34,350
Sekarang untuk memastikan bahwa hanya menyimpan pembaruan filter ketika keadaan kita berubah, kita dapat mengimpor kait panggilan balik

94
00:08:34,350 --> 00:08:38,000
penggunaan dari React, kait lain yang dibangun ke dalam React

95
00:08:38,080 --> 00:08:43,560
dan ini memungkinkan kita untuk membungkus suatu fungsi sehingga fungsi ini sebenarnya di-cache oleh React

96
00:08:43,560 --> 00:08:46,710
dan hanya dibuat ulang jika dependensinya berubah.

97
00:08:46,710 --> 00:08:53,610
Kami membungkus ini di sekitar fungsi save filter kami, seperti ini, jadi kami melewatkan fungsi ini sebagai argumen untuk menggunakan

98
00:08:53,610 --> 00:08:56,010
panggilan balik dan menggunakan panggilan balik juga

99
00:08:56,010 --> 00:09:01,710
membutuhkan argumen kedua yang merupakan array dari dependensi dan di sana, kita perlu menentukan semua dependensi

100
00:09:01,710 --> 00:09:03,300
yang kita miliki

101
00:09:03,300 --> 00:09:09,930
di sini yang bisa berubah dan itu akan menuntun kita untuk membuat kembali fungsi itu dan itu pada dasarnya

102
00:09:09,930 --> 00:09:18,410
adalah kasus jika salah satu dari empat negara di sini berubah. Jadi isGlutenFree, isLactoseFree, isVegan dan isVegetarian sekarang semua dependensi dari penggunaan

103
00:09:18,420 --> 00:09:23,610
panggilan balik dan itu berarti fungsi komponen ini di sini akan diciptakan kembali jika

104
00:09:23,730 --> 00:09:26,160
ada dari kondisi ini di sini

105
00:09:26,310 --> 00:09:32,210
yang berubah, jika ada yang menyebabkan komponen ini untuk dirender ulang, kami tidak akan membuat ulang ini

106
00:09:32,310 --> 00:09:37,410
berfungsi dan itu pada gilirannya penting karena fungsi penyimpanan filter adalah ketergantungan efek penggunaan.

107
00:09:37,530 --> 00:09:43,620
Jadi jika itu diciptakan kembali, gunakan efek berjalan lagi yang memperbarui params kami dan kami ingin menjaga ini seminimal mungkin

108
00:09:43,620 --> 00:09:48,340
dan tidak terus-menerus memperbarui params kami tetapi benar-benar hanya melakukannya jika kita perlu melakukannya.

109
00:09:49,950 --> 00:09:56,790
Dengan ini, kita sekarang dapat menekan tombol simpan dan melihat filter yang kita pilih, jadi mari kita

110
00:09:56,850 --> 00:09:59,250
pergi ke filter di sini dan

111
00:10:01,970 --> 00:10:03,770
sekarang ini rusak.

112
00:10:03,770 --> 00:10:06,000
Apakah Anda tahu mengapa itu akan pecah?

113
00:10:06,980 --> 00:10:14,380
Masalahnya adalah, saya memiliki navigasi di sini sebagai ketergantungan dalam efek penggunaan dan saya menjelaskan mengapa saya memilikinya, benar, bahwa saya tidak

114
00:10:14,380 --> 00:10:21,090
ingin memiliki alat peraga secara keseluruhan dan seterusnya. Masalahnya adalah, ketika kita memanggil set params, kita menambahkan

115
00:10:21,100 --> 00:10:27,970
params baru pada navigator kita pada akhirnya dan apa yang dilakukan juga adalah hal itu menyebabkan navigasi

116
00:10:27,970 --> 00:10:28,770
berubah.

117
00:10:28,900 --> 00:10:31,150
Jadi pada akhirnya, saya memiliki loop tak terbatas di sini.

118
00:10:31,300 --> 00:10:36,810
Jika saya menghapus navigasi di sini sebagai ketergantungan, maka ini akan berfungsi. Jika sekarang kami menyimpan ini, sekarang jika

119
00:10:36,820 --> 00:10:42,550
Anda menutup kedua aplikasi di sini dengan bantuan manajer tugas dan Anda kemudian menyalakannya kembali di

120
00:10:43,120 --> 00:10:50,230
kedua sistem operasi, Anda akan melihat bahwa sekarang ini benar-benar berfungsi dan Anda dapat menekan save here, sekarang apa yang Anda

121
00:10:50,230 --> 00:10:53,220
Saya tidak akan melihat output di log di sini.

122
00:10:53,230 --> 00:10:58,960
Namun itu masuk akal karena jika Anda melihat lebih dekat pada tombol simpan ini di header

123
00:10:59,780 --> 00:11:06,310
kami, maka apa yang saya lakukan di sini di onPress adalah saya pada akhirnya menjalankan fungsi ini, tetapi apa fungsinya?

124
00:11:06,370 --> 00:11:11,350
Itu mengambil parameter kami yang disimpan di atau disimpan di tombol simpan dan

125
00:11:11,350 --> 00:11:12,570
apa ini?

126
00:11:12,580 --> 00:11:17,770
Nah seperti yang disebutkan sebelumnya, sebuah pointer pada fungsi save filter, jadi kami mengambil pointer itu.

127
00:11:18,250 --> 00:11:22,630
Jika kemudian kita tidak melakukan apa-apa dengan pointer itu, kita tidak melakukan apa-apa.

128
00:11:22,630 --> 00:11:27,940
Itu adalah pointer pada suatu fungsi, jadi tentu saja kita perlu menjalankannya seperti ini dengan menambahkan tanda kurung.

129
00:11:27,940 --> 00:11:34,120
Atau kita cukup menyingkirkan fungsi panah anonim ini di sini dan kita cukup mengikatTekan dengan hasil

130
00:11:34,120 --> 00:11:40,420
mengambil pointer kita di sini seperti itu karena kemudian pointer ini pada fungsi akan dieksekusi untuk kita

131
00:11:40,420 --> 00:11:42,270
ketika kita menekan ini,

132
00:11:42,280 --> 00:11:43,210
itulah alternatifnya.

133
00:11:43,960 --> 00:11:48,370
Jadi sekarang jika kita menyimpan ini dan karena itu kita membiarkan ini memuat kembali

134
00:11:48,370 --> 00:11:55,200
dan kita kembali ke filter, jika saya tekan simpan di sini, kita sekarang melihat output di log, mari gulir sedikit di sini,

135
00:11:55,300 --> 00:11:56,940
semuanya diatur ke false.

136
00:11:57,040 --> 00:12:02,800
Jika sekarang saya mengatur lactoseFree dan vegetarian menjadi true dan saya menekan save, kita melihat log

137
00:12:03,070 --> 00:12:09,080
lain dan memang ada vegetarian dan lactoseFree diatur ke true yang persis seperti yang saya miliki di sini.

138
00:12:09,100 --> 00:12:14,420
Jadi sekarang sudah berfungsi, mari kita konfirmasi bahwa itu juga berfungsi di Android dengan pergi ke filter juga,

139
00:12:14,440 --> 00:12:18,480
mari kita tetapkan lactoseFree menjadi true dan simpan ini dan jika kita melakukannya,

140
00:12:18,520 --> 00:12:20,080
itu adalah output Android

141
00:12:20,110 --> 00:12:22,290
kita di sini, lactoseFree benar, semua yang

142
00:12:22,330 --> 00:12:24,550
lain salah , jadi sekarang ini juga berfungsi.

143
00:12:24,550 --> 00:12:29,830
Jadi solusi ini bisa agak sulit untuk membungkus kepala Anda dan menghindari loop tak terbatas di

144
00:12:30,020 --> 00:12:31,270
sini juga penting,

145
00:12:31,330 --> 00:12:38,230
memastikan bahwa Anda akan menggunakan panggilan balik di sini untuk menghindari pembangunan kembali yang tidak perlu dari fungsi ini di sini juga

146
00:12:38,230 --> 00:12:43,850
adalah sesuatu yang harus Anda lakukan, sehingga ketika Anda perbarui params dan karena itu komponen ini dibangun

147
00:12:43,850 --> 00:12:48,950
kembali, Anda juga tidak membangun kembali fungsi itu dan karena itu juga memasukkan loop tak terbatas.

148
00:12:48,950 --> 00:12:54,380
Tetapi dengan itu, kami memiliki cara berkomunikasi antara opsi komponen dan navigasi yang biasanya merupakan pola

149
00:12:54,380 --> 00:13:00,470
yang Anda butuhkan ketika Anda memiliki item tindakan di bilah tindakan Anda dan Anda ingin memicu sesuatu yang

150
00:13:00,470 --> 00:13:04,720
bergantung pada data yang dikelola dalam komponen Anda dengan bantuan ini tombol.