Reflux , a Flux Javascript Library

Apa itu flux? Flux adalah suatu pattern yang digunakan oleh facebook untuk membangun sebuah client-side web application. Flux merupakan unidirectional data flow ( data flow searah ) pattern . Lebih jelas nya bisa di lihat disini Berikut ini ilustrasi dari flux pattern

Lalu apa itu Reflux ?

Reflux adalah suatu javascript library yang terinspirasi dari Flux Architecture. Pada dasarnya reflux memangkas flow yang ada dari flux pattern. Reflux terdiri dari dua komponen besar yaitu action dan store dimana action di panggil dari view , berikut ilustrasi gambar data flow reflux :

Dari gambar di atas , kita lihat komponen apa yang di hilangkan dari flux pattern, hal ini lebih mempermudah kita dalam mengimplementasikannya .

Berikut ini contoh pengaplikasian reflux pada suatu web , disini saya menggunakan react sebagai View Component.

Pertama kita membuat sebuah suatu class action sebagai berikut :

import Reflux from 'reflux';

const LovActions = Reflux.createActions([
     {'loadCity': {children: ['completed', 'failed']}},
     {'loadDistrict': {children: ['completed', 'failed']}}
]);

LovActions.loadCity.listenAndPromise(function(){
    return $.ajax({
        type: "GET",
        url: "https://sayurbox.firebaseio.com/areas/DKI%20Jakarta.json"
    });

});

Lalu store sebagai tempat untuk memaintain state dan application logic

import Reflux from 'reflux';
import LovActions from '../actions/lovActions.jsx';

const LovStore = Reflux.createStore({
    listenables: LovActions,

    init() {

    },

    onLoadCity() {
        this.trigger({
            city : {
                loading : true
            }
        });
    },

    onLoadCityCompleted(data) {
        this.trigger({
            city : {
                data   : data,
                loading : true
            }
        });
    },

    onLoadCityFailed(error){
        this.trigger({
            city : {
            error : error,
            loading: false,
            hasError : true
            }
        });
    },

Nah setelah action dan store kita buat , kita panggil action dari view component , contoh (dengan menggunakan react ):

componentDidMount(){
  this.unsubscribe = LovStore.listen(this.onCityChange.bind(this));
  console.log("componentDidMount {}");
  LovActions.loadCity();
 }
onCityChange(data){
  if(typeof data.city != 'undefined' && !data.city.loading){
   console.log("onCityChange if {}",data.city.data);
   this.setState({
    city:data.city.data
   });
  }else if(typeof data.district != 'undefined' && !data.district.loading){
   console.log("onCityChange if {}",data.district.data);
   this.setState({
    district:data.district.data
   });
  }
 }

Di method componentDidMount() , kita daftarin method yang bakal me-listen jika ada sesuatu yang dilempar dari LovStore .

Lalu Bagaimanakah flow Reflux berjalan ? Di componentDidMount() kita lihat syntaks LovActions.loadCity() , artinya , dari React Component ini , dia memanggil action LovAction dan menjalankan loadCity(). Di action, loadCity memanggil API dengan menggunakan jQuery ajax.

Store yang me-listen LovAction (disini LovStore) akan menjalankan method yg sesuai, jika complete, store akan men trigger data yang akan dilempar ke semua view yang me-listen store tersebut ( bisa dilihat di componentDidMount() bahwa komponen ini me-listen LovStore dan method tersebut adalah onCityChange ) , setelah store men-trigger , make onCityChange akan jalan. Demikian tutorial singkat mengenai reflux dari saya , have a nice day :D
Untuk code lebih lengkap bisa dilihat di repo taufik

Sumber

https://github.com/reflux/refluxjs
http://blog.mojotech.com/react-and-reflux-in-5-minutes/
http://blog.andrewray.me/flux-for-stupid-people/