Sekarang dengan filter yang diberikan di sini, tentu akan menyenangkan jika memiliki tombol simpan di sini di bagian atas
yang memungkinkan kita menyimpan perubahan apa pun ke filter yang kita buat.
Jadi di layar filter, kami sudah memiliki satu tombol tajuk di headerLeft, sekarang saya juga
ingin memiliki satu di tajuk Kanan, jadi di sebelah kanan tajuk. Jadi headerRight di sini pada dasarnya sama dengan yang kita
miliki di sini, jadi kita bisa menyalin ini di sini karena kita ingin memiliki
tombol header di sana dengan satu tombol, yang akan menjadi tombol simpan dan ikon yang dapat kita gunakan ada misalnya dan dari Tentu
saja Anda dapat memilih yang berbeda tetapi di sini, saya akan pergi dengan misalnya menyimpan dan sekarang ketika ini
ditekan, itu akan sedikit rumit. Tentu saja, kita dapat
menjalankan fungsi dan kita bisa menghibur filter penyimpanan log di sini.
Sekarang logika sebenarnya untuk menyimpan dan menerapkan filter adalah sesuatu yang akan kami urus dalam modul
berikutnya, tetapi masih ada beberapa masalah dengan itu.
Jika saya menyimpannya seperti ini dan kita pergi ke filter,
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
saat ini di sini dan untuk saat ini log ini ke konsol, dalam modul berikutnya menerapkan ini entah bagaimana
untuk menyaring resep yang kami tunjukkan di layar lain. Sekarang ini mungkin terdengar sepele tetapi kita akan memiliki masalah
di sini, filter kami,
sehingga informasi, filter mana yang ditetapkan, itu semua disimpan dalam variabel status ini di sini, tepat dan itu adalah bagian
dari komponen kami, tombol kami bagaimanapun
dalam navigasi pilihan dan ya, di sana kita
mendapatkan data snap yang misalnya memberi kita alat navigasi pada akhirnya tetapi apa yang tidak kita
miliki di sini adalah akses ke keadaan komponen kita dan itulah yang saya butuhkan di
sini dan sekarang ini di sini adalah benar-benar pola penting yang mungkin terlihat seperti
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
komponen Anda di dalam opsi navigasi Anda. Jadi dalam opsi navigasi,
Anda memerlukan informasi tentang data yang berubah di komponen Anda.
Ini juga merupakan pendekatan yang Anda temukan di dokumen resmi navigasi. Kita dapat menggunakan params, sehingga hal yang
kita lewati antara layar, untuk berkomunikasi antara komponen kita dan opsi navigasi dan ini
mungkin terdengar aneh tapi inilah yang akan kita lakukan sekarang.
Katakanlah di sini di komponen kami, kami menambahkan fungsi baru dan saya akan memberi nama fungsi ini di sini menyimpan filter, Anda
dapat memberi nama sesuai keinginan Anda.
Ini adalah fungsi yang tidak memerlukan argumen tetapi
memiliki satu pekerjaan, itu akan membuat filter yang diterapkan konstan misalnya yang merupakan objek yang mengumpulkan filter kami.
Jadi di sana kita bisa memiliki glutenFree sebagai kunci dan kita menyimpan isGlutenFree
sebagai nilai, kita memiliki lactoseFree sebagai kunci dan kita menyimpan nilai keadaan isLactoseFree
kita saat ini.
Kami melakukan hal yang sama untuk vegan dengan isVegan dan kami melakukan hal yang sama untuk isVegetarian dan isVegetarian, seperti
itu dan setelah itu, saya akan menghibur log hal filter yang diterapkan ini.
Sekarang masalahnya, saya ingin memberikan akses ke fungsi ini yang merupakan bagian dari komponen saya untuk opsi navigasi saya sehingga saya dapat
memicu fungsi ini dari dalam opsi navigasi dan untuk ini, kita dapat menggunakan
params.
Mari kita tambahkan efek penggunaan sehingga kita memiliki cara mengeksekusi kode setiap kali keadaan kita
berubah karena saat itulah saya ingin meneruskan fungsi yang diperbarui ini yang pada dasarnya menangkap keadaan saya saat ini ke opsi
navigasi saya.
Jadi di sini, saya dapat menambahkan efek penggunaan dan menggunakan efek mengambil fungsi yang
berjalan setiap kali keadaan kita berubah dan apa pun komponen yang di-render dan di sana, kita sekarang dapat menggunakan params navigasi set props.
Kami belum pernah menggunakan set
params sebelumnya, kami hanya bekerja dengan get param.
Kami tidak menggunakan set params karena sebelumnya kami hanya mengatur params ketika kami menavigasi ke layar baru, lalu misalnya
seperti pada layar kategori, kami meneruskan params kami seperti ini ke layar baru tetapi kami dapat menggunakan params
yang ditetapkan untuk memperbarui params nilai untuk layar yang saat ini dimuat. Sekarang di sini di layar ini, kami tidak punya params, jadi kosong,
maka kami dapat mengatur params ke objek
baru di sini dan saya ingin menambahkan satu entri di sana tetapi Anda dapat menambahkan
sebanyak yang Anda inginkan.
Saya ingin menambahkan tombol simpan dan Anda dapat mengambil nama apa pun untuk kunci yang Anda inginkan dan arahkan ke simpan filter,
jadi pada fungsi ini. Saya tidak menjalankan fungsi, saya tidak
menambahkan tanda kurung,
saya hanya menunjuk itu, saya hanya menggunakan variabel ini yang memegang pointer pada fungsi ini pada akhirnya dan
meneruskan nilai ini, jadi teruskan pointer ini atau simpan pointer ini ke fungsi di tombol simpan itu, di
objek yang sekarang saya tetapkan sebagai params di layar ini, di layar filter.
Ini memungkinkan kita untuk pergi ke opsi navigasi dan di sana kita memiliki akses ke data
nav dan oleh karena itu untuk navigasi ke kanan dan itu berarti bahwa di sini untuk tombol simpan, ketika menekan ini, kita sebenarnya dapat
menggunakan navData. navigasi. getParam, itu
adalah bagaimana kita dapat mengambil parameter dan itu tersedia di sini di opsi navigasi juga,
simpan dan saya dapat mengambil parameter penyimpanan yang saya atur di sini dalam efek penggunaan dan saya tahu ini sangat aneh saat pertama kali
Anda melihat ini dan sepertinya hack yang benar-benar kotor tetapi tidak.
Ini adalah cara yang sah untuk berkomunikasi antara komponen Anda dan opsi navigasi Anda yang biasanya
Anda butuhkan ketika memiliki item tindakan dalam opsi navigasi Anda.
Ini akan memberi kita akses ke parameter kita dan di sana kita mengakses parameter simpan, parameter simpan akan menjadi fungsi ini dan kita
memperbarui nilai dalam parameter itu setiap kali keadaan kita berubah dan kita perlu melakukan ini
karena dalam fungsi ini, ini dibuat setiap kali keadaan kita berubah dan itu masuk dalam
nilai-nilai negara terbaru
dan tentu saja itu yang kita inginkan ketika fungsi ini dijalankan pada akhirnya
dengan bantuan params melalui tombol itu di opsi navigasi.
Jadi kami menggunakan params sebagai cara berkomunikasi antara komponen kami dan
opsi navigasi, semacam solusi tapi memang, yang Anda temukan di dokumen resmi
juga dan cara Anda berkomunikasi di sini. Sekarang sebelum kita menyimpan ini, ada dua hal yang perlu kita lakukan,
gunakan efek sekarang berjalan setiap kali komponen ini diperbarui. Pada akhirnya, itu hanya akan berjalan ketika menyimpan filter memiliki nilai baru.
Jadi saya akan menambahkan argumen kedua untuk menggunakan efek yang merupakan array dependensi ini dan di sana, simpan filter, jadi
variabel ini di sini yang memiliki
fungsi adalah dependensi dan sekarang, ini akan selalu dibangun
kembali ketika komponen Anda dibangun kembali, jadi tidak benar-benar ketergantungan yang membantu kami tetapi
kami akan segera memperbaikinya dan alat peraga juga merupakan ketergantungan. Sekarang sebenarnya untuk menghindari rendering ulang yang tidak perlu
setiap kali ada perubahan
komponen param, saya akan menggunakan cara berbeda untuk mengekstraksi prop navigasi saya, saya akan menggunakan destrrukturisasi di sini, seperti ini, navigasi sama dengan
props.
Ini adalah sintaks yang menggunakan destruksi objek yang berarti alat peraga adalah objek dan ini mengeluarkan kunci navigasi dan menyimpannya dalam konstanta
baru dengan nama yang sama, sehingga dari navigasi yang sama. Ini menyimpan nilai dalam prop navigasi dalam
konstanta navigasi sekarang, itulah yang dilakukan oleh sintaks
dan keuntungan bahwa kita sekarang memiliki konstanta navigasi di sini yang dapat kita gunakan dalam efek penggunaan
tanpa props karena kita menyimpannya dalam konstanta terpisah sekarang dan sekarang kita dapat menambahkan ini sebagai
dependensi yang berarti ketika ini berubah, ini akan dibangun kembali
tetapi jika ada hal lain di props yang berubah, ini tidak akan perlu mengulangi efeknya.
Sekarang untuk memastikan bahwa hanya menyimpan pembaruan filter ketika keadaan kita berubah, kita dapat mengimpor kait panggilan balik
penggunaan dari React, kait lain yang dibangun ke dalam React
dan ini memungkinkan kita untuk membungkus suatu fungsi sehingga fungsi ini sebenarnya di-cache oleh React
dan hanya dibuat ulang jika dependensinya berubah.
Kami membungkus ini di sekitar fungsi save filter kami, seperti ini, jadi kami melewatkan fungsi ini sebagai argumen untuk menggunakan
panggilan balik dan menggunakan panggilan balik juga
membutuhkan argumen kedua yang merupakan array dari dependensi dan di sana, kita perlu menentukan semua dependensi
yang kita miliki
di sini yang bisa berubah dan itu akan menuntun kita untuk membuat kembali fungsi itu dan itu pada dasarnya
adalah kasus jika salah satu dari empat negara di sini berubah. Jadi isGlutenFree, isLactoseFree, isVegan dan isVegetarian sekarang semua dependensi dari penggunaan
panggilan balik dan itu berarti fungsi komponen ini di sini akan diciptakan kembali jika
ada dari kondisi ini di sini
yang berubah, jika ada yang menyebabkan komponen ini untuk dirender ulang, kami tidak akan membuat ulang ini
berfungsi dan itu pada gilirannya penting karena fungsi penyimpanan filter adalah ketergantungan efek penggunaan.
Jadi jika itu diciptakan kembali, gunakan efek berjalan lagi yang memperbarui params kami dan kami ingin menjaga ini seminimal mungkin
dan tidak terus-menerus memperbarui params kami tetapi benar-benar hanya melakukannya jika kita perlu melakukannya.
Dengan ini, kita sekarang dapat menekan tombol simpan dan melihat filter yang kita pilih, jadi mari kita
pergi ke filter di sini dan
sekarang ini rusak.
Apakah Anda tahu mengapa itu akan pecah?
Masalahnya adalah, saya memiliki navigasi di sini sebagai ketergantungan dalam efek penggunaan dan saya menjelaskan mengapa saya memilikinya, benar, bahwa saya tidak
ingin memiliki alat peraga secara keseluruhan dan seterusnya. Masalahnya adalah, ketika kita memanggil set params, kita menambahkan
params baru pada navigator kita pada akhirnya dan apa yang dilakukan juga adalah hal itu menyebabkan navigasi
berubah.
Jadi pada akhirnya, saya memiliki loop tak terbatas di sini.
Jika saya menghapus navigasi di sini sebagai ketergantungan, maka ini akan berfungsi. Jika sekarang kami menyimpan ini, sekarang jika
Anda menutup kedua aplikasi di sini dengan bantuan manajer tugas dan Anda kemudian menyalakannya kembali di
kedua sistem operasi, Anda akan melihat bahwa sekarang ini benar-benar berfungsi dan Anda dapat menekan save here, sekarang apa yang Anda
Saya tidak akan melihat output di log di sini.
Namun itu masuk akal karena jika Anda melihat lebih dekat pada tombol simpan ini di header
kami, maka apa yang saya lakukan di sini di onPress adalah saya pada akhirnya menjalankan fungsi ini, tetapi apa fungsinya?
Itu mengambil parameter kami yang disimpan di atau disimpan di tombol simpan dan
apa ini?
Nah seperti yang disebutkan sebelumnya, sebuah pointer pada fungsi save filter, jadi kami mengambil pointer itu.
Jika kemudian kita tidak melakukan apa-apa dengan pointer itu, kita tidak melakukan apa-apa.
Itu adalah pointer pada suatu fungsi, jadi tentu saja kita perlu menjalankannya seperti ini dengan menambahkan tanda kurung.
Atau kita cukup menyingkirkan fungsi panah anonim ini di sini dan kita cukup mengikatTekan dengan hasil
mengambil pointer kita di sini seperti itu karena kemudian pointer ini pada fungsi akan dieksekusi untuk kita
ketika kita menekan ini,
itulah alternatifnya.
Jadi sekarang jika kita menyimpan ini dan karena itu kita membiarkan ini memuat kembali
dan kita kembali ke filter, jika saya tekan simpan di sini, kita sekarang melihat output di log, mari gulir sedikit di sini,
semuanya diatur ke false.
Jika sekarang saya mengatur lactoseFree dan vegetarian menjadi true dan saya menekan save, kita melihat log
lain dan memang ada vegetarian dan lactoseFree diatur ke true yang persis seperti yang saya miliki di sini.
Jadi sekarang sudah berfungsi, mari kita konfirmasi bahwa itu juga berfungsi di Android dengan pergi ke filter juga,
mari kita tetapkan lactoseFree menjadi true dan simpan ini dan jika kita melakukannya,
itu adalah output Android
kita di sini, lactoseFree benar, semua yang
lain salah , jadi sekarang ini juga berfungsi.
Jadi solusi ini bisa agak sulit untuk membungkus kepala Anda dan menghindari loop tak terbatas di
sini juga penting,
memastikan bahwa Anda akan menggunakan panggilan balik di sini untuk menghindari pembangunan kembali yang tidak perlu dari fungsi ini di sini juga
adalah sesuatu yang harus Anda lakukan, sehingga ketika Anda perbarui params dan karena itu komponen ini dibangun
kembali, Anda juga tidak membangun kembali fungsi itu dan karena itu juga memasukkan loop tak terbatas.
Tetapi dengan itu, kami memiliki cara berkomunikasi antara opsi komponen dan navigasi yang biasanya merupakan pola
yang Anda butuhkan ketika Anda memiliki item tindakan di bilah tindakan Anda dan Anda ingin memicu sesuatu yang
bergantung pada data yang dikelola dalam komponen Anda dengan bantuan ini tombol.