title: Why is my dispatch/console.log not firing when I call the action?
body: <p>I was working on my final project for Flatiron and I came across a bug while working on my frontend. I tried many things, but always came back to this one issue. My callback function inside my dispatch is not firing. So while I may be interested to know whether my code should be refactored/fixed of bugs, the biggest problem is that I cannot run my dispatches through an action.
  Here is my generic container:</p>
  <pre><code>import { useEffect } from &quot;react&quot;
  import { connect } from &quot;react-redux&quot;
  
  import * as actions from &quot;../../actions/index&quot;
  import Component from &quot;./Component&quot;
  
  
  const Container = (props) =&gt; {
    useEffect(() =&gt; {
      actions.menuItemsFetchRandom(8)
    }, [])
    const menuItemComponents = props.menuItems.menuItems.map((menuItem) =&gt; {
      return (
        &lt;Component key={menuItem.key} menuItem={menuItem} /&gt;
      )
    })
    return (
      &lt;div className=&quot;container&quot;&gt;
        {
          props.menuItems.fetching
          ? &quot;loading...&quot;
          : (
            props.menuItems.error === &quot;&quot;
            ? menuItemComponents
            : props.menuItems.error
          )
        }
      &lt;/div&gt;
    )
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      menuItems: state.menuItems
    }
  }
  
  export default connect(mapStateToProps)(Container)
  </code></pre>
  <p>And my <code>actions.menuItemsFetchRandom()</code> comes from <code>/actions/menuItems.js</code>:</p>
  <pre><code>import * as common from &quot;./common&quot;
  import * as reducers from &quot;../reducers/index&quot;
  
  const MENU_ITEMS_URL = common.API_URL + &quot;menu_items/&quot;
  
  export const menuItemsFetchMany = (options) =&gt; {
    return (dispatch) =&gt; {
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_REQUEST
      })
      fetch(MENU_ITEMS_URL + options).then((response) =&gt; {
        return response.json()
      }).then((menuItems) =&gt; {
        dispatch({
          type: reducers.MENU_ITEMS_FETCH_SUCCESS,
          payload: menuItems
        })
      }).catch((error) =&gt; {
        dispatch({
          type: reducers.MENU_ITEMS_FETCH_ERROR,
          payload: error
        })
      })
    }
  }
  
  export const menuItemsFetchRandom = (numberOfItems) =&gt; {
    console.log(&quot;hi&quot;)
    return (dispatch) =&gt; {
      console.log(&quot;Hello&quot;)
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_REQUEST
      })
      fetch(MENU_ITEMS_URL).then((response) =&gt; {
        return response.json()
      }).then((menuItems) =&gt; {
        const length = menuItems.length
        if (numberOfItems &gt; length) {
          numberOfItems = length
        }
        dispatch({
          type: reducers.MENU_ITEMS_FETCH_SUCCESS,
          payload: (() =&gt; {
            const result = []
            while (result.length !== length) {
              const choice = menuItems[common.getRandomInt(length)]
              if (result.includes(choice)) {
                continue
              }
              result.push(choice)
            }
          })()
        })
      }).catch((error) =&gt; {
        dispatch({
          type: reducers.MENU_ITEMS_FETCH_ERROR,
          payload: error
        })
      })
    }
  }
  </code></pre>
  <p>My <code>/reducers/menuItems.js</code> looks like this:</p>
  <pre><code>export const MENU_ITEMS_FETCH_REQUEST = &quot;MENU_ITEMS_FETCH_REQUEST&quot;
  export const MENU_ITEMS_FETCH_SUCCESS = &quot;MENU_ITEMS_FETCH_SUCCESS&quot;
  export const MENU_ITEMS_FETCH_ERROR = &quot;MENU_ITEMS_FETCH_ERROR&quot;
  
  const initialState = {
    menuItems: [],
    error: &quot;&quot;,
    fetching: false
  }
  
  const menuItems = (state=initialState, action) =&gt; {
    switch (action.type) {
      case MENU_ITEMS_FETCH_REQUEST: {
        return {
          ...state,
          error: &quot;&quot;,
          fetching: true
        }
      }
      case MENU_ITEMS_FETCH_SUCCESS: {
        return {
          ...state,
          menuItems: action.payload,
          error: &quot;&quot;,
          fetching: false
        }
      }
      case MENU_ITEMS_FETCH_ERROR: {
        return {
          ...state,
          error: action.payload,
          fetching: false
        }
      }
      default: {
        return state
      }
    }
  }
  
  export default menuItems
  </code></pre>
  <p>But that doesn't seem to matter as the <code>console.log</code> inside the callback function in <code>menuItemsFetchRandom()</code> does not fire. I get the <code>console.log(&quot;hi&quot;)</code>, but not the <code>console.log(&quot;Hello&quot;)</code>. Which to me tells me its either something wrong with my code, or something wrong with redux-thunk.</p>