title: React Action, Reducer & Connect Syntax
body: <p>I have the following React Code to Create a booleen true/false in Redux store which is then used to open/close a Material UI Drawer/Side Menu.</p>
  
  <p>I'm new to React and I wanted to ask if what I'm doing is correct or if I'm making obvious mistakes etc.</p>
  
  <p>Note: the solution works (it opens/closes the Drawer as expected). I just interested to know if I should be coding differently... also I've removed a little code so it can be read more easily...</p>
  
  <p>Actions File:</p>
  
  <pre><code>export const setDrawerPopOutMenuStatus = {
      type: 'DRAWER_POPOUT_MENU_STATUS'
  }
  </code></pre>
  
  <p>Reducers File:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  
  const setDrawerPopOutMenuStatus = (state = true, action) =&gt; {
      switch (action.type) {
          case 'DRAWER_POPOUT_MENU_STATUS':
              if(state) {
                  return false;
              }else{
                  return true;
              }
          default:
              return state;
      }
  }
  
  export default combineReducers({
      setDrawerPopOutMenuStatus
  })
  </code></pre>
  
  <p>Store File</p>
  
  <pre><code>import { createStore } from 'redux';
  import { composeWithDevTools } from 'redux-devtools-extension';
  import reducer from './reducers.js';
  import { setDrawerPopOutMenuStatus } from './actions.js';
  
  
  const store = createStore(reducer, composeWithDevTools());
  
  const render = () =&gt; {
      console.dir(store.getState());
  };
  
  store.subscribe(render);
  render();
  
  export default store;
  </code></pre>
  
  <p>Index.js (starting File):</p>
  
  <pre><code>    import React from 'react';
      import ReactDOM from 'react-dom';
      import { Provider } from 'react-redux';
      import store from './store.js';
      import './index.css';
      import App from './components/App.js';
      import registerServiceWorker from './registerServiceWorker';
  
      ReactDOM.render(
          &lt;Provider store={store}&gt;
              &lt;App /&gt;
          &lt;/Provider&gt;
          , document.getElementById('root'));
      registerServiceWorker();
  </code></pre>
  
  <p>Finally Component (this passes the state to a sub-component):</p>
  
  <pre><code>import React from 'react'
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { setDrawerPopOutMenuStatus } from "../actions";
  
  
  class App extends React.Component {
  
      // Redux Drawer State (Toggle PopOut Menu)
      drawerPopOutHandle = () =&gt; {
          this.props.drawerPopOutUpdated();
      }
  
  
      // PreLoad Actions (eg: make action run once to start with)
      componentDidMount() {
          this.props.drawerPopOutUpdated()
      }
  
  
      render() {
          return (
                  &lt;LeftDrawerMenu drawerStatus={this.props.drawerStatus}/&gt;
          )
      }
  }
  
  
  
  
  
  App.propTypes = {
      drawerStatus: PropTypes.bool
  };
  
  const mapStateToProps = (state) =&gt; {
      console.log('drawer status: '+state.setDrawerPopOutMenuStatus);
  
      return {
          drawerStatus: state.setDrawerPopOutMenuStatus
      }
  }
  
  const mapDispatchToProps = (Dispatch) =&gt; {
      return({
          drawerPopOutUpdated: () =&gt; Dispatch(setDrawerPopOutMenuStatus)
      })
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>