title: Dispatching an action with argument drevied from store, fetched from external API
body: <p>Let's say I am making simple card game in <code>react</code> using <code>redux</code> with <code>redux-thunk</code> middleware</p>
  
  <p>I fetch the deck of cards from external API so my action creator looks like this:</p>
  
  <pre><code>const fetchDeck = {    
      return dispatch =&gt; {
          return fetch(https://some.api.with.cards/)
          .then(r =&gt; r.json())
          .then(data =&gt; dispatch({type:"FETCH_DECK", deck: data}))
      }
  }
  </code></pre>
  
  <p>And the corresponding reducer is:</p>
  
  <pre><code>const deck = (state=[], action) =&gt; {
      switch(action.type) {
          case "FETCH_DECK":
              return action.deck
  
          default:
              return state
      }
  }
  </code></pre>
  
  <p>The response from the API is an array of card objects like this one:</p>
  
  <pre><code>{
      name: "ACE",
      suit: "CLUBS"
  }
  </code></pre>
  
  <p>So now I want to add <code>hand</code> prop to the store. <code>hand</code> is an array  containing the cards which are already in the player's hand, so I created an action to allow to draw cards from <code>deck</code> to <code>hand</code>:</p>
  
  <pre><code>const drawCard = (deck, numberOfCards) =&gt; {
      return {
          type: "DRAW_CARD",
          deck
      }
  }
  </code></pre>
  
  <p>And this is the corresponding reducer:</p>
  
  <pre><code>const hand = (state=[], action) {
      switch(action.type) {
          case "DRAW_CARD":
              return [...state.slice(0,action.deck)
          default:
              return state
      }
  }
  </code></pre>
  
  <p>Finally I tried to implement this behaviour in the <code>&lt;Hand&gt;</code> component:</p>
  
  <pre><code>class Hand extends React.component {
      componentDidMount() {
          const { deck, drawCards } = this.props;
          drawCards(deck, 5)
      }
  }
  </code></pre>
  
  <p>But it did not work! The API request is not completed when <code>componentDidMount()</code> occurs. The only thing came into my mind to handle the problem was:</p>
  
  <pre><code>componentDidUpdate(prevProps) {
      if (prevProps.deck.length &gt; 0) {
          const { deck, drawCard } = this.props;
          drawCard(deck, 5)
      }
  }
  </code></pre>
  
  <p>Well this works, but I have the awkward feeling that this is not the proper way to do it. Moreover it would be necessary to use some more condtitions to prevent unexpected behaviour if applied this way.</p>
  
  <p>Is there a better way to handle my problem?</p>