Untuk mengatur Redux, saya akan mengikuti pendekatan yang sama seperti yang saya lakukan sebelumnya di kursus, saya akan
menambahkan folder toko dan di sana, saya akan mengambil tindakan tempat saya. File js dan peredam tempat saya. file js.
Itu tentu saja sedikit
berbeda dari sebelumnya, di sana saya memiliki tindakan dan
reduksi subfolder, Anda benar-benar dapat melakukan
hal yang sama di sini, karena saya hanya memiliki satu tindakan dan satu peredam,
saya akan menyimpannya dalam dua file
tetapi Anda dapat memiliki subfolder dan sebagainya, itu sepenuhnya terserah Anda. Sekarang di peredam tempat, saya akan menentukan bagaimana keadaan saya akan terlihat
seperti ini untuk bagian dari keadaan total saya dan itu
akan sangat sederhana, keadaan awal saya di sini hanyalah objek Javascript di mana saya ingin memiliki kunci tempat yang
kosong , array kosong di awal karena saya akan memiliki array tempat dan hanya itu.
Jadi oleh karena itu di sini, saya dapat mengekspor fungsi peredam ini yang mengambil keadaan yang diatur ke keadaan awal jika
tidak
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
logika untuk menangani tindakan yang berbeda dan misalnya, menambahkan tempat baru. Dalam file tindakan tempat, saya akan mengekspor konstanta
baru, tambahkan tempat, yang merupakan salah satu pengidentifikasi tindakan yang saya perlukan dan saya akan menambahkan fungsi pembuat tindakan, tambahkan tempat,
yang akan mengambil beberapa data tentang tempat dan untuk saat, itu hanya judul, nanti yang akan lebih
dan di sini saya ingin mengembalikan
objek tindakan saya kemudian
di mana jenisnya menambahkan tempat dan di mana saya kemudian hanya memiliki data tempat saya katakanlah yang pada
saat ini tentu saja hanya terdiri dari judul tetapi kemudian lagi, itu akan lebih.
Itulah aplikasi Redux dasar, sekarang tentu saja dalam aplikasi. js
kita perlu menghubungkan semuanya. Jadi di sana ketika Anda mempelajarinya dalam kursus
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
kami juga menginstal. Sekarang dari Redux,
kita perlu membuat store dan menggabungkan reducers dan juga menerapkan middleware untuk menerapkan Redux Thunk dan dari React
Redux, kita membutuhkan komponen penyedia dan dengan
itu, sama seperti kita melakukannya beberapa kali dalam kursus, kita dapat membuat root reducer
kita dengan bantuan menggabungkan reduksi.
Ini mengambil objek tempat kami menggabungkan semua peredam, sekarang
jelas kami hanya memiliki satu peredam di sini dan itu adalah peredam tempat yang kami impor dari folder toko
dan di sana, itu adalah file tempat peredam, tetapi tentu saja
Anda dapat memiliki lebih banyak peredam di aplikasi Anda dan saya akan memetakan ini ke tempat, jadi tempat
peredam dipetakan ke pengidentifikasi tempat di sini.
Sekarang dengan itu, kita dapat membuat toko kita dengan membuat fungsi toko dan fungsi ini mengambil peredam root dan kita
juga bisa meneruskan argumen kedua di mana kita memanggil berlaku middleware dan meneruskan Redux Thunk ke fungsi itu sehingga paket Redux
Thunk adalah jenis dari dicolokkan ke aliran Redux kami di sini. Dengan semua pengaturan itu, kami dapat membungkus
navigator tempat kami dengan komponen penyedia karena setiap layar di aplikasi kami, di navigator kami, harus memiliki akses
ke toko dan ke penyedia, kami melewati toko melalui penyangga toko dan itulah
Redux pengaturan kami juga melihat beberapa kali sepanjang kursus ini. Dengan pengaturan Redux, kita dapat pergi ke layar tempat baru dan
memastikan bahwa di sini di save place handler yang dipicu ketika kita mengklik
tombol ini, kita benar-benar menambahkan tempat baru yang untuk saat ini hanya terdiri dari judulnya tetapi
dari Tentu saja, itu akan berubah sepanjang kursus ini. Untuk melakukan itu, kita dapat mengimpor menggunakan pengiriman dari
React Redux dan hanya mendapatkan akses ke fungsi pengiriman dengan mengeksekusi penggunaan pengiriman di sana dan
tentu saja mengimpor tindakan kita, misalnya lagi dengan menggunakan sintaks penggabungan impor ini di sini, dengan
mengimpor semuanya sebagai tempat tindakan dari toko dan di sana, file tindakan tempat dan dengan itu, kita bisa pergi untuk menyimpan penangan tempat, memanggil
pengiriman di sini dan mengirimkan tindakan tempat menambahkan tempat dan meneruskan judul yang tentu saja disimpan dalam nilai judul
kami, jadi dalam hal ini di sini . Sekarang dengan itu, kita akan dapat mengirimkan tindakan ini,
di peredam tempat, kita sekarang dapat
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
mana kita baru saja mengembalikan negara dan oleh karena itu kita dapat menyingkirkan pernyataan pengembalian
ini di sana dan sekarang jika menambahkan tempat adalah apa yang kita dapatkan, baik
maka kita
dapat membuat tempat baru di sini dan untuk itu, juga sama seperti sebelumnya dalam kursus ini,
saya akan menambahkan folder model dengan tempat. File js di sana di mana saya ingin mendefinisikan bagaimana
sebuah tempat seharusnya terlihat dalam aplikasi ini, cukup hanya untuk memiliki cara mudah membuat objek tempat baru
yang selalu sama.
Jadi di sini, saya akan membuat kelas dan mengekspor ini sebagai file default dan sekarang tentu saja terserah Anda bagaimana Anda ingin tempat Anda
terlihat, saya akan menentukan milik saya dengan bantuan konstruktor untuk memiliki ID dan judul dan nanti kami akan menambahkan
lebih banyak
tetapi untuk sekarang, hanya
itu dan saya akan
menyimpan ID saya di sini dan saya menyimpan judul saya di properti. Dengan itu kami memiliki cetak biru untuk
tempat-tempat baru, kembali ke peredam tempat, sekarang kami dapat
menggunakannya.
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
baru, jadi dengan menginisialisasi atau dengan membuat contoh
tempat baru berdasarkan kelas kami dan untuk ID, untuk saat ini saya akan menggunakan ID dummy dari cap
waktu tanggal saat ini dan Namun judul tentu saja adalah sesuatu yang dapat kita atur karena itu bagian dari tindakan kita, di
sana pada data tempat kita akan memiliki properti judul yang memegang judul yang ditetapkan pengguna,
jadi di sini saya
dapat mengatur ini untuk bertindak. placeData. judul.
Ini menciptakan objek tempat baru dan
sekarang kita dapat mengembalikan negara baru di sini tempat dan saya tidak perlu menyalin negara lama karena saya tidak memiliki hal lain di
negara saya di sini dan saya tidak akan menambahkan apa pun sehingga saya bisa mengembalikan sebuah objek negara baru, di
mana tempat sekarang negara. tempat concat, sehingga mengambil array
lama, menambahkan item baru dan mengembalikan array baru yang menggantikan array lama di sini di
negara kita dan
saya concat tempat baru saya tentu saja. Dengan itu, kita harus memiliki daftar tempat yang kita kelola. Dalam kuliah berikutnya, kita sekarang dapat
khawatir tentang
mengeluarkan ini di sini di layar daftar tempat. Hanya satu hal lagi, ketika kita menambahkan
tempat baru di sini dengan mengklik save
place handler, saya juga ingin kembali ke layar
daftar tempat, jadi di sini setelah mengirimkan tindakan ini, saya akan benar-benar menggunakan navigasi alat peraga untuk kembali, jadi untuk
kembali ke layar daftar tempat. Dan sekarang mari kita bekerja pada layar daftar tempat itu dan mari kita pastikan
kita benar-benar menampilkan daftar tempat di sana.