Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Redux
Code

Memulai dengan Redux: Mengapa Redux?

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Dwi Bagus Nurrohman (you can also view the original English article)

Ketika Anda sedang belajar Bereaksi, Anda hampir selalu mendengar orang mengatakan betapa hebatnya Redux dan Anda harus mencobanya. Ekosistem Reaksi tumbuh dengan sangat cepat, dan ada begitu banyak pustaka yang dapat Anda kaitkan dengan React, seperti aliran, redux, middlewares, mobx, dll.

React Learning mudah, tetapi terbiasa dengan seluruh ekosistem React membutuhkan waktu. Tutorial ini merupakan pengantar ke salah satu komponen integral dari ekosistem React — Redux.

Terminologi dasar non-Redux

Berikut adalah beberapa terminologi yang umum digunakan yang mungkin tidak Anda kenal, tetapi tidak spesifik untuk Redux. Anda dapat membaca bagian ini dan kembali ke sini ketika / jika sesuatu tidak masuk akal.

Murni fungsi

Fungsi murni hanyalah fungsi normal dengan dua kendala tambahan yang harus dipenuhi

  1. Diberikan satu set input, fungsi harus selalu mengembalikan output yang sama.
  2. Ini tidak menghasilkan efek samping.

Misalnya, di sini adalah fungsi murni yang mengembalikan jumlah dua angka.

Fungsi murni memberikan hasil yang dapat diprediksi dan bersifat deterministik. Suatu fungsi menjadi tidak murni ketika ia melakukan apa pun selain menghitung nilai kembalinya.

Misalnya, fungsi add di bawah ini menggunakan status global untuk menghitung outputnya. Selain itu, fungsi juga mencatat nilai ke konsol, yang dianggap sebagai efek samping.

Efek samping diamati

"Efek samping yang dapat diamati" adalah istilah mewah untuk interaksi yang dibuat oleh fungsi dengan dunia luar. Jika suatu fungsi mencoba menulis nilai ke dalam variabel yang ada di luar fungsi atau mencoba memanggil metode eksternal, maka Anda dapat dengan aman menyebut hal-hal ini sebagai efek samping.

Namun, jika fungsi murni memanggil fungsi murni lainnya, fungsi tersebut dapat diperlakukan sebagai murni. Berikut beberapa efek samping yang umum terjadi:

  • membuat panggilan API
  • login ke konsol atau mencetak data
  • mutasi data
  • Manipulasi DOM
  • mengambil waktu saat ini

Kontainer dan Komponen Presentasi

Pemisahan komponen arsitektur menjadi dua berguna ketika bekerja dengan aplikasi bereaksi. Anda dapat mengklasifikasikannya secara luas menjadi dua kategori: komponen kontainer dan komponen presentasi. Mereka juga dikenal sebagai komponen pintar dan bodoh.

Komponen kontainer berkaitan dengan bagaimana hal bekerja, sedangkan komponen presentasi berkaitan dengan bagaimana hal-hal terlihat. Untuk memahami konsep dengan lebih baik, saya telah membahasnya di tutorial lain: Kontainer vs. Komponen Presentasional dalam React.

Bisa berubah vs objek abadi

Objek yang bisa berubah dapat didefinisikan sebagai berikut:

Objek yang bisa berubah adalah objek yang statusnya dapat dimodifikasi setelah dibuat.

Immutability adalah kebalikannya — objek yang tidak dapat diubah adalah objek yang statusnya tidak dapat dimodifikasi setelah dibuat. Dalam JavaScript, string dan angka tidak dapat diubah, tetapi objek dan larik tidak. Contohnya menunjukkan perbedaan yang lebih baik.

Untuk membuat objek berubah, gunakan metode Object.assign untuk membuat metode baru atau operator spread baru.

Apa itu Redux?

Halaman resmi mendefinisikan Redux sebagai berikut:

Redux adalah wadah negara diprediksi untuk aplikasi JavaScript.

