JS Bin

// 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);

​