import React,{Component} from 'react'
import {connect} from 'react-redux'
import {createIncreementAction,createDecreementAction,createIncreementAsyncAction} from '../../redux/count_action'

class Count extends Component{
    increement=()=>{
        const {value}=this.selectNumber
        this.props.jia(value*1)
    }
    decreement=()=>{
        const {value}=this.selectNumber
        this.props.jian(value*1)
    }
    increementOdd=()=>{
        const {value}=this.selectNumber
        if(this.props.state.count%2!==0){
            this.props.jia(value*1)
        }
    }
    increementSync=()=>{
        const {value}=this.selectNumber
        this.props.jiaAsync(value*1,1000)
    }
    render(){
        return(
            <div>
                <h1>当前求和为：{this.props.state.count}</h1>
                <select name="" id="" ref={c=>this.selectNumber=c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increement}>+</button>
                <button onClick={this.decreement}>-</button>
                <button onClick={this.increementOdd}>计数再加</button>
                <button onClick={this.increementSync}>异步再加</button>
            </div>
        )
    }
}
const CountContainer=connect(
    state=>({state}),
    {
        jia:createIncreementAction,
        jian:createDecreementAction,
        jiaAsync:createIncreementAsyncAction,
    }
)
(Count)
export default CountContainer