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);
}
<span class='js-target-count'></span>
<button data-action='{"type":"increment"}'>+</button>
<button data-action='{"type":"decrement"}'>-</button>
body {
background: #fff;
}
body, button {
font: 40px/30px sans-serif;
}
button {
background: #222;
color: #fff;
padding: 5px;
border: 0;
border-radius: 5px;
}
External resources loaded into this fiddle: