Question

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

我的React组件边栏有bool变量isCollapsed，初始状态为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调度并扩展。

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

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

使用Redux展开/折叠侧栏

1 个答案: