JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/f/delorean/master/dist/delorean.min.js"></script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="container"></div>

<script id='tpl' type='text/ractive'>
     <div>
            <div>Total: {{stores.increment.total}}</div>
            <button on-click="increase">Increase</button>
        </div>
</script>

JavaScript

var Flux = DeLorean.Flux;

// Store
var IncrementStore = Flux.createStore({
    
    actions: {
        'increase': 'increaseTotal'
    },

    total: 0,
    increaseTotal: function () {
        this.total++;
        this.emit('change');
    },
    getState: function () {
        return {
            total: this.total
        };
    }
});

var incrementStore = IncrementStore;

// Dispatcher
var IncrementDispatcher = Flux.createDispatcher({
  increase: function () {
      this.dispatch('increase');
  },
  getStores: function () {
      return {
          increment: incrementStore
      };
  }
});

// Action Generator
var IncrementActions = {
    increase: function () {
        IncrementDispatcher.increase();
    }
};

ractive = new Ractive({
    el: 'container',
    template: '#tpl',
    magic: true,        // by setting magic to true store changes are observed by ractive
    data: {
        stores: {
            increment: incrementStore
        }
    }
});

ractive.on('increase', function (event) {
    IncrementActions.increase();
})