Redux: React Counter Example

redux.js

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


const Counter = ({onIncrement, onDecrement, value}) => (
  <div>
  <h1>{value }</h1>
  <button onClick={onIncrement}> Increment</button>
  <button onClick={onDecrement}>decrement</button>
  </div>
)

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')
    );
};

store.subscribe(render);

render();

/#2/
'use strict';

var counter = function counter(state, action) {
  if (state === undefined) state = 0;

  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

var Counter = function Counter(_ref) {
  var onIncrement = _ref.onIncrement;
  var onDecrement = _ref.onDecrement;
  var value = _ref.value;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      value
    ),
    React.createElement(
      'button',
      { onClick: onIncrement },
      ' Increment'
    ),
    React.createElement(
      'button',
      { onClick: onDecrement },
      'decrement'
    )
  );
};

var _Redux = Redux;
var createStore = _Redux.createStore;

var store = createStore(counter);

var render = function render() {
  ReactDOM.render(React.createElement(Counter, { value: store.getState(),
    onIncrement: function () {
      store.dispatch({
        type: 'INCREMENT'
      });
    },
    onDecrement: function () {
      store.dispatch({
        type: 'DECREMENT'
      });
    }
  }), document.getElementById('root'));
};

store.subscribe(render);

render();