Mengenal Flux, Arsitektur Untuk React

Flux adalah arsitektur yang buat oleh Facebook untuk membangun aplikasi web client-side. Flux merupakan pelengkap library React yang berfungsi untuk mengatur aliran data dan logika. Sebagai mana yang kita ketahui bahwa React hanya perperan sebagai View, untuk itu kita membutuhkan Flux sebagai Model-Controller nya.

Flux memiliki 3 bagian utama, yakni: dispatcher, store, dan view (React Components). Dispatcher berperan sebagai Controller dan Store berperan sebagai Model.

Struktur dan Flow Data Flux

Action

Action adalah aksi yang berikan oleh user melalui event pada View seperti addToCart, removeCart, updateCart dll. Action tersebut nantinya akan dimasukan ke dalam Dispatcher (dispatch).

Dispatcher

Dispatcher adalah pusat yang mengatur semua semua aliran data dalam arsitektur Flux. Walaupun bertindak sebagai Controller, dispatcher memiliki cara kerja yang berbeda. Dispatcher tidak berisi banyak method dan logika, dia hanya sebagai penghubung antara Action dan Store.

Dispatcher adalah class yang berasal Flux itu sendiri. Dispatcher Memiliki 2 method utama yakni dispatch dan register. Dispatch berperan sebagai alat untuk memasukan Action yang diberikan oleh View. Sedangkan Register berperan sebagai alat untuk mendaftarkan Action pada Store.

Store

Walaupun Store berperan sebagai Model, namun Store bertidak untuk mengatur state (keadaan) untuk banyak objek. Di dalam Store lah terdapat banyak logika untuk mengeksekusi Action yang diberikan oleh View. Hasil eksekusi akan dikembalikan lagi pada View.

View

Semua komponen React yang berkaitan dengan HTML/DOM yang memberikan Action dan menerima return dari Store.