Redux Counter with buttons INC and DEC

by Anton Kolesnikov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.4.0/redux.js "></script>
<div id="counter">
</div>
<button id="inc">
  +
</button>
<button id="dec">
  -
</button>

Babel + JSX

const { createStore } = Redux;

function counter(state=0, action) {
	switch (action.type) {
  case 'INCREMENT':
  	return state + 1
  case 'DECREMENT':
   return state - 1
  default:
 	 return state
  }
}

const store = createStore(counter);

// Показываем начальное состояние state
document.getElementById('counter').innerHTML = store.getState();

// Подписываемся на обновление state
store.subscribe(() => {
	console.log(store.getState());
  document.getElementById('counter').innerHTML = store.getState();
});

/*
	Вешаем обработчик на кнопки, который вызывает dispatch
  Единственный интересный момент, это использование функции-обертки bing
  и передача в замыкании action в качестве параметра
*/
var inc = document.getElementById('inc');
inc.addEventListener('click', store.dispatch.bind(null, ({ type: 'INCREMENT' })), false);

var dec = document.getElementById('dec');
dec.addEventListener('click', store.dispatch.bind(null, ({ type: 'DECREMENT' })), false);