html, 
body{
  height: 100%;
}

body{
  font: 20px sans-serif;
  background: #333;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;    
}

.redux{
  background: yellowgreen;
  text-align: center;
  padding: .1em;

  button {
    margin: .2em;
    padding: 1em;    
    font-size: 120%;
    min-width: 3em;
    cursor: pointer;
  }  
}

// Reducer
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
// Reducer

const { createStore } = Redux;
const store = createStore(counter);

// Child Component
var Counter = ({
  value,
  onIncrement,
  onDecrement
}) => (
  <div className='redux'>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>  
);
// Child Component

// View
const render = () => {
  ReactDOM.render(
    <Counter 
       value={store.getState()} 
       onIncrement={()=> store.dispatch({type: 'INCREMENT'})}
       onDecrement={()=> store.dispatch({type: 'DECREMENT'})}
    />,
    document.querySelector('body')
  );
};
// View

store.subscribe(render);
render();