JS Bin// source http://jsbin.com/cequnu

Redux 8: React counter example final

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

const Counter = ({ 
  value, 
  onIncrement,
  onDecrement
  }) => (
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>  
  <button onClick={onDecrement}>-</button>
  
);
const { createStore} = Redux;
const store = createStore(counter);

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

// Needed to show initial state 0
store.subscribe(render);
// Needed to show initial state 0
render();

Redux: React counter example step 1

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

const Counter = ({ value }) => (
  <h1>{value}</h1>
);
const { createStore} = Redux;
const store = createStore(counter);

const render = () => {
ReactDOM.render(
  <Counter value={store.getState()}/>,
  document.getElementById('root')
);
}

// Needed to show initial state 0
store.subscribe(render);
// Needed to show initial state 0
render();

document.addEventListener('click', () => {
  store.dispatch({type:'INCREMENT'});
});