Meskipun itu secara akurat menggambarkan Redux, sangat mudah untuk tersesat ketika Anda melihat gambaran besar Redux untuk pertama kalinya. Ini memiliki begitu banyak bagian yang bergerak yang perlu Anda pas bersama. Tapi begitu Anda melakukannya, saya berjanji, Anda akan mulai mencintai Redux.

Redux adalah pustaka manajemen negara yang dapat Anda kaitkan dengan pustaka JavaScript apa pun, dan bukan hanya Bereaksi. Namun, ia bekerja sangat baik dengan Bereaksi karena sifat fungsional React. Untuk memahami ini dengan lebih baik, mari kita lihat negara.

Any change in the state rerenders the component and any user interaction updates the state

Seperti yang Anda lihat, status komponen menentukan apa yang diberikan dan bagaimana ia berperilaku. Aplikasi ini memiliki keadaan awal, dan interaksi pengguna apa pun memicu tindakan yang memperbarui negara. Saat status diperbarui, halaman diubah.

Dengan React, setiap komponen memiliki status lokal yang dapat diakses dari dalam komponen, atau Anda dapat meneruskannya sebagai alat peraga untuk komponen anak. Kami biasanya menggunakan negara untuk menyimpan:

  1. UI statis dan data transisi. Ini termasuk daftar elemen UI untuk menu navigasi atau input bentuk dalam komponen yang dikontrol.
  2. Status aplikasi seperti data diambil dari server, status login pengguna, dll.

Menyimpan data aplikasi dalam status komponen tidak masalah ketika Anda memiliki aplikasi React dasar dengan beberapa komponen.

React Project with a few components
Hirarki komponen aplikasi dasar

Namun, sebagian besar aplikasi kehidupan nyata akan memiliki lebih banyak fitur dan komponen. Ketika jumlah level dalam hierarki komponen meningkat, mengelola negara menjadi bermasalah.

Component hierarchy of a chat application using React
Sketsa aplikasi berukuran sedang

Mengapa Haruskah Anda Menggunakan Redux?

Berikut ini adalah skenario yang mungkin Anda temui saat bekerja dengan React.

  1. Anda sedang membangun aplikasi berukuran sedang, dan Anda memiliki komponen yang terbagi rapi menjadi komponen pintar dan bodoh.
  2. Komponen pintar menangani keadaan dan kemudian meneruskannya ke komponen bodoh. Mereka mengurus pembuatan panggilan API, mengambil data dari sumber data, memproses data, dan kemudian mengatur negara. Komponen bodoh menerima props dan mengembalikan representasi UI.
  3. Ketika Anda akan menulis komponen baru, tidak selalu jelas di mana menempatkan negara. Anda dapat membiarkan negara bagian dari wadah yang merupakan induk langsung dari komponen presentasional. Lebih baik lagi, Anda dapat memindahkan negara lebih tinggi dalam hierarki sehingga negara dapat diakses ke beberapa komponen presentasional.
  4. Ketika aplikasi tumbuh, Anda melihat bahwa negara tersebar di semua tempat. Ketika suatu komponen perlu mengakses keadaan yang tidak segera memiliki akses ke, Anda akan mencoba untuk mengangkat negara ke leluhur komponen terdekat.
  5. Setelah refactoring dan pembersihan yang konstan, Anda akan berakhir dengan sebagian besar tempat penyimpanan negara di bagian atas hirarki komponen.
  6. Akhirnya, Anda memutuskan bahwa itu ide yang baik untuk membiarkan komponen di bagian atas menangani negara secara global dan kemudian mengesampingkan semuanya. Setiap komponen lain dapat berlangganan alat peraga yang mereka butuhkan dan mengabaikan sisanya.

Inilah yang saya alami secara pribadi dengan React, dan banyak pengembang lain akan setuju. Bereaksi adalah pustaka tampilan, dan bukan tugas React untuk mengelola negara secara khusus. Yang kami cari adalah prinsip Pemisahan Kekhawatiran.

Redux membantu Anda untuk memisahkan status aplikasi dari React. Redux membuat toko global yang berada di tingkat teratas aplikasi Anda dan memberi makan negara ke semua komponen lainnya. Tidak seperti Flux, Redux tidak memiliki banyak objek toko. Seluruh status aplikasi berada dalam objek toko itu, dan Anda berpotensi menukar lapisan tampilan dengan pustaka lain dengan toko tetap utuh.

