index.html
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<h1 class='js-target-count'></h1>
<button data-action='{"type":"increment"}'>+</button>
<button data-action='{"type":"decrement"}'>-</button>
<script>
var state = {
count: 0
};
function reducer(state, action) {
switch (action.type) {
case 'increment': state.count++; break;
case 'decrement': state.count--; break;
}
return state;
}
$('[data-action]').click(function(e) {
e.preventDefault();
render(state = reducer(state, $(this).data('action')));
});
render(state);
function render(state) {
$('.js-target-count').text(state.count);
}
</script>