app.jsx

import { render } from 'react-dom';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect, Provider } from 'react-redux';

const reducer = (state = 0, action) => {
  console.log('current state is ', state, 'and action is', action);

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

const store = createStore(reducer);

const incrementAction = () => {
  return {
    type: 'INCREASE'
  }
}

const decrementAction = () => {
  return {
    type: 'DECREASE'
  }
}


@connect((state) => {
  return {
    counter: state
  }
})
class App extends Component {
  render() {
    const { counter, dispatch } = this.props;
    return (
      <div>
        <span>{counter}</span>
        <br />
        <button onClick={() => dispatch(incrementAction())}>Increment</button>
        <button onClick={() => dispatch(decrementAction())}>Decrement</button>
      </div>
    );
  }
}




let rootElement = document.createElement('div');
document.body.appendChild(rootElement);

render (
  <Provider 
    store={store}>
    <App />
  </Provider>, rootElement
);