javascript - Redux 没有设置 initialState。 Action 调度也失败

Question

我确实将 initialState 设置到 reducer 中，如下所示，但是 当我加载页面时 Detail 按钮没有被禁用，当我点击 Disable 按钮时也没有启用。当我调用操作时，reducer 中的 console.log("1") 正确显示。

var initialState2 = {
        disabled:true
        }

Action 创作者

function clickDisable() {
  return {
      type: 'CLICK_DISABLE'
  }
}

reducer here

function reducreForButtonGroup2(state = initialState2, action) {
  if (typeof state === 'undefined') {
    return 0
  }
  var disabled;
  switch(action.type) {
      case 'CLICK_DISABLE': {
          console.log("1");
          if(state.disabled==true){
              return {
                  disabled: false
                  }
          }else{
              return {
                  disabled: true
                  }
          }
      }
      default :{
          return state
      }
  }
}

组件

 var DetailButton = React.createClass({ 
                clickDisable(event) {  
                    this.props.dispatch(clickDisable());  
                }  ,
                
              render() {
                    
                const { disabled } = 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'}}>Disable</Button>
                </ButtonToolbar>)
              }
            }) ;


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

const NewDetailButton = connect(select)(DetailButton);

rootReducer

var rootReducer = Redux.combineReducers({
        reducreForButtonGroup,reducreForButtonGroup2
    });


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

---

新 reducer

---

我想添加新的reducer

var initialState = {
        value:15
        }

Action 创作者

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

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

const NewButtonGroup = connect(select)(ButtonGroup);

Answer 1

disabled 本身不存在于 props 中。它存在于 props.reducreForButtonGroup2

中

所以改变如下

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

到，

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

目前，它只是未定义的。因此，无论如何，它永远不会被禁用。

查找数据存储的正确方法是通过缩减器名称查找。由于您使用名称 reducreForButtonGroup2 声明了 reducer，因此您从 reducer 返回的任何内容(即 { disabled: true } 或 { disabled: false } ) 将在 mapStateToProps 的 state.reducreForButtonGroup2 中可用。因此，要检查按钮状态，您需要从 stats.reducreForButtonGroup2.disabled 中获取商店的状态。

这样，您现在可以通过返回这个值作为 Prop 传递下去。如果您在 mapStateToProps 中返回 { disabled: state.reducreForButtonGroup2.disabled }(即在本例中为选择)，您的组件将收到 this.props.disabled，它将具有值.

只是为了看看它是如何工作的，从 mapStateToProps 返回一个不同的对象。例如:

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

组件中的 prop 现在将变为，

const { isButtonDisabled } = this.props