1 00:00:02,290 --> 00:00:05,850 Untuk mengatur Redux, saya akan mengikuti pendekatan yang sama seperti yang saya lakukan sebelumnya di kursus, saya akan 2 00:00:05,950 --> 00:00:14,470 menambahkan folder toko dan di sana, saya akan mengambil tindakan tempat saya. File js dan peredam tempat saya. file js. 3 00:00:14,470 --> 00:00:16,310 Itu tentu saja sedikit 4 00:00:16,330 --> 00:00:19,310 berbeda dari sebelumnya, di sana saya memiliki tindakan dan 5 00:00:19,390 --> 00:00:21,520 reduksi subfolder, Anda benar-benar dapat melakukan 6 00:00:21,520 --> 00:00:25,950 hal yang sama di sini, karena saya hanya memiliki satu tindakan dan satu peredam, 7 00:00:25,960 --> 00:00:27,820 saya akan menyimpannya dalam dua file 8 00:00:27,820 --> 00:00:34,840 tetapi Anda dapat memiliki subfolder dan sebagainya, itu sepenuhnya terserah Anda. Sekarang di peredam tempat, saya akan menentukan bagaimana keadaan saya akan terlihat 9 00:00:34,840 --> 00:00:37,990 seperti ini untuk bagian dari keadaan total saya dan itu 10 00:00:37,990 --> 00:00:43,510 akan sangat sederhana, keadaan awal saya di sini hanyalah objek Javascript di mana saya ingin memiliki kunci tempat yang 11 00:00:43,510 --> 00:00:47,810 kosong , array kosong di awal karena saya akan memiliki array tempat dan hanya itu. 12 00:00:47,830 --> 00:00:53,830 Jadi oleh karena itu di sini, saya dapat mengekspor fungsi peredam ini yang mengambil keadaan yang diatur ke keadaan awal jika 13 00:00:53,830 --> 00:00:54,190 tidak 14 00:00:54,190 --> 00:01:01,450 ada negara lain disahkan dan tindakan dan di sana untuk saat ini, saya hanya akan mengembalikan negara itu, segera tentu saja kita akan Saya akan menambahkan 15 00:01:01,450 --> 00:01:08,320 logika untuk menangani tindakan yang berbeda dan misalnya, menambahkan tempat baru. Dalam file tindakan tempat, saya akan mengekspor konstanta 16 00:01:08,320 --> 00:01:16,890 baru, tambahkan tempat, yang merupakan salah satu pengidentifikasi tindakan yang saya perlukan dan saya akan menambahkan fungsi pembuat tindakan, tambahkan tempat, 17 00:01:16,890 --> 00:01:23,640 yang akan mengambil beberapa data tentang tempat dan untuk saat, itu hanya judul, nanti yang akan lebih 18 00:01:23,640 --> 00:01:26,290 dan di sini saya ingin mengembalikan 19 00:01:26,290 --> 00:01:28,420 objek tindakan saya kemudian 20 00:01:28,420 --> 00:01:35,560 di mana jenisnya menambahkan tempat dan di mana saya kemudian hanya memiliki data tempat saya katakanlah yang pada 21 00:01:35,560 --> 00:01:41,200 saat ini tentu saja hanya terdiri dari judul tetapi kemudian lagi, itu akan lebih. 22 00:01:41,260 --> 00:01:43,630 Itulah aplikasi Redux dasar, sekarang tentu saja dalam aplikasi. js 23 00:01:43,660 --> 00:01:50,670 kita perlu menghubungkan semuanya. Jadi di sana ketika Anda mempelajarinya dalam kursus 24 00:01:51,280 --> 00:02:02,010 ini, kita dapat mengimpor sesuatu dari Redux dan juga sesuatu dari React Redux dan juga mengimpor Redux Thunk dari Redux Thunk, jadi dari paket ini 25 00:02:02,040 --> 00:02:05,160 kami juga menginstal. Sekarang dari Redux, 26 00:02:05,160 --> 00:02:12,270 kita perlu membuat store dan menggabungkan reducers dan juga menerapkan middleware untuk menerapkan Redux Thunk dan dari React 27 00:02:12,270 --> 00:02:15,210 Redux, kita membutuhkan komponen penyedia dan dengan 28 00:02:15,690 --> 00:02:21,240 itu, sama seperti kita melakukannya beberapa kali dalam kursus, kita dapat membuat root reducer 29 00:02:21,240 --> 00:02:23,120 kita dengan bantuan menggabungkan reduksi. 30 00:02:23,130 --> 00:02:26,370 Ini mengambil objek tempat kami menggabungkan semua peredam, sekarang 31 00:02:26,370 --> 00:02:33,090 jelas kami hanya memiliki satu peredam di sini dan itu adalah peredam tempat yang kami impor dari folder toko 32 00:02:33,090 --> 00:02:37,140 dan di sana, itu adalah file tempat peredam, tetapi tentu saja 33 00:02:37,140 --> 00:02:43,680 Anda dapat memiliki lebih banyak peredam di aplikasi Anda dan saya akan memetakan ini ke tempat, jadi tempat 34 00:02:43,710 --> 00:02:46,690 peredam dipetakan ke pengidentifikasi tempat di sini. 35 00:02:46,890 --> 00:02:53,460 Sekarang dengan itu, kita dapat membuat toko kita dengan membuat fungsi toko dan fungsi ini mengambil peredam root dan kita 36 00:02:53,490 --> 00:03:00,300 juga bisa meneruskan argumen kedua di mana kita memanggil berlaku middleware dan meneruskan Redux Thunk ke fungsi itu sehingga paket Redux 37 00:03:00,330 --> 00:03:07,800 Thunk adalah jenis dari dicolokkan ke aliran Redux kami di sini. Dengan semua pengaturan itu, kami dapat membungkus 38 00:03:07,800 --> 00:03:15,810 navigator tempat kami dengan komponen penyedia karena setiap layar di aplikasi kami, di navigator kami, harus memiliki akses 39 00:03:15,810 --> 00:03:21,750 ke toko dan ke penyedia, kami melewati toko melalui penyangga toko dan itulah 40 00:03:21,750 --> 00:03:30,160 Redux pengaturan kami juga melihat beberapa kali sepanjang kursus ini. Dengan pengaturan Redux, kita dapat pergi ke layar tempat baru dan 41 00:03:30,160 --> 00:03:35,380 memastikan bahwa di sini di save place handler yang dipicu ketika kita mengklik 42 00:03:35,380 --> 00:03:41,530 tombol ini, kita benar-benar menambahkan tempat baru yang untuk saat ini hanya terdiri dari judulnya tetapi 43 00:03:41,530 --> 00:03:49,450 dari Tentu saja, itu akan berubah sepanjang kursus ini. Untuk melakukan itu, kita dapat mengimpor menggunakan pengiriman dari 44 00:03:50,730 --> 00:03:57,300 React Redux dan hanya mendapatkan akses ke fungsi pengiriman dengan mengeksekusi penggunaan pengiriman di sana dan 45 00:03:57,390 --> 00:04:03,930 tentu saja mengimpor tindakan kita, misalnya lagi dengan menggunakan sintaks penggabungan impor ini di sini, dengan 46 00:04:04,380 --> 00:04:14,370 mengimpor semuanya sebagai tempat tindakan dari toko dan di sana, file tindakan tempat dan dengan itu, kita bisa pergi untuk menyimpan penangan tempat, memanggil 47 00:04:14,370 --> 00:04:21,960 pengiriman di sini dan mengirimkan tindakan tempat menambahkan tempat dan meneruskan judul yang tentu saja disimpan dalam nilai judul 48 00:04:21,960 --> 00:04:29,500 kami, jadi dalam hal ini di sini . Sekarang dengan itu, kita akan dapat mengirimkan tindakan ini, 49 00:04:29,650 --> 00:04:32,170 di peredam tempat, kita sekarang dapat 50 00:04:32,170 --> 00:04:44,400 mengganti jenis tindakan kita atau menggunakan jika memeriksa tentu saja dan mencari negara menambahkan tempat atau tindakan yang kita impor dari tindakan tempat, juga menambahkan kasus default dengan cara di 51 00:04:44,400 --> 00:04:50,400 mana kita baru saja mengembalikan negara dan oleh karena itu kita dapat menyingkirkan pernyataan pengembalian 52 00:04:50,400 --> 00:04:56,160 ini di sana dan sekarang jika menambahkan tempat adalah apa yang kita dapatkan, baik 53 00:04:56,220 --> 00:04:57,240 maka kita 54 00:04:57,930 --> 00:05:04,260 dapat membuat tempat baru di sini dan untuk itu, juga sama seperti sebelumnya dalam kursus ini, 55 00:05:04,260 --> 00:05:10,290 saya akan menambahkan folder model dengan tempat. File js di sana di mana saya ingin mendefinisikan bagaimana 56 00:05:10,290 --> 00:05:15,900 sebuah tempat seharusnya terlihat dalam aplikasi ini, cukup hanya untuk memiliki cara mudah membuat objek tempat baru 57 00:05:15,900 --> 00:05:17,190 yang selalu sama. 58 00:05:17,190 --> 00:05:24,510 Jadi di sini, saya akan membuat kelas dan mengekspor ini sebagai file default dan sekarang tentu saja terserah Anda bagaimana Anda ingin tempat Anda 59 00:05:24,510 --> 00:05:30,180 terlihat, saya akan menentukan milik saya dengan bantuan konstruktor untuk memiliki ID dan judul dan nanti kami akan menambahkan 60 00:05:30,570 --> 00:05:31,460 lebih banyak 61 00:05:31,530 --> 00:05:32,670 tetapi untuk sekarang, hanya 62 00:05:32,670 --> 00:05:34,020 itu dan saya akan 63 00:05:34,230 --> 00:05:41,280 menyimpan ID saya di sini dan saya menyimpan judul saya di properti. Dengan itu kami memiliki cetak biru untuk 64 00:05:41,280 --> 00:05:45,390 tempat-tempat baru, kembali ke peredam tempat, sekarang kami dapat 65 00:05:45,630 --> 00:05:46,440 menggunakannya. 66 00:05:46,440 --> 00:05:55,170 Jadi di sana kita dapat mengimpor tempat dari folder model dan di sana, tempat itu. file js dan kemudian di sini, buat tempat baru dengan memanggil tempat 67 00:05:55,170 --> 00:05:58,080 baru, jadi dengan menginisialisasi atau dengan membuat contoh 68 00:05:58,080 --> 00:06:04,560 tempat baru berdasarkan kelas kami dan untuk ID, untuk saat ini saya akan menggunakan ID dummy dari cap 69 00:06:04,560 --> 00:06:12,050 waktu tanggal saat ini dan Namun judul tentu saja adalah sesuatu yang dapat kita atur karena itu bagian dari tindakan kita, di 70 00:06:12,060 --> 00:06:17,130 sana pada data tempat kita akan memiliki properti judul yang memegang judul yang ditetapkan pengguna, 71 00:06:17,130 --> 00:06:18,720 jadi di sini saya 72 00:06:18,720 --> 00:06:24,630 dapat mengatur ini untuk bertindak. placeData. judul. 73 00:06:24,630 --> 00:06:26,530 Ini menciptakan objek tempat baru dan 74 00:06:26,670 --> 00:06:33,600 sekarang kita dapat mengembalikan negara baru di sini tempat dan saya tidak perlu menyalin negara lama karena saya tidak memiliki hal lain di 75 00:06:33,600 --> 00:06:39,480 negara saya di sini dan saya tidak akan menambahkan apa pun sehingga saya bisa mengembalikan sebuah objek negara baru, di 76 00:06:39,900 --> 00:06:44,020 mana tempat sekarang negara. tempat concat, sehingga mengambil array 77 00:06:44,040 --> 00:06:49,710 lama, menambahkan item baru dan mengembalikan array baru yang menggantikan array lama di sini di 78 00:06:49,710 --> 00:06:51,050 negara kita dan 79 00:06:51,300 --> 00:06:59,310 saya concat tempat baru saya tentu saja. Dengan itu, kita harus memiliki daftar tempat yang kita kelola. Dalam kuliah berikutnya, kita sekarang dapat 80 00:06:59,310 --> 00:07:00,220 khawatir tentang 81 00:07:00,240 --> 00:07:06,390 mengeluarkan ini di sini di layar daftar tempat. Hanya satu hal lagi, ketika kita menambahkan 82 00:07:06,390 --> 00:07:09,310 tempat baru di sini dengan mengklik save 83 00:07:09,390 --> 00:07:12,560 place handler, saya juga ingin kembali ke layar 84 00:07:12,570 --> 00:07:20,610 daftar tempat, jadi di sini setelah mengirimkan tindakan ini, saya akan benar-benar menggunakan navigasi alat peraga untuk kembali, jadi untuk 85 00:07:20,610 --> 00:07:25,530 kembali ke layar daftar tempat. Dan sekarang mari kita bekerja pada layar daftar tempat itu dan mari kita pastikan 86 00:07:25,530 --> 00:07:26,760 kita benar-benar menampilkan daftar tempat di sana.