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 './style.scss';
|
12 | import { increase, decrease, double } from './state';
|
13 |
|
14 | export class App extends React.Component {
|
15 | render() {
|
16 | return (
|
17 | <div className="center-wrapper">
|
18 | <h2>{ this.props.counter.value }</h2>
|
19 | <button onClick={this.props.increase}>+</button>{' '}
|
20 | <button onClick={this.props.decrease}>-</button>{' '}
|
21 | <button onClick={this.props.double}>double</button>
|
22 | </div>
|
23 | );
|
24 | }
|
25 | }
|
26 |
|
27 | App.propTypes = {
|
28 | counter: PropTypes.object,
|
29 | increase: PropTypes.func,
|
30 | decrease: PropTypes.func,
|
31 | double: PropTypes.func
|
32 | };
|
33 |
|
34 | export default connect(
|
35 | state => ({ counter: state.app.counter }),
|
36 | { increase, decrease, double }
|
37 | )(App);
|