Bagaimana kita bisa menggunakan toko kita?
Perlu diingat bahwa pada akhirnya di sini, saya mengelola makanan saya, bukan kategori saya karena kami tidak memiliki rencana tindakan yang akan
mengubah apa pun di sana, tetapi saya
mengelola makanan saya di sini.
Jadi satu tugas besar adalah pergi ke mana-mana di aplikasi kami di mana kami mengimpor makanan dari data tiruan dan menyingkirkan impor
itu dan sebaliknya, mengeluarkan data dari toko kami karena perbedaannya adalah
bahwa nantinya kita dapat menambahkan logika untuk mengubah data di toko kami sedangkan data dummy kami
tidak akan pernah berubah.
Jadi kita harus mengimpor data dari toko kami, sehingga kami dapat menambahkan logika untuk
memanipulasi data itu, misalnya untuk membatasi makanan yang kami tampilkan.
Jadi, di mana kita membutuhkan makanan itu? Pada layar kategori,
kami tidak mengimpor makanan. Kami mendapat beberapa impor lain yang sebenarnya bisa kami hilangkan tetapi
itu
hanya catatan, kami tidak mengimpor makanan.
Kategori dapat tetap di sana karena lagi, kita tidak akan memiliki
logika yang mengubah itu, jadi kita bisa melanjutkan. Layar kategori makanan adalah cerita yang berbeda, di sana kita mengimpor makanan dan
sekarang tujuannya adalah untuk menyingkirkan impor itu dan mengeluarkan makanan dari toko Redux dan
pertanyaannya tentu saja, bagaimana kita melakukan ini? Sekali lagi, paket React Redux membantu kami dengan itu. Dari paket React
Redux itu, kita bisa mengimpor sesuatu, kita bisa mengimpor kait, gunakan kait pemilih.
Ini memungkinkan kita untuk memilih sepotong negara kita, negara kita yang dikelola secara global dan menggunakannya dalam komponen ini.
Sekarang saya menggunakan kait di sini karena itu memungkinkan kami untuk menggunakan ini dalam komponen
fungsional, Anda juga mungkin menyadari pendekatan lain di mana Anda benar-benar mengimpor fungsi koneksi dan membungkus ekspor Anda dengan itu
dan menggunakan negara peta untuk alat peraga, pengiriman peta untuk alat peraga, itu adalah sesuatu yang
dapat Anda gunakan juga, itu
benar-benar akan bekerja tetapi ini sedikit lebih ramping, jadi
saya akan menggunakan pemilih penggunaan di sini. Dengan itu ditambahkan, sekarang ketika
kita menggunakan makanan kita, kita tidak menggunakannya seperti
ini, sebaliknya sekarang kita bisa mendapatkannya dengan bantuan pemilih penggunaan. Jadi untuk mendapatkan makanan tampilan kami, apa yang akan saya
lakukan di sini adalah saya akan membuat makanan konstan baru yang tersedia mungkin, namanya terserah Anda dan menggunakan pemilih di sini seperti ini karena
ini akan mengambil saya data dari negara dan mengembalikan itu, jadi itulah yang
kemudian akan saya simpan di sini dalam konstanta ini, nilai yang dikembalikan dan selector yang digunakan
mengambil fungsi, fungsi yang akan dieksekusi untuk kita oleh React Redux.
Fungsi yang menjadikan negara sebagai argumen secara otomatis, Bereaksi Redux yang mengeksekusi fungsi untuk kami akan memberikan keadaan
saat ini, keadaan Redux saat ini ke fungsi ini dan kemudian dapat mengembalikan data apa pun yang kami inginkan dari keadaan
itu, dari global itu toko, dari negara global dan saya menggunakan istilah ini
secara bergantian di sini.
Jadi bagaimana kita dapat mengambil data dari keadaan itu di sini di
badan fungsi lalu dan saya menggunakan notasi panah pintas di sini di mana di sisi kanan panah, ini
secara otomatis dikembalikan jika tidak dibungkus dengan kurung kurawal. Nah untuk mendapatkan akses ke sesuatu dari keadaan,
kita harus kembali ke tempat di mana kita membuat toko, di sana saya melewati peredam root yang dibuat
dengan menggabungkan semua reducrs.
Sekali lagi kami hanya punya satu tapi saya jelaskan mengapa saya melakukan ini.
Sekarang kami memiliki kunci ini, makanan yang sepenuhnya terserah Anda, Anda dapat menamainya
apa pun yang Anda inginkan.
Ini memberikan irisan ini dari negara kita yang dikelola oleh reducer ini sebagai pengidentifikasi
dan kita sekarang dapat menggunakan pengenal ini untuk
mendapatkan bagian dari negara kita yang menjadi tanggung jawab reducer ini.
Jadi pada akhirnya, keadaan yang akan terlihat seperti ini, seperti keadaan awal ini. Jadi dalam kategori makanan layar, di
sini saya mengakses negara. makanan atau apa pun yang Anda pilih sebagai pengidentifikasi dalam
kombinasi reduksi dan kemudian di sini, saya akan mengakses makanan yang difilter. Bukan makanan yang juga akan saya makan di sana,
kami juga punya makanan di sini, tetapi saya ingin menghormati setiap filter yang ditetapkan.
Saat ini, kami tidak memiliki logika untuk mengaturnya tetapi
dengan itu kami akan berubah di masa depan, jadi di sini saya ingin mendapatkan makanan yang difilter sehingga
saya selalu mendapatkan makanan yang benar-benar harus saya dapat tampilkan, makanan yang menghormati filter
disiapkan oleh pengguna dan sekarang ini makanan yang tersedia yang ingin saya filter lebih lagi di sini untuk menemukan makanan untuk
ID kategori yang saya pilih atau makanan untuk kategori yang saya pilih. Dengan itu, tidak ada lagi huruf besar makanan dalam
file ini, itu semua hanya huruf kecil di sini dan kami berhasil menyingkirkan
impor itu, sekarang mari kita lanjutkan. Di layar favorit, kami juga mengimpor makanan
dan
seperti sebelumnya, kami harus menyingkirkannya, jadi mari kita lakukan ini. Sebaliknya, juga seperti sebelumnya, saya akan menggunakan pemilih penggunaan dari React Redux
untuk mendapatkan makanan saya dari toko dan oleh karena itu di sini di mana saya menggunakan makanan, saya benar-benar akan mendapatkan makanan yang
tersedia dengan pemilih penggunaan.
Sekali lagi ini memberi saya keadaan dan saya bisa mengakses keadaan. makanan. makanan yang difilter tetapi sekarang
benar-benar di
sini untuk favorit, saya tidak ingin menghormati filter yang ditetapkan karena menurut saya masuk
akal bahwa ketika kita ingin melihat favorit kita, kita selalu melihat semua favorit.
Anda tentu saja dapat memiliki logika yang berbeda dan pergi untuk makanan yang difilter tetapi saya hanya akan menggunakan makanan
di sini, jadi. makanan. makanan
mungkin terlihat aneh, ini memilih irisan negara kita dan kemudian dalam irisan ini, makanan ini di sini mengakses properti makanan ini di
irisan negara kita,
tetapi tentu saja jika Anda melihat peredam Anda, ini hanya sebagian masuk akal
karena kami punya properti makanan favorit di sini dan memang kami punya.
Jadi sebenarnya, kita tidak perlu lagi memfilter favorit kita seperti ini dan ini hanya filter tiruan, itu
selalu mengambil makanan dengan m1 dan m2 sebagai ID, alih-alih untuk makanan favorit kita, kita bisa
mendapatkannya dengan mengakses di sini di makanan kami mengiris makanan favorit, jadi properti
ini karena kami nantinya akan mengelola makanan favorit dalam array terpisah di toko kami, jadi itu
bahkan lebih mudah
di sini, kode yang sangat singkat. Jadi dengan itu, kami menyingkirkan impor makanan di sini
juga, mari beralih ke layar filter.
Tidak ada makanan impor di
sini, layar detail makanan di sisi lain memiliki satu.
Jadi di sini saya
ingin menyingkirkannya dan sekarang di sini
kita akan memerlukan properti makanan lain yang saya perlihatkan sedetik yang lalu karena sekali lagi di sini, kita dapat menggunakan
pemilih penggunaan dari React Redux untuk memilih makanan kita karena di sini, kita sekarang memiliki komponen di sini di mana kita menggunakan makanan kita dan di sana, saya ingin memiliki array dengan semua makanan
karena saya mencoba untuk memuat satu kali makan dengan ID dan karena itu basis saya, array saya di mana saya mencari ID itu
tentu saja harus menjadi array dengan semua makanan dan tidak difilter karena saya tidak peduli dengan
filter yang ditetapkan, di sini saya mencari makanan tertentu dengan ID tertentu dan saya ingin mendapatkan daftar
lengkap makanan dan oleh karena itu di mana kita akan membutuhkan ini tanpa filter daftar makanan yang kami kelola
di sini.
Jadi karena itu di sini, kita sekarang bisa mendapatkan makanan yang tersedia dengan pemilih penggunaan dan di
sana lagi, kita menggunakan makanan negara. makanan sekarang nyata dan sekarang kita bisa menggunakan makanan
yang tersedia di sini untuk menemukan makanan dengan ID itu. Dengan itu, kita menyingkirkan impor ini di sini juga, kita juga dapat menghapus
impor tombol sekarang saya melihatnya tetapi kita benar-benar akan memiliki masalah.
Anda mungkin memperhatikan bahwa di tajuk, sebenarnya saya juga mencoba mencari makanan dari array makanan dan
kami menghapus impor itu.
Sekarang masalahnya juga ada di sini di opsi navigasi, kita tidak dapat menggunakan kait pemilih penggunaan karena
Anda hanya dapat menggunakan kait di dalam kait lain atau di dalam komponen fungsional dan ini bukan
itu, itu adalah fungsi normal, bukan fungsional komponen dan juga bukan kail.
Jadi kita tidak bisa menggunakan pemilih penggunaan di sini sehingga tidak akan berfungsi.
Sekarang tentu saja kita dapat membawa kembali impor makanan tetapi itu akan menjadi agak murah karena dalam aplikasi nyata, Anda
kadang-kadang akan memiliki situasi di mana Anda memerlukan data dari toko Redux Anda dalam data navigasi Anda dan oleh
karena
itu dalam kuliah berikutnya, kami akan atasi ini dan pastikan bahwa kita juga bisa mendapatkan akses ke sini.