class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.incrementAsync = this.incrementAsync.bind(this);
        this.incrementIfOdd = this.incrementIfOdd.bind(this);
    }

    incrementIfOdd() {
        if (this.props.value % 2 !== 0) {
            this.props.onIncrement()
        }
    }

    incrementAsync() {
        setTimeout(this.props.onIncrement, 1000)
    }

    render() {
        const { value, onIncrement, onDecrement } = this.props
        return (
            <div>
                <p>当前点击次数: {value} </p>
                <input value="增加" type="button" onClick={onIncrement} />

                <input value="减少" type="button" onClick={onDecrement} />
                <input value="只有奇数才能加" type="button" onClick={this.incrementIfOdd} />

                <input value="异步增加" type="button" onClick={this.incrementAsync} />

            </div>
        )
    }
}

function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}
const store = Redux.createStore(counter)
const div = document.getElementById('example')
const render = () => ReactDOM.render(
    <Counter
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    div
)

render()
store.subscribe(render)