title: React Component gets render before store updates
body: <p>I have a component called AlbumCard.js.
  In my AlbumList.js component I'm mapping through an Array and creating multiple AlbumCards components. Each AlbumCard has it its own id (it is the data.id of the album basically)</p>
  <p><strong>It should be possible to click on one AlbumCard and get to the next page, where you can see the whole AlbumCard with much more information (passing the data to the next component).</strong></p>
  <p>My Idea is, by  clicking on one AlbumCard, to get the id( data.id), make a get request with that id( data.id), store the returning data in my redux store and  display that in my next component (AbumPage.js).
  Unfortunately, that component gets rendered before my state updates.
  So I am getting an undefined error the first time I go to that page. If I refresh everything is working because the data is  already there.
  I am also using an asnyc onClick function inside the AlbumCard component. (I did not know how to build an onClick function which is getting the id(data.id) of that component, outside that component).</p>
  <p>I tried conditinal rendering as well, but is not helping)</p>
  <p><strong>AlbumCard.js</strong></p>
  <pre><code>function AlbumCard({ url, albumname, onClick }) {
   // I am passing the onClick handler as a prop
   // My first idea, was to give the div.id the value of the album.id aka data.id as a prop, but I did not know how to get that data later (id = {data.id}) 
  
    return (
      &lt;&gt;
        &lt;div className='dark:bg-gray-900 sm:m-2 sm:w-40 w-24 m-1 transition duration-200 bg-white rounded-lg shadow-md'&gt;
          &lt;div onClick={onClick} id='hi' className='group relative rounded-lg'&gt; 
  </code></pre>
  <p><strong>AlbumList.js</strong></p>
  <pre><code> function AlbumList(props) {
  const onClick = (event) =&gt; {// not working 
      props.fetchAlbum(event.target.id) // not working 
    }
  
    return (
      &lt;section className='sm:flex sm:justify-between sm:flex-nowrap grid grid-cols-3'&gt;
        {view === 'noSearch' ? (
          &lt;&gt;
            {newreleases.slice(0, 5).map((data) =&gt; (
              &lt;AlbumCard
                url={data.images[0].url}
                key={data.id}
                id={data.id}
                albumname={data.name}
                onClick={async () =&gt;
                  props.fetchAlbum(data.id) &amp;&amp; (await history.push('/home/album'))
                }
              /&gt;
            ))}
          &lt;/&gt;
  </code></pre>
  <p><strong>fetchAlbum function</strong></p>
  <pre><code>export const fetchAlbum = (id) =&gt; async (dispatch) =&gt; {
    dispatch({
      type: FETCH_ALBUM_PENDING,
    })
    await saxios
      .get(`/albums/${id}`)
      .then((res) =&gt; {
        console.log(res.data)
        dispatch({
          type: FETCH_ALBUM_SUCCESS,
          payload: res.data,
        })
      })
  
      .catch((err) =&gt; {
        console.log(err)
        dispatch({
          type: FETCH_ALBUM_ERROR,
        })
      })
  }
  </code></pre>
  <p><strong>AlbumPage.js</strong></p>
  <pre><code>    function AlbumPage(props) {
        const album = useSelector((state) =&gt; state.album.currentAlbum) // getting called, before 
            the state updates
  
  ...
  
  return (
     &lt;img className=' w-full' src={album?.images[0]?.url} alt='..' /&gt;) // I am getting an undefined error 
  </code></pre>