Komponen-komponen di-render setiap kali toko diperbarui, dengan sedikit dampak pada kinerja. Itu kabar baik, dan ini membawa banyak manfaat bersamanya. Anda dapat memperlakukan semua komponen React Anda sebagai bodoh, dan Bereaksi hanya dapat fokus pada sisi pandang hal.

Sekarang kita tahu mengapa Redux berguna, mari kita masuk ke arsitektur Redux.

Arsitektur Redux

Saat Anda mempelajari Redux, ada beberapa konsep inti yang perlu Anda gunakan. Gambar di bawah ini menggambarkan arsitektur Redux dan bagaimana semuanya terhubung bersama.

Getting started with Redux Redux Architecture
Redux singkatnya

Jika Anda terbiasa dengan Flux, beberapa elemen mungkin terlihat akrab. Jika tidak, tidak apa-apa juga karena kita akan menutupi semuanya dari pangkalan. Pertama, pastikan Anda telah menginstal ulang redux:

Gunakan create-react-app atau konfigurasi webpack favorit Anda untuk mengatur server pengembangan. Karena Redux adalah manajemen negara independen, kami tidak akan menyambungkan React. Jadi, hapus konten index.js, dan kami akan bermain-main dengan Redux untuk sisa tutorial ini.

Penyimpanan

Penyimpanan adalah salah satu objek JavaScript besar yang memiliki banyak pasangan nilai kunci yang mewakili keadaan aplikasi saat ini. Tidak seperti objek statis di React yang ditaburkan di komponen yang berbeda, kita hanya memiliki satu toko. Toko menyediakan status aplikasi, dan setiap kali pembaruan negara, tampilan rerenders.

Namun, Anda tidak dapat mengubah atau mengubah toko. Sebagai gantinya, Anda membuat versi baru dari toko.

Karena itu, Anda dapat melakukan perjalanan waktu melalui semua status dari saat aplikasi di-boot di browser Anda.

penyimpanan memiliki tiga metode untuk berkomunikasi dengan sisa arsitektur. Mereka:

  • Store.getState () - Untuk mengakses pohon keadaan saat ini dari aplikasi Anda.
  • Store.dispatch (tindakan) —Untuk memicu perubahan status berdasarkan tindakan. Lebih lanjut tentang tindakan di bawah ini.
  • Store.subscribe (pendengar) —Untuk mendengarkan perubahan apa pun di negara bagian. Ini akan dipanggil setiap kali ada tindakan yang dikirim.

Mari buat penyimpanan. Redux memiliki metode createStore untuk membuat penyimpanan baru. Anda harus memberikannya peredam, meskipun kami tidak tahu apa itu. Jadi saya hanya akan membuat fungsi yang disebut peredam. Anda dapat memilih argumen kedua yang menetapkan status awal penyimpanan.

src/index.js

Sekarang kita akan mendengarkan perubahan apa pun di penyimpanan, dan kemudian console.log () keadaan penyimpanan saat ini.

Jadi bagaimana kita memperbarui penyimpanan? Redux memiliki sesuatu yang disebut tindakan yang membuat hal ini terjadi.

Pembuat Tindakan / Tindakan

Tindakan juga objek JavaScript biasa yang mengirim informasi dari aplikasi Anda ke toko. Jika Anda memiliki penghitung yang sangat sederhana dengan tombol kenaikan, menekannya akan menghasilkan aksi yang dipicu yang terlihat seperti ini:

Mereka adalah satu-satunya sumber informasi ke toko. Keadaan toko hanya berubah sebagai tanggapan atas suatu tindakan. Setiap tindakan harus memiliki properti jenis yang menggambarkan apa yang akan dilakukan objek aksi. Selain itu, struktur tindakan sepenuhnya terserah Anda. Namun, pertahankan tindakan Anda kecil karena tindakan mewakili jumlah minimum informasi yang diperlukan untuk mengubah status aplikasi.

