title: UseSelector State is Undefined
body: <p>The page does not render, citing <code>TypeError: state is undefined</code>, tracing back to this line in <strong>SelectForm.js</strong>: <code>const filter = useSelector(state =&gt; state.filter);</code>.</p>
  
  <p>I've spent hours trying to figure out what I'm doing wrong. I've tried createSelector but that didn't work. I've tried dispatching a "Fetch Initial State" action, and that didn't work. The component is wrapped in provider tags. I'm not sure why I don't have access to the state. At this point I'm unable to see any flaws I've been looking at it for so long.</p>
  
  <p>Code Snippets</p>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>let initialState = {
      filter: {
          country: null,
          state: null,
          level: null,
          team: null
      },
  
      isDBConnecting: false, 
      isDBConnected: false, 
      isDBError: false 
  }
  
  const SelectorReducer = (state=initialState, action) =&gt; {
      switch (action.type) {        
          case 'DB_CONNECT_INIT':
              return {
                  ...state,
                  isDBConnecting: true,
                  isDBConnected: false,
                  isDBError: false,
              };
  ...
  ...
  }
  
  export default SelectorReducer;
  </code></pre>
  
  <p><strong>actions.js</strong></p>
  
  <pre><code>export const initializeDBConnection = () =&gt; {
      return {
          type: 'DB_CONNECT_INIT'
      }
  };
  </code></pre>
  
  <p><strong>ParentComponent.js</strong></p>
  
  <pre><code>import React from 'react';
  import { createStore } from 'redux';
  import { Provider } from 'react-redux'; //import provider to provide component access to the state
  
  //Component imports
  import SelectForm from './components/SelectForm'
  import SelectorReducer from '.../reducer.js'
  
  const SelectorStore = createStore(SelectorReducer);
  
  const ParentComponent = () =&gt; {
  
      return (
          &lt;div className="page-container"&gt;
              &lt;div id="carousel"&gt;
                  &lt;div id="wrapper"&gt;
                      &lt;Provider store={SelectorStore}&gt;
                          &lt;SelectForm /&gt;
                      &lt;/Provider&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p><strong>SelectForm.js (Child Component, wrapped in Provider tags above)</strong></p>
  
  <pre><code>//IMPORTS
  import React from 'react'; //import react
  import { useSelector, useDispatch } from 'react-redux';
  
  //COMPONENT IMPORTS
  import FormGroup from '../FormGroup';
  import { * as actions } from '.../actions.js';
  
  const SelectForm = (props) =&gt; {
  
      //STATEFUL IMPORTS
      //filter
      const filter = useSelector(state =&gt; state.filter);
  </code></pre>