// Full example using es6 and react-redux

import React, {PropTypes} from 'react';
import {bindActionCreators, combineReducers, createStore} from 'redux';
import {Provider, connect} from 'react-redux';

// State reducer
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + action.val;
  case 'DECREMENT':
    return state - action.val;
  default:
    return state;
  }
}

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

function increment(val) {
  return {type: 'INCREMENT', val}
}

function decrement(val) {
  return {type: 'DECREMENT', val}
}

@connect(s => {counter: s.counter}, d => bindActionCreators({increment, decrement}, d))
class Component extends React.Component {
  static propTypes = {
    counter: PropTypes.number,
    increment: PropTypes.func,
    decrement: PropTypes.func
  }
  
  render() {
    const {counter, increment, decrement} = this.props;
    
    return (
      <div>
        <input type='number' ref={c => this._step = c}/>
        <button type='button' onClick={() => increment(this._step.value)}>increment</button>
        <p>{counter}</p>
        <button type='button' onClick={() => decrement(this._step.value)}>decrement</button>
      </div>
    );
  }
}


React.render(
  <Provider store={store}>
    {() => <Component/>}
  </Provider>,
  document.getElementById('app')
);