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>
        )
    }
}

 

转载于:https://www.cnblogs.com/webqiand/articles/11136561.html