Mengapa Harus Menggunakan Redux untuk State Management di React?

Dulu, pas awal-awal ngoding React, saya pikir setState itu udah cukup buat ngatur state aplikasi. Namun ternyata pas ngerjain aplikasi yang lumayan kompleks, setState aja suka bikin pusing, apalagi kalau state-nya harus disinkronkan di banyak tempat. Mau nggak mau, harus cari cara lain yang lebih efektif. Yaitu, menggunakan Redux!

Sebagai orang yang juga baru kenal Redux, saya sempet kaget sih ngeliat 'hal-hal' baru di kode, kayak action, reducer, store, bahkan ada saga juga buat handle side effect (ini diajarin senior di kantor). Awalnya sih bikin pusing, tapi setelah ngerti cara kerjanya, ternyata Redux itu elegan banget buat ngatur state.

Kenapa Redux?

Oke, bayangin gini deh. Kalian lagi bikin aplikasi to-do list. Simpel kan? Tapi, gimana kalau to-do list-nya bisa di-filter berdasarkan status (selesai/belum), terus bisa juga diurutkan berdasarkan prioritas? Nah, kalau cuma ngandelin setState, bakal ribet tuh ngatur state-nya di berbagai komponen.

Redux menawarkan solusi dengan konsep single source of truth. Artinya, semua state aplikasi disimpan di satu tempat terpusat yang namanya store. Komponen-komponen tinggal 'berlangganan' ke state yang mereka butuhkan, dan Redux yang akan 'menyiarkan' perubahan state ke komponen-komponen tersebut. Jadi, nggak perlu lagi tuh repot-repot passing props antar komponen.

Ngomong-ngomong soal Redux, ternyata library ini terinspirasi dari konsep arsitektur Flux yang dipake sama tim Facebook buat ngembangin aplikasi mereka. Nah, Redux ini ngambil konsep reducer dari Flux, yang pada dasarnya adalah fungsi murni untuk mengubah state berdasarkan action. Bedanya, Redux lebih simpel dan mudah dipahami, makanya jadi populer di kalangan developer React.

Action, Reducer, dan Store:

Nah, sekarang mari kita bahas trio komponen utama Redux:

• Action: Ibarat kurir, action bertugas mengirimkan informasi tentang perubahan state yang ingin dilakukan. Misalnya, action ADD_TODO akan memberi tahu Redux untuk menambahkan to-do baru ke dalam state.
• Reducer: Ini dia otaknya Redux! Reducer menerima action dan state saat ini, lalu mengembalikan state baru berdasarkan action yang diterima. Jadi, reducer ini fungsinya murni untuk mengubah state, tanpa efek samping.
• Store: Tempat penyimpanan state aplikasi. Store menerima state awal, lalu setiap ada action yang dikirim, store akan memanggil reducer untuk mendapatkan state baru, dan akhirnya 'menyiarkan' perubahan state ke komponen-komponen yang berlangganan.

Sedikit Tentang Redux Saga untuk Side Effect

Nah, kalau kalian perlu handle side effect, kayak fetch data dari API, Redux Saga bisa jadi pilihan. Saga ini ibarat util pendukungnya Redux yang bertugas menangani tugas-tugas async dan side effect, sehingga reducer tetap 'bersih' dan fokus pada tugas utamanya, yaitu mengubah state. Pilihan lain nya kita juga bisa menggunakan Redux Thunk sebagai alternatif yang cukup straightforward menurut saya.

Setelah mencoba dan mempraktekkan, ternyata Redux ini powerful banget buat ngatur state di aplikasi React, terutama untuk aplikasi yang kompleks. Memang sih, ada learning curve-nya, tapi setelah terbiasa, pattern-nya jadi mudah diikuti, dan ngebantu banget buat sharing state di berbagai tempat. Gimana dengan teman-teman yang udah pernah nyobain? Sharing yuk di kolom komentar!