redux计时器案例

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import {Button} from 'antd';
// Map Redux state to component props
function mapStateToProps(system) {
return {
value: system.count
}
}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction),
onStopClick:()=>dispatch(onStopAction)
}
}
class Reduxs extends Component {
static get propTypes() {
return {
system: PropTypes.object,
};
}
// 初始化页面

constructor(props, context) {
super(props)
this.state={
isdisabel:false
}
}
render() {
const { value, onIncreaseClick,onStopClick } = this.props
const isdisabel=value===0?true:false;
return (
<div style={{width:"200px",margin:"50px auto 0px auto"}}>
<p className="mb20">{value}</p>
<Button onClick={onIncreaseClick} className="mr20">计数</Button>
<Button onClick={onStopClick} disabled={isdisabel}>停止计数</Button>
</div>

)
}
}
// Action
const increaseAction = { type: 'increase' }
const onStopAction={type: 'stopincrease'}
// Reducer
function counter(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case 'increase':
return { count: count + 1 }
case 'stopincrease'
:
return {count:0}
default:
return state
}
}
// Store
const store = createStore(counter)
// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Reduxs)
export default class Redux
extends React.Component {
render(){
return (
<Provider store={store}>
<App />
</Provider>

)
}
}