Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Redux with vanilla JS">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
</head>
<body>
  <div id="counter">
    <button id="inc">+</button>
    <span id="text"></span>
    <button id="dec">-</button>
  </div>
</body>
</html>
 
console.clear();
const d = document;
const { createStore } = Redux;
// reducer 
function counter(state=0, action) {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
//actions
const increment = () => {
  return {
    type: 'INCREMENT'
  };
};
const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};
//create store
const store = createStore(counter);
class Counter {
  constructor(options) {
    this.$el = options.el;
    this.store = options.store;
    store.subscribe(this.update.bind(this));
    this.$el.querySelector('#inc')
      .addEventListener('click', this.inc.bind(this));
    this.$el.querySelector('#dec')
      .addEventListener('click', this.dec.bind(this));
  }
  inc() {
    this.store.dispatch(increment())
  }
  dec() {
    this.store.dispatch(decrement())
  }
  update() { 
    console.log(store.getState());
    this.$el
      .querySelector('#text')
      .innerHTML = store.getState();
  }
  render() {
    this.update();
  }
}
d.addEventListener("DOMContentLoaded", () => {
  const counter = new Counter({
    el: d.getElementById('counter'),
    store
  });
  counter.render();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x