Kami akan terus bekerja pada aplikasi yang kami buat dalam modul kursus terakhir dengan resep kami di sini
dan dengan filter yang dapat kami atur dan seterusnya dan ada dua hal yang perlu kita tambahkan di mana kita akan memerlukan Redux.
Salah satunya adalah bahwa kita benar-benar dapat menandai resep sebagai favorit dengan mengklik ikon bintang itu, bahwa ini sebenarnya menandai ini sebagai favorit
dan bahwa kita untuk satu juga mengubah ikon ini untuk menunjukkan apakah itu sudah menjadi favorit atau tidak tetapi yang lebih
penting, bahwa kita
dapat melihat resep itu sebagai favorit di sini di tab favorit. Dan hal lain di mana kita akan memerlukan Redux
ada di sini di filter, di sana ketika kita mengatur filter dan kita kemudian menyimpan ini,
tentu saja ini akan berdampak pada makanan yang kita muat di sini di tab makanan kita di daftar makan saat kita
memilih kategori. Di sana
ini harus tercermin, apa yang kita atur di filter. Jadi itulah yang kami kerjakan, apa yang akan kami butuhkan untuk Redux dan
untuk itu, mari kita instal Redux dan mari kita mulai dengan itu.
Untuk memulai dengan Redux, saya akan keluar dari server expo
saya di sini, proses mulai npm, saya akan berhenti sementara dan menginstal
paket dan itu akan menjadi
Redux dan selain Redux, kita juga perlu menginstal React Redux karena itu juga diharuskan untuk kemudian bekerja
dengan Redux.
Jadi kedua paket perlu diinstal di sini dan ketika mereka sedang menginstal, kita sudah dapat mulai
bekerja pada file kode kita di sana sedikit karena dalam proyek ini, saya ingin menambahkan folder baru sekarang
dan ini folder toko.
Sekarang Anda dapat memberi nama folder ini apa pun yang Anda inginkan, itu tidak harus dinamai
store, Redux tidak peduli tetapi ini adalah folder di mana saya ingin mengelola pengaturan Redux saya karena Redux adalah semua
tentang pusat toko negara.
Jadi di sini, di folder toko itu, sekarang kita dapat memulai dengan Redux dan saya tidak akan membahas Redux secara terperinci di sini, saya
memiliki kursus Bereaksi
dan Redux yang lengkap untuk itu jika Anda ingin mempelajari seluk beluknya, untuk Tentu saja
ini saya benar-benar mengasumsikan pengetahuan React dan Redux sebelumnya dan karena itu ini hanya akan menjadi penyegaran singkat.
Redux pada akhirnya adalah semua tentang reduksi, aksi dan kemudian membangun toko berdasarkan pada reduksi
dan aksi ini.
Sekarang untuk itu di sini di folder toko itu, saya akan menambahkan folder tindakan dan saya akan menambahkan folder reduksi, sebenarnya kita hanya
akan memiliki satu tindakan dan satu file peredam dalam proyek ini tetapi jika Anda memiliki lebih banyak file dari itu,
memiliki subfolder terpisah mungkin merupakan ide yang bagus untuk membuatnya tetap teratur dan itulah sebabnya
saya membuatnya di sini, meskipun untuk aplikasi sederhana ini, kita tidak memerlukannya karena kita tidak akan memiliki banyak file.
Mari kita mulai dengan peredam. Di folder peredam
di sini, saya akan menambahkan makanan saya. File js dan itu adalah file tempat saya pergi untuk mengelola logika memperbarui status
peredam makan.
Jadi pada akhirnya file di mana kita akan menulis logika untuk menandai makanan sebagai
favorit dan untuk mengelola filter kita.
Sekarang peredam dalam Bereaksi hanya fungsi, Jadi di sini
saya akan membuat fungsi, beri nama makan peredam, nama sepenuhnya terserah Anda dan fungsi ini sebenarnya
akan menerima dua argumen - negara, snapshot keadaan saat ini di mana Anda dapat membangun naik dan mendapatkan
negara baru karena peredam pada akhirnya harus mengembalikan negara baru yang kemudian diambil
oleh Redux dan disimpan di tokonya.
Jadi Anda mendapatkan arus, keadaan lama di sini dan Anda mendapatkan tindakan karena fungsi peredam di sini dijalankan
oleh Redux setiap kali tindakan
baru dikirim dan oleh karena itu kami mendapatkan akses ke tindakan di sini sehingga kami dapat
mengetahui apakah kami perlu bertindak dan apa yang perlu kita lakukan.
Jadi di dalam fungsi ini, pada akhirnya Anda perlu mengembalikan negara baru, dalam bentuk paling sederhana yang
tentu saja berarti kami mengembalikan keadaan saat ini yang di sisi lain berarti bahwa peredam ini
tidak melakukan apa pun yang berguna tetapi kami akan ganti itu.
Sekarang ketika kita pertama kali menjalankan aplikasi kita, kita juga ingin mengatur keadaan awal
yang digunakan awalnya, jadi
yang menginisialisasi keadaan kita saat aplikasi ini diluncurkan dan untuk ini, saya akan menambahkan konstanta keadaan awal
baru di sini yang memegang Javascript sederhana objek dan di sana, saya ingin menyimpan daftar makanan saya dan kemudian juga daftar makanan saya
yang disaring karena kita akan membutuhkan keduanya - daftar semua makanan dan daftar makanan yang sesuai dengan filter
yang ditetapkan pengguna dan saya juga ingin makan favorit saya di sini. Jadi tiga jenis susunan makanan yang saya simpan pada akhirnya dan tentu saja
itu
hanya satu pendekatan yang mungkin Anda ambil di sini,
kita tentu dapat menemukan cara lain mengelola data kami di sini, tetapi saya suka yang ini.
Sekarang yang saya butuhkan dalam file ini adalah data dummy makanan saya, jadi saya akan mengimpor makanan dari folder
data saya dan dari data-dummy. File js dan saya akan menginisialisasi makanan di sini dengan array data dummy makanan saya.
Makanan yang difilter juga diinisialisasi dengan itu karena pada awalnya ketika aplikasi ini
dimulai, kami tidak memiliki pengaturan filter. Makanan favorit di sisi lain pada awalnya adalah array kosong karena sekali lagi ketika aplikasi
dimulai, kita tidak akan memiliki makanan favorit.
Tentu saja dalam aplikasi nyata, Anda mungkin ingin menyimpan keadaan itu di server, sehingga ketika pengguna menutup aplikasi dan
kembali lagi nanti, Anda tidak memulai dari awal lagi tetapi itu bukan
sesuatu yang akan kami lakukan di
sini, Anda akan belajar bagaimana menjangkau server dan menyimpan data di sana dan memuat data dari sana dalam modul terpisah
nanti dalam
kursus ini, di sini kita akan membuat ini mudah untuk fokus pada Redux.
Jadi ini adalah keadaan awal saya, di sini dalam fungsi ini kita sekarang dapat menggunakan sintaks Javascript
di mana kita menetapkan keadaan awal kita sebagai nilai default untuk argumen keadaan, yang berarti bahwa
ketika fungsi peredam ini berjalan dan keadaan tidak terdefinisi yang merupakan kasus ketika Redux mengeksekusi reducer kami untuk pertama kalinya,
kami akan memulai dengan keadaan
awal itu, sehingga kemudian akan secara otomatis
memuat keadaan awal kami sehingga bisa dikatakan karena ketika Redux memulai dan memulai, akan ada satu tindakan awal yang
dikirim yaitu digunakan untuk dijalankan melalui peredam sekali dan itu akan memuat keadaan awal kita.
Jadi dengan itu, kita dapat bekerja dengan beberapa kondisi awal yang bagus tetapi yang dengan sendirinya tidak banyak
membantu kita. Untuk saat ini,
hanya itu,
mari sekarang hubungkan peredam ini ke Redux sehingga kita benar-benar dapat menggunakan toko Redux kita di mana-mana di aplikasi sebelum kita
kemudian mulai mengirim tindakan dan melakukan hal-hal yang lebih berguna dalam peredam. Karenanya di sini untuk saat ini, saya hanya
akan mengekspor peredam makanan sebagai default di sini dan sekarang di aplikasi. js yang merupakan file di mana seluruh
aplikasi dimulai, kita
perlu mengatur toko Redux kami. Untuk itu
di sini, kami mengimpor membuat toko dari Redux.
Selain itu, kami harus mengimpor pengurang kombinasi dari sana.
Ini memungkinkan kita untuk sekarang membuat toko, kita hanya perlu peredam kami,
jadi di sini saya akan mengimpor makanan saya dari peredam dan sekarang arahkan ke folder toko, folder pereduksi dan
di sana, makanan. File js dan
sekarang mungkin di sini, kita dapat membuat toko kita di sini dengan memanggil create store. Sekarang buat toko membutuhkan peredam pada akhirnya yang
harus Anda lewati. Sekarang tentu saja di sini, kami memiliki peredam
dan kami dapat meneruskannya tetapi dalam aplikasi yang lebih besar, Anda mungkin memiliki lebih dari satu
peredam karena Anda sering memiliki peredam untuk area fitur yang berbeda dari aplikasi Anda, satu untuk otentikasi, satu untuk produk Anda, satu
untuk katakan saja area dukungan aplikasi Anda dan Anda perlu menggabungkan semua reduksi tunggal ini, reduksi yang berbeda ini menjadi
satu peredam root dan itulah yang dilakukan fungsi peredam kombinasi, sekali lagi di
sini kita tidak akan memerlukannya karena kita hanya memiliki satu peredam tetapi untuk sudah menunjukkan
kepada Anda pendekatan yang dapat Anda
gunakan dengan beberapa reduksi juga, saya akan menggunakannya di sini juga. Jadi saya akan memiliki root reducer saya di sini yang
saya buat dengan memanggil pengurang penggabungan, pengurang gabungan mengambil objek Javascript di mana kita sekarang memetakan pengurang tunggal kita, pengurang
berbeda kita untuk kunci.
Jadi misalnya di sini, kita bisa mengambil makanan sebagai kunci tetapi nama itu sepenuhnya terserah Anda dan menghubungkan
ini ke peredam makanan, seperti ini.
Apa yang dilakukannya adalah pada akhirnya menggabungkan peredam makan ini menjadi peredam akar ini dan kita nantinya dapat bekerja
dengan keadaan yang dikelola oleh peredam makan, sehingga dengan kondisi
ini yang diinisialisasi seperti ini, dengan bantuan makanan ini properti, kami akan dapat mengakses negara
ini, bagian negara
ini dengan properti ini nanti, tetapi Anda akan melihat semua itu.
Jadi itu peredam root kita dan sekarang kita hanya perlu melewati peredam root untuk membuat
toko, ini memberi kita toko dan sekarang apa?
Sekarang toko ini perlu disediakan untuk aplikasi kami dan untuk itu, kami membutuhkan
paket lain yang kami instal yaitu React Redux.
Dari sana, kita bisa mengimpor komponen penyedia, penyedia seperti ini. Kami kemudian membungkus penyedia di sekitar komponen aplikasi root kami pada akhirnya, jadi
di sekitar komponen paling atas yang memegang semua komponen lain yang pada akhirnya akan berinteraksi dengan toko
kami dan navigator makanan cukup baik untuk itu karena itu memegang semua
layar kami, sehingga ia memegang semua komponen yang pada akhirnya kita perlu kirim tindakan atau
mengakses negara kita, jadi baca dari negara kita. Oleh karena itu di sini kami membungkus komponen penyedia di sekitar
navigator makanan dan sekarang penyedia mengambil satu properti penting, satu prop yang harus Anda lewati dan itulah prop toko dan
tentu saja di sana, sebagai nilai kami melewati toko kami di sini.
Jadi toko konstan yang menyimpan toko yang dibuat ini dilewatkan ke penyedia penyangga toko dan di belakang layar, ini memberi
kita semua yang kita butuhkan untuk berinteraksi dengan Redux sekarang, dengan toko Redux dalam komponen apa pun, layar
apa pun, atau komponen lain dalam aplikasi kita .
Sekarang biarkan saya me-restart ini dengan mulai npm dan untuk saat ini, ini tidak akan membuat
perbedaan besar tetapi aplikasi kita pasti masih
berfungsi, jadi tidak boleh crash karena itu, jadi mari kita verifikasi bahwa ini adalah kasusnya dan mari muat ulang di sini, kami menekan
r dua kali di Android dan perintah r di iOS dan mari kita lihat di mana masih memuat sebagaimana mestinya, ya itu terlihat bagus di sini di
iOS dan saya cukup yakin bahwa itu juga akan memuat dengan baik di Android, ya itu berhasil juga.
Jadi sekarang Redux sudah
diatur, toko kami diinisialisasi tetapi kami tidak menggunakannya.
Jadi sebagai langkah selanjutnya, mari kita pastikan kita menggunakan toko kita sebelum kita berhati-hati tentang tindakan dan
melakukan beberapa pekerjaan nyata di peredam.