const ACTION = 'ACTION';
const defaultState = {
  value: 5
};
const doAction = ()=>{
  return {
    type: ACTION
  };
};

const reducer = (state = defaultState, action) => {
  let update = Object.assign({}, state);
  switch(action.type){
    case ACTION:
      update.value = state.value + 1;
      return update;
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

class App extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e){
    this.props.doAction();
  }

  render(){
    return(
      <div id='app'>
        <button onClick={this.handleClick}>Click</button>
        <p>{this.props.value}</p>
      </div>
    );
  }
}

const Provider = ReactRedux.Provider;

const mapStateToProps = (state)=> {
  return {
    value: state.value
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    doAction: () => {
      dispatch(doAction())
    }
  };
}

const Container = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App);

class AppWrapper extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return(
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }

}

ReactDOM.render(<AppWrapper />, document.getElementById('root'));