fluxiny

fluxiny example

by krasimir

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;
}

Babel + JSX

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

// The store defined as a singleton
const 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
const View = function (subscribeToStore, increase, decrease) {
  var value = null;
  var el = document.querySelector('#counter');
  var display = el.querySelector('span');
  var [ increaseBtn, decreaseBtn ] = Array.from(el.querySelectorAll('button'));
  
  var render = () => display.innerHTML = value;
  var updateState = (store) => value = store.getValue();
  
  subscribeToStore([updateState, render]);
  
  increaseBtn.addEventListener('click', increase);
  decreaseBtn.addEventListener('click', decrease);
};

// Fluxiny API
const { createAction, createSubscriber } = Fluxiny.create();

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


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