<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.