fluxiny

fluxiny example

by Matt Rummler

HTML

<script src="https://krasimir.github.io/fluxiny/lib/fluxiny.min.js"></script>
<div id="counter">
  <span></span>
  <button>increase</button>
  <button>decrease</button>
</div>

CSS

#counter span {
  display: block;
  width: 120px;
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

JavaScript

// type of actions
var INCREASE = 'INCREASE';
var DECREASE = 'DECREASE';

// The store defined as a singleton
var CounterStore = {
  _data: { value: 0 },
  getValue: function () {
    return this._data.value;
  },
  update: function (action, change) {
    if (action.type === INCREASE) {
      this._data.value += 1;
    } else if (action.type === DECREASE) {
      this._data.value -= 1;
    }
    change();
  }
};

// the view accepts a store subscriber and two actions
var View = function (subscribeToStore, increase, decrease) {
  var value = null;
  var el = document.querySelector('#counter');
  var display = el.querySelector('span');
  var buttons = el.querySelectorAll('button');
  var increaseBtn = buttons[0];
  var decreaseBtn = buttons[1];
  
  var render = function () { display.innerHTML = value; }
  var updateState = function (store) { value = store.getValue(); }
  
  subscribeToStore([updateState, render]);
  
  increaseBtn.addEventListener('click', increase);
  decreaseBtn.addEventListener('click', decrease);
};

// Fluxiny API
var Flux = Fluxiny.create();
var createAction = Flux.createAction;
var createSubscriber = Flux.createSubscriber;

// creating the subscribers and the actions
var counterStoreSubscriber = createSubscriber(CounterStore);
var actions = {
  increase: createAction(INCREASE),
  decrease: createAction(DECREASE)
};


View(counterStoreSubscriber, actions.increase, actions.decrease);