title: getting undefined from useSelector react-redux hook
body: <p>I have a component that dispatches action to the reducer using useDispatch hook inside useEffect. I only wants it to happen once on first component render. Then when I try to set the results from the store using useSelector hook I am getting undefined. Here is my code:</p>
  
  <pre><code>const SingleHotel = props =&gt; {
    //GETTING HOTEL ID FROM REACT-ROUTER-DOM PROPS
    const {
      match: {
        params: { id }
      }
    } = props
  
    //INITIALIZE USE DISPATCH REDUX HOOK.
    const dispatch = useDispatch()
  
    //ACCESSING HOTEL DETAILS STATE FROM THE REDUX STORE.
    const hotelDetails = useSelector(state =&gt; state.SingleHotel)
  
    //DISPATCHING HOTEL DETAILS TO THE REDUCER.
    useEffect(() =&gt; {
      dispatch(fetchSingleHotel(id))
    }, [])
  
    return &lt;div&gt;Single hotel page {console.log(hotelDetails)}&lt;/div&gt;
  }
  </code></pre>
  
  <p>I am console logging state from the store in the JSX but I get 'undefined'.
  However, when I check the results in the Redux dev tools it appears correctly.
  Here is how it looks:
  <a href="https://i.stack.imgur.com/owvtY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/owvtY.png" alt="Redux dev tools image"></a></p>