import React from 'react';
import {connect} from 'react-redux'
import {actionInc, actionDec, actionPlus10} from '../actions'
const CounterView = ({value, inc, dec}) =>
<div>
    <button onClick={dec}>-</button>
    {value}
    <button onClick={inc}>+</button>
</div>

export default CounterView

export  const connector = connect(state => ({value: state.counter}) ,
                                           {inc: actionInc,
                                            dec: actionDec})

export const ConnectedCounter = connector(CounterView)
export const ConnectedBIGTABLO = connector(({value}) => <h1>{value}</h1>)


export const BigButton = ({onPress}) => <button style={{fontSize: "5em"}} onClick={onPress}>+10</button>
export const ConnectedBigButton = connect(null, {onPress: actionPlus10})(BigButton)