title: Expand/Collapse sidebar with Redux
body: <p>I am new into <strong>Redux</strong> and I would like to know if this is the right approach how to implement <strong>Expand/Collapse</strong> sidebar with same button. </p>
  
  <p>I have React component Sidebar with bool variable <code>isCollapsed</code> which initial state is <code>false</code> which means sidebar is expanded.</p>
  
  <pre><code>constructor(props){
      super(props)
  
      this.state = {
          sidebar: { isCollapsed: false }
      }
  
      this.onClickCollapseSidebar = this.onClickCollapseSidebar.bind(this)
  }
  </code></pre>
  
  <p>And in <code>onClick</code> I am calling selfdefined method <code>onClickCollapseSidebar</code></p>
  
  <pre><code>&lt;a onClick={this.onClickCollapseSidebar}  className="sidebar-control"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And inside <code>onClickCollapseSidebar</code> I am dispatching actions for collpase and expand.</p>
  
  <pre><code>onClickCollapseSidebar(event) {
      if(this.props.sidebar.isCollapsed) {
          this.props.actions.expandSidebar(this.props.sidebar)
      } else {
          this.props.actions.collapseSidebar(this.state.sidebar)
      }
  }
  </code></pre>
  
  <p>And I want to know if this is correct approach how to handle those kind of situations with Redux. </p>
  
  <p>I know that I can use local state with react's <code>setState</code> method or use library as <a href="https://github.com/tonyhb/redux-ui" rel="nofollow noreferrer">redux-ui</a> to handle those situation, but i would like to do it with redux only.</p>
  
  <blockquote>
    <p>My reducer for those actions is</p>
  </blockquote>
  
  <pre><code>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
   }
  }
  </code></pre>