使用 Redux 展开/折叠侧边栏答案

【问题标题】：Expand/Collapse sidebar with Redux使用 Redux 展开/折叠侧边栏
【发布时间】：2017-03-09 10:38:29
【问题描述】：

我是 Redux 的新手，我想知道这是否是使用相同按钮实现 展开/折叠 侧边栏的正确方法。

我有带有布尔变量 isCollapsed 的 React 组件侧边栏，其初始状态为 false，这意味着侧边栏已展开。

constructor(props){
    super(props)

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

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

而在onClick我正在调用自定义方法onClickCollapseSidebar

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

在onClickCollapseSidebar 内部，我正在调度用于折叠和展开的操作。

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

我想知道这是否是使用 Redux 处理这些情况的正确方法。

我知道我可以通过 react 的 setState 方法使用本地状态，或者使用库作为 redux-ui 来处理这些情况，但我想只使用 redux。

我对这些动作的减速器是

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

【问题讨论】：

标签： javascript reactjs design-patterns redux sidebar

【解决方案1】：

由于 redux 维护你的侧边栏状态，你不需要在构造函数中声明状态：

constructor(props){
    super(props)

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

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

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

【讨论】：

谢谢有道理。