lifelong learner — urip iku urup, currently working on accenture.

React – konsep awal flux + redux

0
Degananda.com -

Flux adalah konsep pemrograman untuk mengolah data. Pada react hal ini sangat terkait dengan pengelolaan state pada komponen. Flux memberikan banyak manfaat untuk pengolahan data tersebut. Silahkan simak ulasan ini untuk mengetahui fungsi flux pada react.

Flux

Flux merupakan konsep pemrograman yang mengatur aliran atau flow dari data. Pada konsep flux data dibuat menjadi uni-directional. Artinnya , seluruh data akan masuk ke dalam satu gerbang yang kemudian baru di distribusikan pada komponen-komponen didalamnya. Ilustrasinnya seperti saat kita masuk ke kelas yang memiliki satu pintu, seluruh siswa harus masuk ke dalam pintu tersebut yang secara otomatis “pintu” itu akan mengenali seluruh siswa yang masuk dan pada ahirnya mereka menuju ke bangku mereka masing-masing.

Mengapa menggunakan Flux ?

Konsep flux ini sangat berguna saat aplikasi yang kita bangun telah berkambang menjadi besar. Bayangkan jika (pada react) jumlah komponen sudah banyak dan kita harus memanage data state pada masing-masing komponen. Hal itu akan sangat menyusahkan proses pengelolaannya. Salah satu fungsi dari flux adalah menjawab permasalahan tersebut dengan cara mensentralkan data state dengan satu pintu (sentralisasi) meski pada ahirnya data tersebut akan di distribusikan ke komponen – komponen terkait.

Flux tidak ada hadir dalam react melainkan juga pada framework – framwork lain karena flux sejatinnya bukanlah khusus untuk framework tertentu. Contohnya terdapat “vuex” yakni framework yang menggunakan konsep flux untuk vuejs.

flux adalah konsep untuk pengelolaan state secara tersentral (satu pintu) guna membantu programmer mengelola state seiring dengan berkembangnya aplikasi.

sehingga tidak ada alasan untuk tidak menggunakan konsep flux ini karena setiap aplikasi tentunya sangat diharapkan untuk berkembang. Lebih baik mencegah terjadinnya kondisi dimana state terlalu banyak dan kita susah untuk mengelolannya. Maka menggunakan konsep flux sejak awal merupakan pilihan yang tepat. Pada react untuk mengimplementasikan flux terdapat library yang bernama redux.

Keuntungan menggunakan redux adalah

  1. single directional flow sehingga mudah untuk difahami
  2. memudahkan mengelola aplikasi terutama pada bagian data/state

Elemen pada flux

flux sebagai library yang membantu sentralisasi data terpusat memiliki beberapa elemen penting yang harus ada agar mekanisme tersebut dapat dijalankan yakni

  1. Action , yaitu suatu object yang akan mentrigger aliran data. Actions akan menentukan data yang akan dikirimkan ke store melalui dispatcher. lebih detailnya, action adalah suatu javascript object yang menggunakan property berupa “type”  yang berfungsi untuk memberitahukan kepada dispatcher mengenai data yang harus disimpan pada store. Action ini akan mentrigger perubahan pada suatu komponen namun tidak dapat menspesifikan pada bagian mana yang harus berubah. Reducer merupakan modul yang dapat melakukan hal tersebut.
  2. Dispatcher, yaitu object yang berfungsi layaknya suatu router. Data – data yang tersentral tersebut tentunnya akan dibagikan ke komponen-komponen lain. Disinilah peran dari suatu dispatcher.
  3. Store, tempat untuk menyimpan state dan data-data logical lainnya. State pada store dapat diupdate secara parsial ketika memang dibutuhkan
  4. View, object yang menerima data dari store dan melakukan proses rendering

perhatikan gambar dibawah ini untuk mengetahui bagaimana mekanisme konsep uni-directional yang ditawarkan oleh flux.

Dari ilustrasi diatas yang menjelaskan mekanisme dari flux yang merupakan aliran data searah (single directional). Action yang dapat berupa suatu object akan dikumpulkan dalam sebuah library kemudian tentukan tipenya lalu akan mentrigger “dispatcher” yang berguna untuk mentransfer data tersebut ke “store” tentunnya sesuai dengan kategorinnya. Setelah diterima oleh store maka data akan diproses di view untuk dilakukan render. Setiap action yang masuk akan kembali melalui proses yang sama sehingga store ini dapat melakukan “auto update”. Untuk lebih jelasnya kita akan mencoba mengimplementasikan flux ini dengan menggunakan redux pada react.

Implementasi flux dengan redux pada react.

Silahkan simak ulasan berikanya mengenai react-redux untuk proses coding / implementasi.