Question

我有一个带有值的按钮A，当我单击该按钮时，该值将增加一个，现在它可以与Redux 一起使用，如果我想添加另一个具有相同功能的按钮B，但该值是单个的。

我应该为新按钮创建另一对ACTION和Reducer吗？或者还有另一种方法来增强我现有的代码？谢谢

// initialState

var initialState = {
        age:0
        }

//动作创建者

function clickAdd() {
  return {
      type: 'CLICK_ADD'
  }
}

//减少量

function reducreForAge(state = initialState, action) {
  if (typeof state === 'undefined') {
    return 0
  }
  var age;
  switch(action.type) {
      case 'CLICK_ADD': {
          return {
              age: state.age + 1
              }

      }
      default :{
          return state
      }
  }
}

//组件

var ButtonGroup = React.createClass({

  render() {

      const { age } = this.props;     

        return (
          <ButtonToolbar style={{width: 17+ 'em'}} >
          <Button id="buttonA" onClick={this.props.clickAdd} >{age}</Button>
          <Button id="buttonB" onClick={this.props.clickAdd} >{age}</Button>
          </ButtonToolbar> 
        );
      }
});

//连接

function mapDispatchToProps (dispatch) {
    return Redux.bindActionCreators({
        clickAdd:clickAdd
  }, dispatch);
 }


function mapStateToProps(state) {  
    return {  
        age: state.reducreForAge.age
    }  
}  

const NewButtonGroup = connect(mapStateToProps,mapDispatchToProps)(ButtonGroup);

Answer 1

使用有效载荷指定增量项目。

让我们考虑

var initialState = {
        age:0
        anotherItem:0
}

动作将会

function clickAdd(itemToIncre) {
  return {
      type: 'CLICK_ADD',
      payload:itemToIncre  // either age or anotherItem which ever you want to increment
  }
}

减速器

function reducreForAge(state = initialState, action) {
  if (typeof state === 'undefined') {
    return 0
  }
  var age;
  switch(action.type) {
      case 'CLICK_ADD': {
          return {...state,[action.payload]:state[action.payload]+1}
      }
      default :{
          return state
      }
  }
}

现在是时候决定哪个按钮将增加哪个项目了 button1，其递增age，另一个按钮将递增anotheritem，那么动作调用必须分别类似于this.props.clickAdd('age')和this.props.clickAdd('anotheritem')

const mapDispatchToProps = (dispatch) => ({
    clickAdd: (itemToIncre) => dispatch(clickAdd(itemToIncre))
})

REDUX创建另一个类似组件的方式

1 个答案: