1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import React from 'react';
|
7 | import PropTypes from 'prop-types';
|
8 | import { connect } from 'react-redux';
|
9 | import type { CounterType } from './types';
|
10 |
|
11 | import { Wrapper, Headline, Button } from './styled.js';
|
12 | import { increase, decrease, double } from './state';
|
13 |
|
14 | class App extends React.Component {
|
15 | props: CounterType;
|
16 | render() {
|
17 | return (
|
18 | <Wrapper>
|
19 | <Headline>{ this.props.counter.value }</Headline>
|
20 | <Button onClick={this.props.increase}>+</Button>{' '}
|
21 | <Button onClick={this.props.decrease}>-</Button>{' '}
|
22 | <Button onClick={this.props.double}>double</Button>
|
23 | </Wrapper>
|
24 | );
|
25 | }
|
26 | }
|
27 |
|
28 | App.propTypes = {
|
29 | counter: PropTypes.object,
|
30 | increase: PropTypes.func,
|
31 | decrease: PropTypes.func,
|
32 | double: PropTypes.func
|
33 | };
|
34 |
|
35 | export default connect(
|
36 | state => ({ counter: state.app.counter }),
|
37 | { increase, decrease, double }
|
38 | )(App);
|