title: Invalid mapStateToProps Argument in React-Redux
body: <p>I'm facing a problem with <strong>mapStateToProps</strong> argument. It seems a very simple error but I'm not able to figure out what's happening. Basically, what I'm trying to do is toggle a sidebar menu with react-redux and react saga. Everything works well but I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: Invalid value of type object for mapStateToProps argument when connecting component Sidebar.</p>
  </blockquote>
  
  <p>Appreciate any help:</p>
  
  <p><strong>Index</strong> app/js/index.js</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import configureStore from '../store/configureStore';
  import Canvas from '../components/Canvas/Canvas';
  
  const store = configureStore();
  
  render(
    &lt;Provider store={store}&gt;
      &lt;Canvas /&gt;
    &lt;/Provider&gt;,
    document.getElementById('app'),
  );
  </code></pre>
  
  <p><strong>Reducers</strong></p>
  
  <p>(Index) app/reducers/index.js</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import sidebar from './sidebar';
  
  const rootReducer = combineReducers({
    sidebar,
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>(Sidebar) app/reducers/sidebar.js</p>
  
  <pre><code>import {
    TOGGLE_SIDEBAR,
  } from '../actions';
  
  const sidebar = (state = { value: true }, action) =&gt; {
    switch (action.type) {
      case TOGGLE_SIDEBAR:
        debugger;
        return action.value;
      default:
        debugger;
        return state.value;
    }
  }
  
  export default sidebar;
  </code></pre>
  
  <p><strong>Sagas</strong></p>
  
  <p>index.js app/sagas/index.js</p>
  
  <pre><code>import { fork } from 'redux-saga/effects';
  import { watcher } from './watcher';
  
  function* rootSaga() {
    yield [
      fork(watcher),
    ];
  }
  
  export default rootSaga;
  </code></pre>
  
  <p>sidebar.js app/sagas/sidebar.js</p>
  
  <pre><code>import { put } from 'redux-saga/effects';
  import {
    TOGGLE_SIDEBAR,
  } from '../actions';
  
  export function* sidebar () {
    try {
      yield put ({ type: TOGGLE_SIDEBAR });
    } catch (err) {
      debugger;
    }
  }
  </code></pre>
  
  <p>watcher.js app/sagas/watcher.js</p>
  
  <pre><code>import { takeEvery } from 'redux-saga/effects';
  import { sidebar } from './sidebar';
  import {
    TOGGLE_SIDEBAR,
  } from '../actions';
  
  export function* watcher() {
    try {
      yield takeEvery(TOGGLE_SIDEBAR, sidebar);
    } catch (err) { debugger; }
  }
  </code></pre>
  
  <p><strong>Actions</strong> app/actions/index.js</p>
  
  <pre><code>export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
  
  export const toggleSidebar = (value) =&gt; ({
    type: TOGGLE_SIDEBAR,
    value,
  });
  </code></pre>
  
  <p><strong>Containers</strong> SidebarContainer.js app/containers/sidebarContainer.js</p>
  
  <pre><code>import { connect } from 'react-redux';
  import {
    toggleSidebar as callToggleSidebar,
  } from '../actions';
  import Sidebar from '../components/Sidebar/Sidebar';
  
  debugger;
  const mapStateToProps = (state) =&gt; {
    debugger;
    return {
      open: state.sidebar,
    }
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
    toggleSidebar: (val) =&gt; { dispatch(callToggleSidebar(val)); },
  });
  
  export default connect({
    mapStateToProps,
    mapDispatchToProps,
  })(Sidebar);
  </code></pre>
  
  <p><strong>Components</strong></p>
  
  <p>Sidebar.jsx app/components/Sidebar.jsx</p>
  
  <pre><code>import React from 'react';
  import { PropTypes } from 'prop-types';
  import './styles/styles.less';
  
  const Sidebar = ({ open, toggleSidebar }) =&gt; (
    &lt;div className={open ? 'sidebar sidebar-open' : 'sidebar sidebar-closed'}&gt;
      &lt;div className='show-hide-container'&gt;
        &lt;button onClick={() =&gt; toggleSidebar(!open)}&gt;
          &lt;i className="fa fa-arrow-right" aria-hidden="true" /&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      Sidebar
    &lt;/div&gt;
  );
  
  Sidebar.propTypes = {
    open: PropTypes.bool.isRequired,
    toggleSidebar: PropTypes.func.isRequired,
  };
  
  export default Sidebar;
  </code></pre>