rsnext/examples/with-redux/components/counter.js

44 lines
1 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { incrementCount, decrementCount, resetCount } from '../store'
class Counter extends Component {
increment = () => {
const { incrementCount } = this.props
incrementCount()
}
decrement = () => {
const { decrementCount } = this.props
decrementCount()
}
reset = () => {
const { resetCount } = this.props
resetCount()
}
render () {
const { count } = this.props
return (
<div>
<h1>
Count: <span>{count}</span>
</h1>
<button onClick={this.increment}>+1</button>
<button onClick={this.decrement}>-1</button>
<button onClick={this.reset}>Reset</button>
</div>
)
}
}
function mapStateToProps (state) {
const { count } = state
return { count }
}
const mapDispatchToProps = dispatch => bindActionCreators({ incrementCount, decrementCount, resetCount }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Counter)