当前位置 : 主页 > 网页制作 > React >

reactjs – react reducer的initialState没有显示为expexted

来源:互联网 收集:自由互联 发布时间:2021-06-15
var rootReducer = Redux.combineReducers({ reducreForButtonGroup,reducreForButtonGroup2}); 我确实将initialState设置为reducre,如下所示,但是当我加载页面时,Detail按钮没有被禁用. var initialState2 = { disabled:false } 函
var rootReducer = Redux.combineReducers({
    reducreForButtonGroup,reducreForButtonGroup2
});

我确实将initialState设置为reducre,如下所示,但是当我加载页面时,Detail按钮没有被禁用.

var initialState2 = {
        disabled:false
        }

函数reducreForButtonGroup2(state = initialState2,action){

}

var DetailButton = React.createClass({ 
            clickDisable(event) {  
                this.props.dispatch(clickDisable());  
            }  ,

          render() {

            const { disable } = this.props;   

            return (
            <ButtonToolbar style={{width: 17+ 'em'}}>
            <Button  disabled={disable} style={{width: 5 + 'em'}}>Detail</Button>
            <Button onClick={this.clickDisable} style={{width: 5 + 'em'}}>Close</Button>
            </ButtonToolbar>)
          }
        }) ;


function select(state) {  
    return {  
        disabled: state.disabled
    }  
}  

const NewDetailButton = connect(select)(DetailButton);

新减速机

我想添加新的减速机

var initialState = {
        value:15
        }

动作创作者

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

新的还原

function reducreForButtonGroup(state = initialState, action) {
      if (typeof state === 'undefined') {
        return 0
      }
      var value;
      switch(action.type) {
          case 'CLICK_ADD': {
              console.log("2");

              return {
                  value: state.value + 1
                  }

          }
          default :{
              return state
          }
      }
    }

零件

var ButtonGroup = React.createClass({

     clickAdd(event) {  
            this.props.dispatch(clickAdd());  
        }  ,

  render() {

      const { value } = this.props;     

        return (
          <ButtonToolbar style={{width: 17+ 'em'}} >
          <Button  id="search"   style={{width: 5 + 'em'}}>{value}</Button>
          <Button  onClick={this.clickAdd} style={{width: 5 + 'em'}}>Create</Button>
          </ButtonToolbar> 
        );
      }
});

Mapstatetoprops我确实使用了mapStateToProps中的reducre名称

function select(state) {  
    return {  
        value: state.reducreForButtonGroup.value
    }  
}  

const NewButtonGroup = connect(select)(ButtonGroup);
你有拼写问题,应该是const {disabled} = this.props;和disabled = {disabled},我相信它应该工作.

同时注明你从州获得的东西,因为我认为它应该是:

function select(state) {  
   console.log(state);
    return {  
        disabled: state.reducreForButtonGroup2.disabled
    }  
}

还有人认为它被称为减速器而不是减速器.你有几次拼写错误.

网友评论