title: React: Redux state from mapStateToProps not updating after dispatch is called
body: <p>When I dispatch an action from inside the component (i.e. a button is clicked), the state that is changed in the action is not immediately updated in the component's props. I am connecting the state and dispatch to the props through Redux's connect function. I did notice that it updates properly within the component's rendering.</p>
  
  <hr>
  
  <p><strong>Game.jsx</strong></p>
  
  <pre><code>const Game = ({ playerCards, add }) =&gt; {
    const stand = () =&gt; {};
  
    const hit = () =&gt; {
      add(getNextCard());
      console.log(playerCards); // Outputs the old state
    };
  
    return (
      &lt;div className="container--center"&gt;
        &lt;div className="container__inner--center"&gt;
          &lt;div className="game-wrapper"&gt;
            &lt;div className="game-wrapper__inner"&gt;
              &lt;Player /&gt;
  
              &lt;form className="player-actions"&gt;
                &lt;button type="button" onClick={stand}&gt;
                  Stand
                &lt;/button&gt;
                &lt;button type="button" onClick={hit}&gt;
                  Hit
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default connect(
    (state) =&gt; {
      return {
        playerCards: state.cards.player,
      };
    },
    (dispatch) =&gt; {
      return {
        add: (card) =&gt; dispatch(addPlayerCard(card)),
      };
    }
  )(Game);
  </code></pre>
  
  <p><strong>addPlayerCard action</strong></p>
  
  <pre><code>const addPlayerCard = (card = {}) =&gt; {
    return {
      type: ADD_PLAYER_CARD,
      card,
    };
  };
  </code></pre>