var rootReducer = Redux.combineReducers({
reducreForButtonGroup,reducreForButtonGroup2
});
我确实按如下所示设置了initialState,但是在加载页面时并未禁用“详细信息”按钮。
var initialState2 = {
disabled:false
}
function 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中使用了化简名称
function select(state) {
return {
value: state.reducreForButtonGroup.value
}
}
const NewButtonGroup = connect(select)(ButtonGroup);
答案 0 :(得分:1)
您遇到拼写问题,应该是const { disabled } = this.props;
和disabled={disabled}
,我认为应该可以。
也请注销您从该州获得的信息,因为我认为应该是这样:
function select(state) {
console.log(state);
return {
disabled: state.reducreForButtonGroup2.disabled
}
}
又有人认为它叫做reducer
而不是reducre
。您将其拼写错误了几次。