Mari kita mulai dengan favorit.
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
di mana saya saat ini tidak melihat apa-apa karena saya menghapus favorit boneka ini.
Untuk itu
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
Anda, tetapi ya, kedua file ini makan. js di sini dalam aksi
dan makan. js dalam reduksi dan dalam aksi makan. File js,
saya akan mengatur beberapa tindakan Redux yang biasanya dimulai dengan menyiapkan beberapa
pengidentifikasi unik yang saya simpan dalam konstanta dan yang akan beralih favorit.
Anda dapat menggunakan apa pun yang
Anda inginkan di sini, nilai yang Anda simpan di sini biasanya adalah
pengidentifikasi yang sama, jadi ini adalah nilai pengenal dan itu hanya disimpan dalam konstanta sehingga kita tidak harus mengetikkan ini
secara manual nanti tetapi kita selalu dapat mengimpor ini konstan dan menghindari
kesalahan ketik.
Sekali lagi jika ini
baru bagi Anda, periksa sumber daya React Redux khusus terlebih dahulu.
Sekarang saya juga akan menggunakan pola pembuat tindakan di
sini yang berarti saya memiliki pengenal di sini, tetapi sekarang saya juga akan mengekspor fungsi yang membuat saya tindakan karena suatu
tindakan bukan hanya pengidentifikasi sering dan dalam hal ini kasusnya, itu juga membutuhkan beberapa payload
tambahan dan oleh karena itu kita benar-benar memiliki tindakan yang merupakan objek dengan pengidentifikasi dan payload dan oleh
karena itu di sini, saya akan menambahkan fungsi yang membuat saya objek tindakan seperti itu dan saya akan beri nama
ini toggle favorit seperti
ini, pilih pengenal tetapi dalam kasus unta dan ini adalah fungsi yang dapat menerima beberapa data karena saya
akan menjadi orang yang memanggilnya dan yang akan mengembalikan objek Javascript yang menggambarkan tindakan ini, jadi yang memiliki
katakanlah sebuah tipe, itu biasanya
bagaimana Anda memanggil bidang pengidentifikasi tetapi Anda umumnya bebas menggunakan apa pun yang Anda inginkan
di
sana dan dalam kasus saya, itu
akan menjadi favorit, jadi saya menunjuk pengenal ini, saya menggunakan string ini sebagai pengidentifikasi dan kemudian data tambahan yang Anda
inginkan, misalnya di sini saya ' Saya perlu iklan d ID makan dari makanan yang harus diaktifkan dan itu
berarti bahwa fungsi ini juga perlu mendapatkan ID ini sebagai input karena jika tidak saya tidak
dapat menyimpannya dalam tindakan yang saya buat.
Jadi ini adalah pencipta aksi saya untuk aksi toggle favorit, sekarang di
peredam, saya ingin bertindak ketika saya mendapatkan aksi toggle favorit dan untuk ini, saya akan menggunakan pola yang mungkin
Anda
lihat jika Anda bekerja dengan Redux sebelumnya , Saya akan menggunakan pernyataan sakelar di sini dan
aktifkan jenis tindakan saya karena perlu diingat bahwa tindakan akan menjadi objek dengan properti jenis yang mengidentifikasi tindakan yang terjadi.
Jadi saya mengaktifkan jenis tindakan itu dan kemudian saya menangani kasus yang berbeda untuk tindakan berbeda
yang mungkin saya miliki.
Jadi di sini saya memiliki tindakan beralih favorit dan untuk ini, Anda perlu mengimpor beralih favorit dari tindakan makan dan itulah sebabnya
saya menyimpan ini di konstanta terpisah karena sekarang saya tidak perlu mengetikkan favorit beralih secara manual di
mana saya mungkin memiliki kesalahan ketik di
sana, sebagai gantinya saya hanya menggunakan konstanta di mana string disimpan. Dan sekarang di sini, saya menjalankan logika apa pun yang
ingin saya jalankan untuk kemudian bekerja dengan tindakan itu dan mengubah keadaan saya sehingga makan dengan ID makan yang
merupakan bagian dari tindakan saya ditambahkan ke makanan favorit atau dihapus dari sana jika sudah menjadi bagian karena itu tindakan
beralih di sini,
saya ingin menambahkan item yang belum menjadi favorit, saya ingin menghapus item yang. Catatan samping, dalam pernyataan switch, saya juga akan menambahkan case
default
di mana saya baru saja mengembalikan status yang tidak berubah.
Kita seharusnya tidak benar-benar mencapai itu tetapi jika kita melakukannya, maka itu yang kita lakukan
tetapi kembali ke kasing beralih favorit. Di sana, saya sekarang ingin
pada akhirnya mencari tahu apakah makan saya dengan ID itu bagian dari tindakan karena saya menambahkan ID
makan ke tindakan, jika
makanan itu sudah menjadi bagian dari
makanan favorit,
jika ya saya ingin hapus, jika tidak, saya ingin menambahkannya. Jadi untuk ini, saya akan mulai dengan menemukan indeks makanan di array makanan
favorit karena jika itu adalah -1, saya tahu saya tidak menemukan indeks jadi itu bukan bagian, jika itu lebih besar atau sama dengan
nol,
saya tahu bahwa barang itu adalah bagian dari itu. Jadi saya akan memiliki indeks yang ada di
sini dan saya mendapatkan ini dengan menggunakan makanan favorit negara dan di sana saya memasukkan tanda sama dengan dan menyatakan hanya snapshot keadaan saya
saat ini yang saya dapatkan dan di sana, kita akan memiliki properti makanan favorit dan
saya bisa menggunakan metode indeks pencarian, metode Javascript normal yang dapat saya gunakan pada array untuk mendapatkan indeks
item yang cocok dengan kriteria tertentu yang saya atur di sini dalam fungsi yang saya berikan untuk
menemukan indeks, fungsi ini berjalan pada setiap makanan di array dan jika itu mengembalikan true, maka itu memberi saya indeks
elemen yang dilaluinya.
Jadi di sini saya ingin mengembalikan true jika makan. id sama dengan tindakan. makan Itu hanya berarti bahwa makanan yang
saya lihat di makanan favorit saya memiliki ide yang sama dengan makanan untuk mana tindakan ini
terjadi dan itu berarti jika itu benar untuk setiap item dalam makanan favorit, bahwa makanan yang kita coba untuk beralih
sudah menjadi bagian dari favorit, jadi kita harus menghapusnya karena ini sekarang akan mengembalikan kita indeks
item,
oleh karena itu indeks yang ada akan lebih besar dari -1 dan oleh karena itu, kita kemudian dapat menggunakan indeks
itu untuk menghapusnya.
Jika ini mengembalikan true tanpa item, jadi jika ini pada
akhirnya mengembalikan -1, saya tahu bahwa item tersebut belum menjadi bagian dari makanan favorit. Jadi indeks yang ada menyimpan informasi yang sangat penting
dan karenanya saya akan menggunakannya di sini dalam pernyataan if dan memeriksa apakah indeks
yang ada lebih besar atau sama dengan 0, yang berarti kita sudah memiliki makanan itu sebagai bagian dari
makanan favorit atau tidak.
Sekarang dalam hal ini, jadi item sudah menjadi bagian dari makanan favorit, saya ingin menghapusnya.
Jadi di sini, saya pada akhirnya akan mengembalikan negara baru karena di peredam Anda, pada akhirnya,
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
semua
pasangan nilai kunci dari kondisi yang ada, sehingga saya tidak kehilangan status apa pun dan
jangan menimpa keadaan
apa pun yang tidak ingin saya timpa dan kemudian saya hanya akan mengganti makanan favorit, jadi saya
akan menambahkan ini properti lagi untuk mengganti makanan favorit yang ada dengan makanan favorit baru saya yang pada
akhirnya harus menjadi makanan favorit lama tanpa item pada indeks ini.
Dan sekarang di sini untuk mendapatkan makanan favorit saya yang diperbarui, saya akan membuat konstanta baru,
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
seperti ini dan saya melakukan ini untuk membuat salinan array itu sehingga saya tidak memanipulasi array asli jika
sekarang saya mulai mengerjakannya karena sekarang saya ingin mengambil updatedFavMeals saya, panggil sambungan di sini dan kemudian hapus
item di indeks yang ada dan hanya item itu.
Jadi ini pada akhirnya akan mengambil indeks updatedFavMeals ini, edit dan hapus item pada indeks ini dan edit array ini,
itu sebabnya saya menyalinnya sehingga
saya tidak mengedit array asli dan sekarang kita dapat menggunakan array updatedFavMeals ini di sini dan simpan ini
kembali sebagai makanan favorit ke dalam toko kami karena itu akan menjadi susunan makanan favorit
tanpa makanan yang baru saja kami hapus.
Dalam kasus lain yang tentu saja relevan jika kita tidak menemukan produk jadi kami ingin menambahkannya,
di sini saya juga ingin mengembalikan negara baru di mana saya pertama-tama menyalin negara lama dan kemudian
saya akan mengganti makanan favorit untuk pada dasarnya menjadi makanan favorit lama saya dan
sekarang saya bisa memanggil concat, metode Javascript yang dibangun ke dalam Javascript yang mengembalikan array
baru yang mengambil array lama dan menambahkan item baru dan di sana, saya ingin menambahkan makanan untuk ID
itu di sini dan tentu saja Saya dapat menemukan makanan di negara saya, di sana saat makan, ini adalah properti ini, negara di sini
selalu mengacu hanya pada struktur keadaan ini di sini
dan sekarang di sini, saya dapat menemukan makanan yang ingin saya tambahkan dan
karena ini menjadi sangat lama, saya benar-benar akan meng-outsource
ini ke baris baru, jadi makanan saya yang ingin saya tambahkan dapat ditemukan dengan metode find yang berjalan pada semua makanan dan di
sana, jika mealId sama dengan tindakan. mealId, maka saya memiliki makanan yang ingin saya tambahkan dan ini adalah
makanan yang saya gabungkan dengan makanan favorit saya, sehingga saya menambahkan ini ke array itu. Itu harus menjadi logika
yang berfungsi dan yang mengelola favorit kami.
Sekarang kita perlu memastikan bahwa kita benar-benar mengirimkan tindakan ini setiap kali kita mengklik ikon bintang di header
kita.
Untuk mengirim aksi,
mari kita pergi ke layar detail makan karena di situlah kita memiliki ikon
bintang kita di sini dan ketika saya menekan tombol ini, saya pada akhirnya ingin mengirim tindakan.
Kabar baiknya adalah tindakan pengiriman sangat mudah,
kami menggunakan
pemilih, kami juga menggunakan pengiriman yang pada akhirnya memberi kami cara mudah untuk menjalankan suatu fungsi.
Berita buruknya adalah ini tentu saja hanya dapat digunakan di badan komponen di sini, di komponen fungsional kami dan
bukan di opsi navigasi.
Jadi sekali lagi kita harus bekerja dengan mengatur params untuk berkomunikasi antara opsi navigasi dan komponen tetapi tentu saja
itu adalah sesuatu yang bisa kita lakukan. Jadi di sini, di layar detail makanan,
saya hanya akan mulai dengan menelepon menggunakan pengiriman dan apa yang dilakukannya adalah memberi kita fungsi pengiriman, fungsi yang bisa kita panggil
untuk mengirim tindakan baru dan saya akan menyimpan dalam pengiriman bernama konstan. Selanjutnya, saya ingin membuat toler
handler favorit yang merupakan fungsi yang pada akhirnya harus mengirimkan tindakan ini.
Jadi di sini saya ingin memanggil pengiriman yang saya miliki berkat kait ini dan sekarang untuk
mengirim, saya perlu meneruskan tindakan yang ingin saya kirim dan untuk ini,
saya akan menggunakan pembuat tindakan ini untuk beralih favorit di sini.
Jadi kita hanya perlu mengimpor ini, impor dari folder toko, di
sana dari aksi dan di sana dari makanan. File js, dari sana saya ingin mengimpor toggle
favorit, bukan pengidentifikasi di semua huruf besar tapi fungsi pembuat tindakan ini. Dengan yang diimpor di sini, dalam pengiriman kita dapat
memanggil toggle favorit seperti ini dan sekarang di sini kita perlu meneruskan
ID dan itu tentu saja adalah mealId yang sudah kita ekstrak
di sana atau dipilih Meal. Saya juga akan bekerja, apa pun yang
Anda inginkan, saya hanya akan pergi untuk makan. Aku suka ini.
Sekarang kita dapat mengaktifkan kembali efek penggunaan untuk berkomunikasi dengan header kita, bukan dengan baris ini, tetapi dengan navigasi props
set params dan sekarang di sini, saya akan beri nama toggle fav ini, namanya terserah Anda dan
arahkan ke handler toggle favorit saya.
Sekarang toggle handler favorit karena itu harus ditambahkan sebagai dependensi di sini dan untuk menghindari loop
tak terbatas, saya akan menggunakan kembali callback yang saya impor dari React untuk membungkus fungsi ini di sini.
Jadi di sini gunakan callback melilit fungsi ini dan kita perlu menentukan dependensi di sini dan dependensi nomor satu adalah
pengiriman, React Redux akan memastikan bahwa ini tidak
pernah berubah, jadi itu adalah dependensi yang tidak akan pernah berubah, dependensi dua adalah
mealId, itu juga tidak
boleh berubah saat kita berada di halaman
ini, itu akan selalu memiliki nilai yang sama. Jadi dengan itu, fungsi ini seharusnya tidak benar-benar diciptakan
kembali yang berarti efek ini tidak akan pernah dijalankan kembali kecuali itu dibuat kembali yang hanya terjadi jika
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
harus memiliki saluran komunikasi yang aman di sini.
Sekarang di header, kita sekarang dapat mengekstrak handler itu, dengan cara kita juga
tidak perlu makanId di sini
lagi, kita sekarang bisa dengan mudah mendapatkan fungsi beralih dari navigasi data navigasi kita dapatkan param dan kemudian saya beri nama
toggle fav , jadi itulah nama param yang dapat kita ekstrak dan ini harus memberi kita
akses ke fungsi ini yang kita lewati. Sekarang beralih favorit adalah apa yang sebenarnya harus dieksekusi ketika kita
menekan tombol ini.
Jadi di sini, saya akan menunjuk ke beralih favorit karena ini memegang pointer pada fungsi ini dan karena itu fungsi
ini akan dieksekusi ketika kita sekarang menekan bintang ini. Kita akan lihat apakah itu berhasil.
Mari kita simpan itu dan kembali ke spageti di sini dan klik bintang ini dan klik ke favorit dan itu
terlihat
bagus, spageti adalah bagian dari favorit.
Mari klik bintang lagi di sini dan pergi ke favorit dan itu hilang,
itu masuk akal.
Klik lagi, itu kembali, buka halaman detail di sini di tab favorit dan klik pada
bintang dan kembali, baik itu hilang.
Mari kita verifikasi juga di Android, untuk schnitzel mungkin, favorit sekarang kosong. Mari kita kembali dan mengklik bintang,
pergi ke favorit, ini
dia, kembali, klik bintang dan itu hilang. Jadi logika ini umumnya berfungsi.
Ada beberapa hal yang masih ingin saya kerjakan, misalnya saya ingin mengubah
ikon berdasarkan status
favorit, saya juga ingin menampilkan beberapa teks di layar favorit ketika itu kosong tetapi secara umum, mengirim
dan menggunakan karya data bahkan jika kita membutuhkannya di tajuk.