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
}
}
还有人认为它被称为减速器而不是减速器.你有几次拼写错误.
