<div id="root"></div>
const { connect } = ReactRedux;
const { Provider } = ReactRedux;
const { createStore } = Redux;
        
class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  }

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
            <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

const Concounter = connect(mapStateToProps)(Counter);

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

const App = () => (
  <Provider store={store}>
    <Concounter/>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16/umd/react.production.min.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js