2018-04-03 09:09:30 +02:00
|
|
|
import React, { Component } from 'react'
|
2019-05-12 11:13:02 +02:00
|
|
|
import { connect } from 'react-redux'
|
|
|
|
|
2018-04-03 09:09:30 +02:00
|
|
|
import Header from '../shared/components/header'
|
|
|
|
|
|
|
|
class Home extends Component {
|
|
|
|
render () {
|
2019-05-12 11:13:02 +02:00
|
|
|
const { counter, increment, incrementBy, incrementAsync } = this.props
|
|
|
|
|
2018-04-03 09:09:30 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Header />
|
|
|
|
<h1> Counter </h1>
|
2019-05-12 11:13:02 +02:00
|
|
|
<h3>The count is {counter}</h3>
|
2018-04-03 09:09:30 +02:00
|
|
|
<p>
|
2019-05-12 11:13:02 +02:00
|
|
|
<button onClick={increment}>increment</button>
|
|
|
|
<button onClick={() => increment(1)}>
|
2018-04-03 09:09:30 +02:00
|
|
|
increment (using dispatch function)
|
|
|
|
</button>
|
2019-05-12 11:13:02 +02:00
|
|
|
<button onClick={incrementBy(5)}>increment by 5</button>
|
|
|
|
<button onClick={incrementAsync}>incrementAsync</button>
|
2018-04-03 09:09:30 +02:00
|
|
|
</p>
|
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapState = state => ({
|
|
|
|
counter: state.counter
|
|
|
|
})
|
|
|
|
|
|
|
|
const mapDispatch = ({ counter: { increment, incrementAsync } }) => ({
|
|
|
|
increment: () => increment(1),
|
|
|
|
incrementBy: amount => () => increment(amount),
|
|
|
|
incrementAsync: () => incrementAsync(1)
|
|
|
|
})
|
|
|
|
|
2019-05-12 11:13:02 +02:00
|
|
|
export default connect(
|
|
|
|
mapState,
|
|
|
|
mapDispatch
|
|
|
|
)(Home)
|