Pada beberapa project React yang saya pernah kerjakan, saya mendapat pelajaran yaitu jika aplikasi sudah sangat kompleks dan memiliki banyak Component, terlebih Component-Component tersebut saling memiliki keterikatan dalam artian memiliki banyak state yang harus di share ke Component lain hal tersebut jika dilakukan dengan menggunakan melempar props dari parent ke child akan sangat sulit dilakukan, karena harus secara hierarchy untuk merubah sebuah data atau state component tersebut. Untuk mempermudah pekerjaan dibutuhkan sebuah state management.
Konsep Unidirectional Data Flow: Konsep modern dalam membuat user interface
Pada React yang menggunakan konsep data flow yang satu arah (unidirectional data flow), kita sebagai Front-end Engineer dituntut harus teratur untuk merubah suatu state. Tidak seperti yang kita kenal dulu saat menggunakan Pattern MVC, data atau model dengan mudah dapat diubah melalui sebuah controller atau model. Jika di implementasikan pendekatan tersebut pada pembuatan User Interface, data atau state sangat sulit di maintain dan tidak predictable kapan terjadi perubahan pada state tersebut.
Flux Pattern:
Mengutip dari official website-nya, kurang lebih seperti in:
"Flux merupakan sebuah pattern atau arsitektur yang digunakan Facebook untuk membuat aplikasi Web. Reflux menyempurnakan React dalam membuat Component View yang menggunakan Data flow satu arah".
Berikut gambar dibawah ini yang menjelaskan bagaimana arsitektur atau pattern Flux:
Jadi berdasarkan gambar diatas, sederhananya terdapat 4 Layer dalam aplikasi untuk merubah suatu view, yaitu Flux Memiliki:
- Action: Action simpelnya adalah sebuah method untuk mengeksekusi data pada view.
- Dispatcher: Dispatcher berfungsi sebagai jembatan antara Action dan Store, Dispatcher mengirim data yang telah di proses sebelumnya pada action untuk diubah statenya yang ada pada store
- Store: Stores menyimpan semua state yang ada pada aplikasi.
- View: Representasi user interface aplikasi. Pada Flux, view bisa mengeksekusi sebuah Action.
Setelah mengenal Flux, Mencoba Redux.
Sebagai orang awam yang saat itu baru mempelajari React 1 bulan, saya sangat asing terhadap istilah-istilah tersebut. Terlebih otak saya masih diracuni oleh konsep MVC. Jadi sangat kesulitan untuk "Hijrah" pada konsep yang baru. Namun hal ini harus dilakukan karena Component aplikasi saya sudah banyak dan memiliki state yang harus di maintaince, terlebih deadline pekerjaan yang terus menekan. Hal tersebut mengharuskan untuk mempersingkat waktu development (dengan kata lain harus memggunakan state management) agar semua Team Front-End Happy. Dan hati ini akhirnya memilih Redux :D
Redux is "Flux - like".
Mengutip dari artikel Michael Mangilardi, "Redux adalah container state yang predictable untuk aplikasi Javascript dan tidak memiliki terikatan yang erat pada React (Agnostic)".
Menurut saya, Redux adalah tools dalam membungkus aplikasi dengan konsep Flux dengan layer yang lebih simple, dibawah ini merupakan arsitektur dari Redux:
Semua layer yang ada pada Flux, tidak jauh berbeda namun konsep pada Redux berbeda. Terbukti dengan dihilangkannya layer Dispatcher dengan digantikan oleh Reducer. Secara singkat berikut pengertian layer tersebut:
- Action: List suatu aksi yang di eksekusi dari view untuk merubah store, action dapat mengirim data ke Reducer.
- Reducer: Hasil eksekusi action, dan mengembalikan data untuk merubah state yang ada didalam Store.
- Store: Kumpulan state yang disimpan didalam sebuah middleware Redux.
- View: Tampilan user interface aplikasi, jika ada perubahan pada store, View akan di render ulang.
Dalam menggunakan Redux, saya dan team sangat dimudahkan dalam membuat user interface menggunakan React, karena jika suatu state berubah tidak secara hierarchy harus memberi tahu perubahan tersebut.
Analogi sederhananya seperti ini:
Setelah mengerti dan mempelajari Redux, saya harus melakukan sharing terhadap team Front-end dan setelah proses sharing dan pairing beberapa hari akhirnya team berhasil catch up dan satu pengertian dalam membuat sebuah Component React. Dan dengan menggunakan Redux terbukti membuat proses development semakin cepat dan kini semua team Happy :D
Reference:
https://facebook.github.io/flux/
https://css-tricks.com/learning-react-redux/
https://brigade.engineering/what-is-the-flux-application-architecture-b57ebca85b9e
https://medium.com/coding-artist/practical-redux-chapter-1-core-concepts-f5a53f74505c
No comments:
Post a Comment