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