Misalnya, dalam contoh di atas, properti jenis diatur ke "INCREMENT", dan properti muatan tambahan disertakan. Anda dapat mengganti nama properti muatan menjadi sesuatu yang lebih berarti atau, dalam kasus kami, hilangkan seluruhnya. Anda dapat mengirim tindakan ke toko seperti ini.

Saat mengkodekan Redux, Anda biasanya tidak akan menggunakan tindakan secara langsung. Sebaliknya, Anda akan memanggil fungsi yang mengembalikan tindakan, dan fungsi-fungsi ini dikenal sebagai pencipta aksi. Berikut ini adalah pembuat tindakan untuk tindakan peningkatan yang telah kita diskusikan sebelumnya.

Jadi, untuk memperbarui keadaan penghitung, Anda harus mengirim tindakan incrementCount  seperti ini:

Jika Anda menuju ke konsol browser, Anda akan melihat bahwa itu berfungsi, sebagian. Kami tidak terdefinisi karena kami belum mendefinisikan peredam.

Browser console returns undefined for getState

Jadi sekarang kita telah membahas tindakan dan toko. Namun, kami memerlukan mekanisme untuk mengubah informasi yang disediakan oleh tindakan dan mengubah keadaan toko. Pengecil melayani tujuan ini.

Pengecil

Suatu tindakan menggambarkan masalah, dan peredam bertanggung jawab untuk menyelesaikan masalah. Dalam contoh sebelumnya, metode incrementCount mengembalikan tindakan yang menyediakan informasi tentang jenis perubahan yang ingin kita buat kepada negara. Peredam menggunakan informasi ini untuk benar-benar memperbarui negara. Ada poin besar yang disorot dalam dokumen yang harus selalu Anda ingat saat menggunakan Redux:

Dengan argumen yang sama, seorang Reducer harus menghitung keadaan selanjutnya dan mengembalikannya. Tidak ada kejutan. Tidak ada efek samping. Tidak ada panggilan API. Tidak ada mutasi. Hanya sebuah perhitungan.

Apa artinya ini adalah bahwa peredam harus menjadi fungsi murni. Diberikan satu set input, harus selalu mengembalikan output yang sama. Di luar itu, seharusnya tidak melakukan apa-apa lagi. Juga, peredam bukanlah tempat untuk efek samping seperti membuat panggilan AJAX atau mengambil data dari API.

Mari isi reducer untuk counter kami.

Peredam menerima dua argumen — keadaan dan tindakan — dan itu mengembalikan sebuah negara baru.

Negara menerima nilai default, initialState, yang akan digunakan hanya jika nilai negara tidak terdefinisi. Jika tidak, nilai sebenarnya dari negara akan dipertahankan. Kami menggunakan pernyataan switch untuk memilih tindakan yang tepat. Segarkan peramban, dan semuanya berfungsi seperti yang diharapkan.

Mari tambahkan kasus untuk DECREMENT , tanpa yang penghitung tidak lengkap.

Di sini adalah pencipta tindakan.

Akhirnya, mengirimkannya ke toko.

Itu dia!

Ringkasan

Tutorial ini dimaksudkan untuk menjadi titik awal untuk mengelola negara dengan Redux. Kami telah membahas semua hal penting yang diperlukan untuk memahami konsep dasar Redux seperti toko, tindakan, dan reduksi. Menjelang akhir tutorial, kami juga membuat counter demo redux yang berfungsi. Meskipun tidak banyak, kami belajar bagaimana semua potongan teka-teki cocok bersama.

Selama beberapa tahun terakhir, React semakin populer. Bahkan, kami memiliki sejumlah barang di pasar yang tersedia untuk dibeli, ditinjau, diimplementasikan, dan seterusnya. Jika Anda mencari sumber daya tambahan di sekitar React, jangan ragu untuk memeriksanya.

Dalam tutorial berikutnya, kami akan memanfaatkan hal-hal yang telah kami pelajari di sini untuk membuat aplikasi React menggunakan Redux. Tetap disini hingga saat itu. Bagikan pemikiran Anda di komentar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.