<button id="dispatch" type="button">Dispatch actions</button>
<div id="container">
  <ul></ul>
</div>
import { createStore } from 'https://jspm.dev/redux@4.0.5';

function reducer(state, action) {
  switch(action.type) {
    case 'add':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'subtract':
      return {
        ...state,
        count: state.count - 1,
      };
    case 'toggle_flag':
      return {
        ...state,
        flag: !state.flag,
      };
    default:
      return state;
  }
}

const state = {
  count: 40,
  flag: false
};

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const store = createStore(reducer, state);
store.subscribe(function() {
  const list = document.querySelector('#container > ul');
  const item = document.createElement('li');
  
  // Don't do this at home
  item.innerHTML = `
    <pre>${JSON.stringify(store.getState())}</pre>
   `;
  
  list.appendChild(item);
});

async function dispatch_actions() {
  store.dispatch({ type: 'add' });
  await delay(1500);

  store.dispatch({ type: 'add' });
  await delay(1500);

  store.dispatch({ type: 'subtract' });
  await delay(1700);

  store.dispatch({ type: 'add' });
  await delay(1400);

  store.dispatch({ type: 'subtract' });
  await delay(800);

  store.dispatch({ type: 'add' });
  await delay(100);

  store.dispatch({ type: 'toggle_flag' });
}

function handler(ev) {
  const container = document.getElementById('container');
  container.removeChild(container.firstChild);
  
  const list = document.createElement('ul');
  container.appendChild(list);
  dispatch_actions();
}

document.getElementById('dispatch')
  .addEventListener('click', handler);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.