diff --git a/counter-React,Redux and react-redux b/counter-React,Redux and react-redux new file mode 100644 index 0000000..ecd55c6 --- /dev/null +++ b/counter-React,Redux and react-redux @@ -0,0 +1,153 @@ +// 文件路径 ./src/reducers/index.js + +//属性不再只是一个值 +const initialState = { + value:0, + star :0 +} + + const reducer = ( state =initialState, action) => {//这个地方的值是初始值 + switch (action.type) { + case 'INCREMENT': + return Object.assign({},state,{ value : state.value+1})//对象中有多个属性所以必须这样写 + case 'DECREMENT': + return Object.assign({},state,{ value : state.value-1}) + case 'MULTIPLY': + return Object.assign({},state,{ value : state.value*2}) + case 'STAR': + return Object.assign({},state,{ star : state.star+1}) + default: + return state + } +} +export default reducer; + +//文件路径 ./src/components/Counter.js +import React, { Component } from 'react' +import PropTypes from 'prop-types' +const ButtonAct = (props) => +class Counter extends Component { + constructor(props) { + super(props); + this.incrementAsync = this.incrementAsync.bind(this); + this.incrementIfOdd = this.incrementIfOdd.bind(this); + this.incrementIfEven = this.incrementIfEven.bind(this); + } + + incrementIfOdd() { + if (this.props.value % 2 !== 0) { + this.props.onIncrement() + } + } + + incrementIfEven() { + if (this.props.value % 2 === 0) { + this.props.onIncrement() + } + } + + incrementAsync() { + setTimeout(this.props.onIncrement, 1000) + } + + + render() { + const { value,star,onIncrement, onDecrement,onMultiply,onStar } = this.props + return ( +
+ Stars:{star}
+
+ {' '}
+
+ {' '}
+
+ {' '}
+
+ {' '}
+
+ {' '}
+
+ {' '}
+
+