展开/收起侧边栏与终极版

Question

我是新进终极版，我想知道这是如何实现展开/收起侧边栏有相同的按钮正确的方法。

我有React组件侧边栏bool变量isCollapsed其初始状态是false这意味着侧栏被展开。

constructor(props){ 
    super(props) 

    this.state = { 
     sidebar: { isCollapsed: false } 
    } 

    this.onClickCollapseSidebar = this.onClickCollapseSidebar.bind(this) 
} 

而在onClick我打电话selfdefined方法onClickCollapseSidebar

<a onClick={this.onClickCollapseSidebar} className="sidebar-control"></a> 

而且里面onClickCollapseSidebar我派遣行动的collpase和扩大。

onClickCollapseSidebar(event) { 
    if(this.props.sidebar.isCollapsed) { 
     this.props.actions.expandSidebar(this.props.sidebar) 
    } else { 
     this.props.actions.collapseSidebar(this.state.sidebar) 
    } 
} 

我想知道如果这是正确的方法如何处理Redux的这种情况。

我知道我可以使用本地状态与反应的setState方法或使用库作为redux-ui来处理这些情况，但我想只用REDX做。

我对这些行为减速是

export default function sidebarReducer(state = [], action) { 
switch (action.type) { 
    case types.COLLAPSE_SIDEBAR: 
     return Object.assign({}, state, {isCollapsed: true}) 
    case types.EXPAND_SIDEBAR: 
     return Object.assign({}, state, {isCollapsed: false}) 
    default: 
     return state 
} 
} 

Answer 1

由于终极版保持侧边栏的状态，您不需要在声明构造函数中的状态：

constructor(props){ 
    super(props) 

    this.onClickCollapseSidebar = this.onClickCollapseSidebar.bind(this) 
} 

你不因为您的reducer使用动作类型而不是有效载荷，所以不必将任何内容传递给expandSidebar()和collapseSidebar()动作创建者。

onClickCollapseSidebar(event) { 
    if(this.props.sidebar.isCollapsed) { 
     this.props.actions.expandSidebar() 
    } else { 
     this.props.actions.collapseSidebar() 
    } 
} 

正确定义的初始状态 - state = {isCollapsed: false}

export default function sidebarReducer(state = {isCollapsed: false}, action) { 
switch (action.type) { 
    case types.COLLAPSE_SIDEBAR: 
     return Object.assign({}, state, {isCollapsed: true}) 
    case types.EXPAND_SIDEBAR: 
     return Object.assign({}, state, {isCollapsed: false}) 
    default: 
     return state 
} 
}