index.html

<h1 id="title">Hello</h1>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="addTen">+10</button>


<script>
  class createStore {
    constructor(initialState) {
      this.state = initialState
      this.fn = null
    }
    
    dispatch(action) {
      // REDUCER
      switch(action.type) {
        case 'INCREMENT': {
          const oldCounter = this.state.counter
          const newState = {...this.state, counter: oldCounter + action.amount}
          this.state = newState
          break
        }
        case 'DECREMENT': {
          const oldCounter = this.state.counter
          const newState = {...this.state, counter: oldCounter - 1}
          this.state = newState
          break
        }
        default:
          console.log('Unknown action. Not changing state')
      }
      console.log(`Counter: ${store.state.counter}`)
      this.fn()
    }

    subscribe(fn) {
      this.fn = fn
    }

    getState() {
      return this.state
    }
  }

  const store = new createStore({counter: 0})


  store.subscribe(() => document.getElementById('title').innerText = `Counter: ${store.getState().counter}`)

  function incrementer(amount) {
    return {type: 'INCREMENT', amount: amount}
  }
  function decrementer(amount) {
    return {type: 'DECREMENT', amount: amount}
  }

  document.getElementById('add').addEventListener('click', () => {
    store.dispatch(incrementer(1))
  })
  document.getElementById('subtract').addEventListener('click', () => {
    store.dispatch(decrementer(1))
  })
  document.getElementById('addTen').addEventListener('click', () => {
    store.dispatch(incrementer(10))
  })


</script>