Question

在redux中，我想使用有效载荷来指定增量项目。（两个按钮具有不同的年龄，单击按钮时年龄会增加。） 但我不确定如何在mapDispatchToProps中正确设置clickAdd。

initialState

var initialState = {
        age:15,
       age2:16
        }

动作创建者

function clickAdd(itemToIncre) {
  return {
      type: 'CLICK_ADD',
    payload:itemToIncre
  }
}

//减少量

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

组件

var ButtonGroup = React.createClass({

  render() {

      const { age } = this.props;    
      const { age2 } = this.props;   

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

mapDispatchToProps

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

mapStateToProps

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

连接

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


ReactDOM.render( 
  <Provider store={store}>
    <NewButtonGroup/>
  </Provider>,
document.getElementById('button_container')
);

Answer 1

您可以通过删除对Redux.bindActionCreators帮助器的调用来修改mapDispatchToProps的实现，如下所示：

function mapDispatchToProps (dispatch) {
    return {
        clickDisable : () => dispatch(clickDisable()),
        clickAdd : (itemToIncre) => dispatch(clickAdd(itemToIncre))
    };
 }

这应该依次将clickDisable和clickAdd函数注入到<ButtonGroup/>组件的props中。您还需要按以下方式更新ButtonGroup组件：

var ButtonGroup = React.createClass({

  render() {

      const { age } = this.props;    
      const { age2 } = this.props;   

        return (
          <ButtonToolbar style={{width: 17+ 'em'}} >

          {/* [UPDATE] add () => like so */}
          <Button onClick={() => this.props.clickAdd('age')} >{age}</Button>

          {/* [UPDATE] add () => like so */}
          <Button onClick={() => this.props.clickAdd('age2')}>{age2}</Button>
          </ButtonToolbar> 
        );
      }
});

使用有效负载在Redux中指定增量项目

1 个答案: