Terakhir diperbaharui: Dec 23, 2020
State Management Library (Redux)
State management library adalah library yang digunakan untuk mengelola state pada suatu aplikasi JavaScript.
Beberapa diantaranya:
Setiap library memiliki aturan main atau pola masing-masing dalam mengelola state.
Sehingga perlu untuk mempelajari aturan main dari library tersebut sebelum menggunakannya.
Pada bagian ini kita akan membahas salah satu state management library yang popular digunakan pada React yaitu Redux.
Redux adalah state container untuk aplikasi JavaScript.
Meskipun pada umumnya Redux digunakan bersama dengan React, tapi pada dasarnya Redux juga bisa digunakan untuk framework JavaScript yang lain.
Mengapa Redux?
Mengatur hubungan antara state dengan component pada React dapat dilakukan dengan hanya menggunakan state dan props. Tetapi pada aplikasi yang memilliki banyak sekali component mengelola state bisa menjadi sedikit rumit.
Sebuah state bisa digunakan oleh banyak sekali component, seringkali state harus dipindah ke parent component (lifting up) agar state tersebut dapat digunakan oleh component lain.
Ketika menggunakan React dengan Redux kita tidak perlu lagi memindahkan state dari satu component ke component lain, karena Redux mengubah state menjadi global state dan menempatkannya pada suatu tempat bernama store.
Setiap component dapat menggunakan state yang ada di store secara langsung.
Semua modifikasi state juga dilakukan melalui Redux, store pada Redux menjadi satu-satunya tempat untuk mengelola state(single source of truth).
Aplikasi menjadi lebih konsisten dan mudah untuk ditest.
Haruskah menggunakan redux?
Jawabannya tidak harus, meskipun pengelolaan state dilakukan di satu tempat bukan berarti mengelola state menjadi lebih mudah.
Redux sendiri menggunakan pattern yang kompleks dan butuh waktu untuk memahami dan menguasainya.
Mengubah state menggunakan Redux harus melewati beberapa proses, hal ini berakibat tingkat kerumitan dari aplikasi bisa bertambah.
Lalu kapan harus menggunakan redux?
Sesuai rekomendasi dari Redux, gunakan Redux jika:
- Banyak data yang berubah dari waktu ke waktu
- Pengelolaan state harus dilakukan di satu tempat (Single source of truth)
- Mengelola state di top-level component sudah tidak lagi relevan
Intinya jika tanpa Redux tidak ada masalah, maka tidak perlu gunakan Redux
Konsep Dasar
Istilah
Paling tidak ada 4 istilah yang digunakan dalam Redux yang wajib untuk diketahui.
Actions
Sebuah JavaScript Object mewakili apa yang terjadi di dalam aplikasi.
Reducers
Function yang menerima object state dan object action, bertugas menentukan bagaimana suatu state diubah. Output reducer adalah state baru.
Syntax: (state, action) => newState
Store
Tempat dimana global state disimpan.
Dispatch
Satu-satunya cara untuk mengubah state di dalam store adalah dengan memanggil method bernama dispatch yang berisi object action, kemudian Redux akan mengeksekusi reducer yang sesuai.
Selector
Function yang digunakan untuk mendapatkan data dari state yang ada di dalam store.
3 Konsep Dasar
Single Source of Truth
Redux menggunakan store sebagai single source of truth, dimana semua global state disimpan dalam bentuk object di dalam store.
State is Read Only
Untuk menghindari data diubah tanpa sengaja atau terhapus, state hanya bisa diubah dengan cara dispatch suatu action.
Changes are Made with Pure Reducer Function
State diubah menggunakan pure function (Reducer), yaitu function menerima state sebelumnya dan sebuah action, kemudian menghasilkan state baru tanpa menghapus state sebelumnya.
Data Flow
Berikut adalah alur data atau data flow sederhana dari contoh aplikasi yang menggunakan Redux.
Contoh alur data ini diambil dari halaman official dokumentasi redux.
Penjelasan:
Ketika button Deposit $10 diklik, sebuah click event bernama deposit akan ditangkap oleh event handler.
Event handler memanggil function dispatch dan meneruskan sebuah action dengan type: deposit dan payload: 10. Payload adalah value yang ada di dalam action.
Kemudian redux akan mengeksekusi function reducer yang sesuai dengan action yang diteruskan.
Reducer akan mengubah state dari $0 ke $10 untuk kemudian ditampilkan di sisi UI.
Pada halaman selanjutnya kita akan tambahkan Redux pada aplikasi DinoTes.