RxJS (Redux Pattern)

Redux pattern using RxJS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<button type="button" class="btn" id="inc">+</button>
<h1 id="output"></h1>
<button type="button" class="btn" id="dec">-</button>

CSS

#letters {
  position: relative;
}

#letters span {
  position: absolute;
  font-size: 1.5em;
}

JavaScript

const Observable = Rx.Observable;
const Subject = Rx.Subject;

const actions$ = new Subject();

const initialState = {
  num: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        num: state.num + action.payload
      };
    case 'DECREMENT':
      return {
        num: state.num - action.payload
      };
    default:
      return state;
  }
}

const store$ = actions$
  .startWith(initialState)
  .scan(reducer);

const increment = num => {
  actions$.next({
    type: 'INCREMENT',
    payload: num
  });
};

const decrement = num => {
  actions$.next({
    type: 'DECREMENT',
    payload: num
  });
};

const render = (el, state) => {
  el.innerHTML = `<span>${state.num}</span>`;
};

const incBtn = document.getElementById('inc');
const decBtn = document.getElementById('dec');
const output = document.getElementById('output');

incBtn.addEventListener('click', e => increment(1));
decBtn.addEventListener('click', e => decrement(1));

store$.subscribe(state => render(output, state));