展開/收起側邊欄與終極版

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 
} 
}