import React from 'react'
import { connect } from 'react-redux'


// --- Reducer.js
const defaultReduxState = {
  incFactor: 1,
  value: 0,
};

const simpleReducer = (state = defaultReduxState , action) => {
 switch (action.type) {
  case 'INCREMENT': return {...state, value: state.value + state.incFactor };
  case 'DECREMENT': return {...state, value: state.value - state.incFactor };
  default: return state;
 }
}
// --- end of Reducer.js


// --- Action.js
const incrementAction = () => {
  return {
    type: 'INCREMENT'
  };
}

const decrementAction = () => {
  return {
    type: 'DECREMENT'
  };
}
// --- end of Action.js


// --- Component.js
class MyComponent extends React.Component {
  handleClick = (mode) => {
    if (mode === 'inc') {
      this.props.doIncrement();
    } else if (mode === 'dec') {
      this.props.doDecrement();
    }
  }

  render() {
    <div>
      {this.props.counter}
      <button onClick={this.handleClick('inc')}>Increment</button>
      <button onClick={this.handleClick('dec')}>Decrement</button>
    </div>
  }
}

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

const mapDispatchToProps = dispatch => {
  return {
    doIncrement: () => dispatch(incrementAction()),
    doDecrement: () => dispatch(decrementAction())
  };
}

export connect(mapStateToProps, mapDispatchToProps)(MyComponent)
// --- end of Component.js