Redux Dan Segala Kerumitannya — Untuk Pemula

Redux merupakan salah satu library state management yang harus dikuasi oleh para pengguna React. Hal ini dikarenakan banyak perusahaan yang menggunakan redux sebagai tumpuan state management pada aplikasinya. Namun sayangnya redux bukanlah library yang mudah dipahami oleh pemula. Kali ini saya akan mencoba menjelaskan Redux dan segala kerumitannya agar para pemula lebih mudah untuk memahami — semoga.

Gak tau ini apa, keren aja…

Bagian-bagian Redux

Terdapat 5 bagian utama dari redux, yaitu state, reducer, action, dispatcher, dan store. Berikut adalah penjelasan masing-masing bagiannya:

• state merupakan object javascript yang mempresentasikan state aplikasi secara keseluruhan.
• reducer adalah fungsi biasa yang menerima action untuk mengubah state
• action adalah object javascript yang mempresentasikan “perubahan apa yang hendak dilakukan”
• dispatcher adalah yang menjadi jembatan, agar suatu action bisa sampai ke reducer.
• store adalah yang menyatukan mereka semua.

State

Contoh dari state adalah sebagai berikut:

Contoh state

Jadi ketika ada bagian dari state yang berubah, maka aplikasi pun ikut berubah. Sederhananya seperti itu. cara mengubahnya gimana? sebenarnya cara mengubahnya sama seperti mengubah object biasa. Misal:

// mengubah state counter
state.counter = 1
// mengubah state user
state.user.role = "customer"
// Menambah article pada state articleList
state.articleList.push({
  title: "New Article",
  content: "New Content",
})

Namun, jika di redux, untuk mengubah state harus melalui reducer. supaya apa? supaya kita tau penyebab suatu state berubah. Kalau tau penyebabnya kita jadi mudah untuk debug aplikasinya.

Reducer

Reducer hanyalah fungsi biasa yang bertugas untuk mengubah state berdasarkan action. Mari fokus pada bagaimana Reducer mengubah suatu state. Gimana sih contoh reducer dan cara kerja dia?

Contoh Reducer

Lantas bagaimana cara menjalankan reducer? yaa sederhana tinggal dipanggil aja seperti dibawah ini.

Contoh cara menjalankan reducer

Perhatikan, reducer akan membuat state baru sesuai dengan action yang diterima. Sayangnya jika di redux, kita tidak boleh mengeksekusi reducer secara langsung, melainkan harus melalui perantara yang disebut dispatcher.

Dispatcher

Dispatcher adalah perantara antara action dan reducer . Mudahnya, dispatcher adalah kurir yang mengirimkan action ke reducer agar reducer bisa melakukan perubahan state. Jika pada contoh sebelumnya kita menjalankan reducer secara langsung, kali ini kita coba menjalankan reducer tapi melalui dispatcher.

Contoh cara menggunakan dispatcher

Lhoooo kok tiba-tiba ada store? jadi dispatcher hanya ada pada store, itu mengapa pada contoh diatas, kita menambahkan cara membuat store pada redux. Sederhana bukan?

Immutability

Tambahan, redux mengadopsi konsep Immutability yang mengharuskan objectnya bersifat immutable. Saya tidak akan bahas panjang lebar disini, singkatnya, tips dari saya: gunakan library dot-prop-immutable untuk proses mengubah state. Tinggal kita ganti saja pada bagian reducer seperti di bawah ini:

Contoh penggunaan dot-prop-immutable

Action Payload

Oh iya action tidak hanya mempunyai type saja, tapi action juga bisa memiliki informasi tambahan lain misal nih:

const actionKu = {
  type: "DELETE_ARTICLE",
  articleIndex: 0 // informasi tambahan
}
store.dispatch(actionKu)

Sehingga reducer kita bisa lebih tau artikel mana yang hendak kita hapus. Untuk itu perlu sedikit perubahan pada reducer, agar merespon informasi tambahan yang dikirimkan.

Nah informasi tambahan itu bisa sangat fleksibel sesuai kebutuhan. Dan untuk memudahkannya, kita bisa membuat yang namanya actionCreator, yaitu fungsi biasa untuk membuat suatu action.

Contoh actionCreator

Gimana, sampai sini paham?

Kesimpulan

Setelah mengenal konsep dasar redux secara sederhana maka selanjutnya tinggal mengintegrasikannya dengan aplikasi yang kita bangun. Kalau teman-teman memahami dasar redux secara menyeluruh, maka redux bisa digunakan di library view apapun seperti React, Vue, angular, dsb. Tapi memang umunya digunakan pada React.

Gimana cara integrasikan dengan React? yaa nggak disini ceritanya….

Penutup

Setiap detil konten dalam artikel ini tidak bermaksud untuk show off, menyinggung, menyindir, ataupun sejenisnya. Melainkan untuk menjelaskan konsep dasar redux dan bagaimana redux bekerja.

Semoga para pembaca bisa mendapatkan benefit dari membaca artikel ini.

Sangat terbuka untuk kritik dan saran. Kalau saya salah, mohon dengan sangat untuk diingatkan. Semoga bermanfaat dan jangan lupa Clap and Share~

Let’s talk about some projects with me

Just Contact Me At:

• Email: bosnaufalemail@gmail.com
• Skype Id: bosnaufal254
• twitter: @BosNaufal
• telegram: @BosNaufal