increment and decrement in redux

Redux example taken from the official repository.

by John Kiran

HTML

<!-- UI -->
<div id="container"></div>

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>

<!-- ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

<!-- ReactRedux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>

Babel + JSX

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

// store
var store = Redux.createStore(counter);

// component
var App = React.createClass({
	increment: function() {
    	store.dispatch({ type: 'INCREMENT' });
    },
    decrement: function() {
    	store.dispatch({ type: 'DECREMENT' });
    },
	render: function() {
    	return (
        	<div>
            	<div>{this.props.count}</div>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
            </div>
        );
    }
});

// container component
var Wrapper = ReactRedux.connect(
	function mapStateToProps(state) {
    	return {
        	count: state
        };
    }
)(App);

var Provider = ReactRedux.Provider;
ReactDOM.render(
	<Provider store={store}>
	    <Wrapper />
	</Provider>,
    document.getElementById('container')
);