Expand/Collapse Redux 侧边栏

Question

我是 Redux 的新手，我想知道这是否是实现 Expand/Collapse 的正确方法具有相同按钮的侧边栏。

我有带有 bool 变量 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 内部，我正在为 collpase 和 expand 调度操作。

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 来做。

My reducer for those actions is

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

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

constructor(props){
    super(props)

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

您不必将任何内容传递给 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
 }
}

Expand/Collapse Redux 侧边栏

Expand/Collapse sidebar with Redux

javascript

design-patterns

sidebar

reactjs

redux