1 00:00:02,250 --> 00:00:08,070 Kami akan terus bekerja pada aplikasi yang kami buat dalam modul kursus terakhir dengan resep kami di sini 2 00:00:08,070 --> 00:00:15,070 dan dengan filter yang dapat kami atur dan seterusnya dan ada dua hal yang perlu kita tambahkan di mana kita akan memerlukan Redux. 3 00:00:15,090 --> 00:00:21,870 Salah satunya adalah bahwa kita benar-benar dapat menandai resep sebagai favorit dengan mengklik ikon bintang itu, bahwa ini sebenarnya menandai ini sebagai favorit 4 00:00:21,870 --> 00:00:27,900 dan bahwa kita untuk satu juga mengubah ikon ini untuk menunjukkan apakah itu sudah menjadi favorit atau tidak tetapi yang lebih 5 00:00:27,900 --> 00:00:28,980 penting, bahwa kita 6 00:00:28,980 --> 00:00:35,400 dapat melihat resep itu sebagai favorit di sini di tab favorit. Dan hal lain di mana kita akan memerlukan Redux 7 00:00:35,400 --> 00:00:41,280 ada di sini di filter, di sana ketika kita mengatur filter dan kita kemudian menyimpan ini, 8 00:00:41,280 --> 00:00:49,080 tentu saja ini akan berdampak pada makanan yang kita muat di sini di tab makanan kita di daftar makan saat kita 9 00:00:49,080 --> 00:00:51,470 memilih kategori. Di sana 10 00:00:51,500 --> 00:00:58,880 ini harus tercermin, apa yang kita atur di filter. Jadi itulah yang kami kerjakan, apa yang akan kami butuhkan untuk Redux dan 11 00:00:58,880 --> 00:01:02,300 untuk itu, mari kita instal Redux dan mari kita mulai dengan itu. 12 00:01:03,350 --> 00:01:07,760 Untuk memulai dengan Redux, saya akan keluar dari server expo 13 00:01:07,760 --> 00:01:12,830 saya di sini, proses mulai npm, saya akan berhenti sementara dan menginstal 14 00:01:12,860 --> 00:01:15,030 paket dan itu akan menjadi 15 00:01:15,110 --> 00:01:22,460 Redux dan selain Redux, kita juga perlu menginstal React Redux karena itu juga diharuskan untuk kemudian bekerja 16 00:01:22,460 --> 00:01:23,760 dengan Redux. 17 00:01:23,780 --> 00:01:28,700 Jadi kedua paket perlu diinstal di sini dan ketika mereka sedang menginstal, kita sudah dapat mulai 18 00:01:28,700 --> 00:01:34,280 bekerja pada file kode kita di sana sedikit karena dalam proyek ini, saya ingin menambahkan folder baru sekarang 19 00:01:34,280 --> 00:01:35,780 dan ini folder toko. 20 00:01:35,780 --> 00:01:40,810 Sekarang Anda dapat memberi nama folder ini apa pun yang Anda inginkan, itu tidak harus dinamai 21 00:01:41,000 --> 00:01:46,970 store, Redux tidak peduli tetapi ini adalah folder di mana saya ingin mengelola pengaturan Redux saya karena Redux adalah semua 22 00:01:46,970 --> 00:01:48,390 tentang pusat toko negara. 23 00:01:48,530 --> 00:01:56,150 Jadi di sini, di folder toko itu, sekarang kita dapat memulai dengan Redux dan saya tidak akan membahas Redux secara terperinci di sini, saya 24 00:01:56,150 --> 00:01:57,230 memiliki kursus Bereaksi 25 00:01:57,260 --> 00:02:02,510 dan Redux yang lengkap untuk itu jika Anda ingin mempelajari seluk beluknya, untuk Tentu saja 26 00:02:02,570 --> 00:02:08,450 ini saya benar-benar mengasumsikan pengetahuan React dan Redux sebelumnya dan karena itu ini hanya akan menjadi penyegaran singkat. 27 00:02:09,890 --> 00:02:14,980 Redux pada akhirnya adalah semua tentang reduksi, aksi dan kemudian membangun toko berdasarkan pada reduksi 28 00:02:14,980 --> 00:02:16,010 dan aksi ini. 29 00:02:16,360 --> 00:02:23,230 Sekarang untuk itu di sini di folder toko itu, saya akan menambahkan folder tindakan dan saya akan menambahkan folder reduksi, sebenarnya kita hanya 30 00:02:23,320 --> 00:02:29,320 akan memiliki satu tindakan dan satu file peredam dalam proyek ini tetapi jika Anda memiliki lebih banyak file dari itu, 31 00:02:29,320 --> 00:02:34,180 memiliki subfolder terpisah mungkin merupakan ide yang bagus untuk membuatnya tetap teratur dan itulah sebabnya 32 00:02:34,180 --> 00:02:39,820 saya membuatnya di sini, meskipun untuk aplikasi sederhana ini, kita tidak memerlukannya karena kita tidak akan memiliki banyak file. 33 00:02:39,880 --> 00:02:44,230 Mari kita mulai dengan peredam. Di folder peredam 34 00:02:44,350 --> 00:02:52,630 di sini, saya akan menambahkan makanan saya. File js dan itu adalah file tempat saya pergi untuk mengelola logika memperbarui status 35 00:02:52,630 --> 00:02:53,310 peredam makan. 36 00:02:53,410 --> 00:02:58,750 Jadi pada akhirnya file di mana kita akan menulis logika untuk menandai makanan sebagai 37 00:02:58,750 --> 00:03:01,330 favorit dan untuk mengelola filter kita. 38 00:03:01,430 --> 00:03:04,700 Sekarang peredam dalam Bereaksi hanya fungsi, Jadi di sini 39 00:03:04,700 --> 00:03:10,550 saya akan membuat fungsi, beri nama makan peredam, nama sepenuhnya terserah Anda dan fungsi ini sebenarnya 40 00:03:10,610 --> 00:03:17,360 akan menerima dua argumen - negara, snapshot keadaan saat ini di mana Anda dapat membangun naik dan mendapatkan 41 00:03:17,360 --> 00:03:22,250 negara baru karena peredam pada akhirnya harus mengembalikan negara baru yang kemudian diambil 42 00:03:22,370 --> 00:03:24,860 oleh Redux dan disimpan di tokonya. 43 00:03:24,860 --> 00:03:30,230 Jadi Anda mendapatkan arus, keadaan lama di sini dan Anda mendapatkan tindakan karena fungsi peredam di sini dijalankan 44 00:03:30,230 --> 00:03:31,940 oleh Redux setiap kali tindakan 45 00:03:31,940 --> 00:03:36,710 baru dikirim dan oleh karena itu kami mendapatkan akses ke tindakan di sini sehingga kami dapat 46 00:03:36,710 --> 00:03:40,370 mengetahui apakah kami perlu bertindak dan apa yang perlu kita lakukan. 47 00:03:40,520 --> 00:03:44,960 Jadi di dalam fungsi ini, pada akhirnya Anda perlu mengembalikan negara baru, dalam bentuk paling sederhana yang 48 00:03:44,960 --> 00:03:49,220 tentu saja berarti kami mengembalikan keadaan saat ini yang di sisi lain berarti bahwa peredam ini 49 00:03:49,220 --> 00:03:52,470 tidak melakukan apa pun yang berguna tetapi kami akan ganti itu. 50 00:03:52,650 --> 00:03:58,170 Sekarang ketika kita pertama kali menjalankan aplikasi kita, kita juga ingin mengatur keadaan awal 51 00:03:58,170 --> 00:04:00,000 yang digunakan awalnya, jadi 52 00:04:00,000 --> 00:04:06,510 yang menginisialisasi keadaan kita saat aplikasi ini diluncurkan dan untuk ini, saya akan menambahkan konstanta keadaan awal 53 00:04:06,510 --> 00:04:14,970 baru di sini yang memegang Javascript sederhana objek dan di sana, saya ingin menyimpan daftar makanan saya dan kemudian juga daftar makanan saya 54 00:04:15,120 --> 00:04:22,060 yang disaring karena kita akan membutuhkan keduanya - daftar semua makanan dan daftar makanan yang sesuai dengan filter 55 00:04:22,060 --> 00:04:31,130 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 56 00:04:31,130 --> 00:04:31,610 itu 57 00:04:31,670 --> 00:04:34,800 hanya satu pendekatan yang mungkin Anda ambil di sini, 58 00:04:34,830 --> 00:04:40,340 kita tentu dapat menemukan cara lain mengelola data kami di sini, tetapi saya suka yang ini. 59 00:04:40,590 --> 00:04:53,140 Sekarang yang saya butuhkan dalam file ini adalah data dummy makanan saya, jadi saya akan mengimpor makanan dari folder 60 00:04:53,140 --> 00:04:59,860 data saya dan dari data-dummy. File js dan saya akan menginisialisasi makanan di sini dengan array data dummy makanan saya. 61 00:05:00,550 --> 00:05:06,220 Makanan yang difilter juga diinisialisasi dengan itu karena pada awalnya ketika aplikasi ini 62 00:05:06,330 --> 00:05:11,840 dimulai, kami tidak memiliki pengaturan filter. Makanan favorit di sisi lain pada awalnya adalah array kosong karena sekali lagi ketika aplikasi 63 00:05:11,840 --> 00:05:13,130 dimulai, kita tidak akan memiliki makanan favorit. 64 00:05:13,130 --> 00:05:18,230 Tentu saja dalam aplikasi nyata, Anda mungkin ingin menyimpan keadaan itu di server, sehingga ketika pengguna menutup aplikasi dan 65 00:05:18,230 --> 00:05:21,400 kembali lagi nanti, Anda tidak memulai dari awal lagi tetapi itu bukan 66 00:05:21,470 --> 00:05:23,230 sesuatu yang akan kami lakukan di 67 00:05:23,240 --> 00:05:28,580 sini, Anda akan belajar bagaimana menjangkau server dan menyimpan data di sana dan memuat data dari sana dalam modul terpisah 68 00:05:28,610 --> 00:05:29,440 nanti dalam 69 00:05:29,460 --> 00:05:33,040 kursus ini, di sini kita akan membuat ini mudah untuk fokus pada Redux. 70 00:05:33,140 --> 00:05:39,170 Jadi ini adalah keadaan awal saya, di sini dalam fungsi ini kita sekarang dapat menggunakan sintaks Javascript 71 00:05:39,230 --> 00:05:44,690 di mana kita menetapkan keadaan awal kita sebagai nilai default untuk argumen keadaan, yang berarti bahwa 72 00:05:44,690 --> 00:05:51,290 ketika fungsi peredam ini berjalan dan keadaan tidak terdefinisi yang merupakan kasus ketika Redux mengeksekusi reducer kami untuk pertama kalinya, 73 00:05:51,590 --> 00:05:53,700 kami akan memulai dengan keadaan 74 00:05:53,750 --> 00:05:56,330 awal itu, sehingga kemudian akan secara otomatis 75 00:05:56,330 --> 00:06:02,760 memuat keadaan awal kami sehingga bisa dikatakan karena ketika Redux memulai dan memulai, akan ada satu tindakan awal yang 76 00:06:02,790 --> 00:06:07,910 dikirim yaitu digunakan untuk dijalankan melalui peredam sekali dan itu akan memuat keadaan awal kita. 77 00:06:07,980 --> 00:06:14,160 Jadi dengan itu, kita dapat bekerja dengan beberapa kondisi awal yang bagus tetapi yang dengan sendirinya tidak banyak 78 00:06:14,160 --> 00:06:16,190 membantu kita. Untuk saat ini, 79 00:06:16,200 --> 00:06:17,070 hanya itu, 80 00:06:17,250 --> 00:06:23,640 mari sekarang hubungkan peredam ini ke Redux sehingga kita benar-benar dapat menggunakan toko Redux kita di mana-mana di aplikasi sebelum kita 81 00:06:23,640 --> 00:06:30,860 kemudian mulai mengirim tindakan dan melakukan hal-hal yang lebih berguna dalam peredam. Karenanya di sini untuk saat ini, saya hanya 82 00:06:30,860 --> 00:06:39,890 akan mengekspor peredam makanan sebagai default di sini dan sekarang di aplikasi. js yang merupakan file di mana seluruh 83 00:06:39,890 --> 00:06:42,190 aplikasi dimulai, kita 84 00:06:42,230 --> 00:06:47,960 perlu mengatur toko Redux kami. Untuk itu 85 00:06:48,080 --> 00:06:57,270 di sini, kami mengimpor membuat toko dari Redux. 86 00:06:57,510 --> 00:07:02,010 Selain itu, kami harus mengimpor pengurang kombinasi dari sana. 87 00:07:02,010 --> 00:07:06,090 Ini memungkinkan kita untuk sekarang membuat toko, kita hanya perlu peredam kami, 88 00:07:06,090 --> 00:07:12,610 jadi di sini saya akan mengimpor makanan saya dari peredam dan sekarang arahkan ke folder toko, folder pereduksi dan 89 00:07:12,610 --> 00:07:15,280 di sana, makanan. File js dan 90 00:07:15,330 --> 00:07:26,520 sekarang mungkin di sini, kita dapat membuat toko kita di sini dengan memanggil create store. Sekarang buat toko membutuhkan peredam pada akhirnya yang 91 00:07:26,640 --> 00:07:31,910 harus Anda lewati. Sekarang tentu saja di sini, kami memiliki peredam 92 00:07:31,920 --> 00:07:36,780 dan kami dapat meneruskannya tetapi dalam aplikasi yang lebih besar, Anda mungkin memiliki lebih dari satu 93 00:07:36,780 --> 00:07:43,710 peredam karena Anda sering memiliki peredam untuk area fitur yang berbeda dari aplikasi Anda, satu untuk otentikasi, satu untuk produk Anda, satu 94 00:07:43,710 --> 00:07:49,740 untuk katakan saja area dukungan aplikasi Anda dan Anda perlu menggabungkan semua reduksi tunggal ini, reduksi yang berbeda ini menjadi 95 00:07:49,800 --> 00:07:53,970 satu peredam root dan itulah yang dilakukan fungsi peredam kombinasi, sekali lagi di 96 00:07:54,000 --> 00:07:58,800 sini kita tidak akan memerlukannya karena kita hanya memiliki satu peredam tetapi untuk sudah menunjukkan 97 00:07:58,800 --> 00:08:01,060 kepada Anda pendekatan yang dapat Anda 98 00:08:01,140 --> 00:08:07,890 gunakan dengan beberapa reduksi juga, saya akan menggunakannya di sini juga. Jadi saya akan memiliki root reducer saya di sini yang 99 00:08:07,890 --> 00:08:14,460 saya buat dengan memanggil pengurang penggabungan, pengurang gabungan mengambil objek Javascript di mana kita sekarang memetakan pengurang tunggal kita, pengurang 100 00:08:14,460 --> 00:08:16,130 berbeda kita untuk kunci. 101 00:08:16,130 --> 00:08:21,870 Jadi misalnya di sini, kita bisa mengambil makanan sebagai kunci tetapi nama itu sepenuhnya terserah Anda dan menghubungkan 102 00:08:22,740 --> 00:08:24,900 ini ke peredam makanan, seperti ini. 103 00:08:24,900 --> 00:08:32,760 Apa yang dilakukannya adalah pada akhirnya menggabungkan peredam makan ini menjadi peredam akar ini dan kita nantinya dapat bekerja 104 00:08:32,760 --> 00:08:37,380 dengan keadaan yang dikelola oleh peredam makan, sehingga dengan kondisi 105 00:08:37,380 --> 00:08:43,440 ini yang diinisialisasi seperti ini, dengan bantuan makanan ini properti, kami akan dapat mengakses negara 106 00:08:43,440 --> 00:08:44,900 ini, bagian negara 107 00:08:44,910 --> 00:08:49,630 ini dengan properti ini nanti, tetapi Anda akan melihat semua itu. 108 00:08:49,740 --> 00:08:54,780 Jadi itu peredam root kita dan sekarang kita hanya perlu melewati peredam root untuk membuat 109 00:08:54,780 --> 00:08:57,900 toko, ini memberi kita toko dan sekarang apa? 110 00:08:57,900 --> 00:09:03,210 Sekarang toko ini perlu disediakan untuk aplikasi kami dan untuk itu, kami membutuhkan 111 00:09:03,240 --> 00:09:06,960 paket lain yang kami instal yaitu React Redux. 112 00:09:07,170 --> 00:09:18,300 Dari sana, kita bisa mengimpor komponen penyedia, penyedia seperti ini. Kami kemudian membungkus penyedia di sekitar komponen aplikasi root kami pada akhirnya, jadi 113 00:09:18,390 --> 00:09:25,200 di sekitar komponen paling atas yang memegang semua komponen lain yang pada akhirnya akan berinteraksi dengan toko 114 00:09:25,200 --> 00:09:30,000 kami dan navigator makanan cukup baik untuk itu karena itu memegang semua 115 00:09:30,060 --> 00:09:36,420 layar kami, sehingga ia memegang semua komponen yang pada akhirnya kita perlu kirim tindakan atau 116 00:09:36,480 --> 00:09:44,230 mengakses negara kita, jadi baca dari negara kita. Oleh karena itu di sini kami membungkus komponen penyedia di sekitar 117 00:09:44,230 --> 00:09:50,440 navigator makanan dan sekarang penyedia mengambil satu properti penting, satu prop yang harus Anda lewati dan itulah prop toko dan 118 00:09:50,680 --> 00:09:54,590 tentu saja di sana, sebagai nilai kami melewati toko kami di sini. 119 00:09:54,640 --> 00:10:01,660 Jadi toko konstan yang menyimpan toko yang dibuat ini dilewatkan ke penyedia penyangga toko dan di belakang layar, ini memberi 120 00:10:01,660 --> 00:10:07,990 kita semua yang kita butuhkan untuk berinteraksi dengan Redux sekarang, dengan toko Redux dalam komponen apa pun, layar 121 00:10:08,050 --> 00:10:11,520 apa pun, atau komponen lain dalam aplikasi kita . 122 00:10:13,360 --> 00:10:18,630 Sekarang biarkan saya me-restart ini dengan mulai npm dan untuk saat ini, ini tidak akan membuat 123 00:10:18,630 --> 00:10:21,430 perbedaan besar tetapi aplikasi kita pasti masih 124 00:10:21,430 --> 00:10:29,140 berfungsi, jadi tidak boleh crash karena itu, jadi mari kita verifikasi bahwa ini adalah kasusnya dan mari muat ulang di sini, kami menekan 125 00:10:29,170 --> 00:10:38,370 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 126 00:10:38,730 --> 00:10:44,860 iOS dan saya cukup yakin bahwa itu juga akan memuat dengan baik di Android, ya itu berhasil juga. 127 00:10:44,890 --> 00:10:46,890 Jadi sekarang Redux sudah 128 00:10:46,900 --> 00:10:49,990 diatur, toko kami diinisialisasi tetapi kami tidak menggunakannya. 129 00:10:49,990 --> 00:10:54,520 Jadi sebagai langkah selanjutnya, mari kita pastikan kita menggunakan toko kita sebelum kita berhati-hati tentang tindakan dan 130 00:10:54,520 --> 00:10:56,200 melakukan beberapa pekerjaan nyata di peredam.