import React, { PropTypes, Component } from 'react'
import { connect } from 'react-redux'

import { incrementCounter, decrementCounter, incrementCounterAsync } from '../../actions/counter'

import {} from './Counter.scss'

class Counter extends Component {
  render () {
    return (
      <div className="counter">
        <h2 className="counter__number">{this.props.counter}</h2>
        <button onClick={this.props.onIncrementCounter}
          className="counter__button">
          +
        </button>

        <button onClick={this.props.onDecrementCounter}
          className="counter__button">
          -
        </button>

        <button onClick={this.props.onIncrementCounterAsync}
          className="counter__button counter__button--async">
          async
        </button>
      </div>
    )
  }
}

Counter.propTypes = {
  counter: PropTypes.number.isRequired,
  onIncrementCounter: PropTypes.func.isRequired,
  onDecrementCounter: PropTypes.func.isRequired,
  onIncrementCounterAsync: PropTypes.func.isRequired
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    onIncrementCounter () {
      dispatch(incrementCounter())
    },
    onDecrementCounter () {
      dispatch(decrementCounter())
    },
    onIncrementCounterAsync () {
      dispatch(incrementCounterAsync())
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

import React, { PropTypes, Component } from 'react'
import { connect } from 'react-redux'

import { incrementCounter, decrementCounter, incrementCounterAsync } from '../../actions/counter'

import {} from './Counter.scss'

class Counter extends Component {
  constructor () {
    super()
    this.onIncrementCounter = this.onIncrementCounter.bind(this)
    this.onDecrementCounter = this.onDecrementCounter.bind(this)
    this.onIncrementCounterAsync = this.onIncrementCounterAsync.bind(this)
  }

  onIncrementCounter () {
    this.props.dispatch(incrementCounter())
  }

  onDecrementCounter () {
    this.props.dispatch(decrementCounter())
  }

  onIncrementCounterAsync () {
    this.props.dispatch(incrementCounterAsync())
  }

  render () {
    return (
      <div className="counter">
        <h2 className="counter__number">{this.props.counter}</h2>
        <button onClick={this.onIncrementCounter}
          className="counter__button">
          +
        </button>

        <button onClick={this.onDecrementCounter}
          className="counter__button">
          -
        </button>

        <button onClick={this.onIncrementCounterAsync}
          className="counter__button counter__button--async">
          async
        </button>
      </div>
    )
  }
}

Counter.propTypes = {
  counter: PropTypes.number.isRequired,
  dispatch: PropTypes.func.isRequired
}

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

export default connect(mapStateToProps)(Counter)

Remove the use of mapDispatchToProps
Remove the use of mapDispatchToProps

