0846ed2df7
* Simplify with-rematch example by removing unnecessary code Functionality has remained the same. * Use correct store initialization (from with-redux) Previous implementation didn't initialize the correctly. Since the `with-redux` example implements this correctly, this solution has been copied over almost verbatim.
42 lines
1 KiB
JavaScript
42 lines
1 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { connect } from 'react-redux'
|
|
|
|
import Header from '../shared/components/header'
|
|
|
|
class Home extends Component {
|
|
render () {
|
|
const { counter, increment, incrementBy, incrementAsync } = this.props
|
|
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<h1> Counter </h1>
|
|
<h3>The count is {counter}</h3>
|
|
<p>
|
|
<button onClick={increment}>increment</button>
|
|
<button onClick={() => increment(1)}>
|
|
increment (using dispatch function)
|
|
</button>
|
|
<button onClick={incrementBy(5)}>increment by 5</button>
|
|
<button onClick={incrementAsync}>incrementAsync</button>
|
|
</p>
|
|
<br />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapState = state => ({
|
|
counter: state.counter
|
|
})
|
|
|
|
const mapDispatch = ({ counter: { increment, incrementAsync } }) => ({
|
|
increment: () => increment(1),
|
|
incrementBy: amount => () => increment(amount),
|
|
incrementAsync: () => incrementAsync(1)
|
|
})
|
|
|
|
export default connect(
|
|
mapState,
|
|
mapDispatch
|
|
)(Home)
|