title: Dispatching Redux Thunks to re-render React Component
body: <p>I'm trying to implement a sports betting filter, but am getting stuck when trying to dispatch a thunk to re-render the page based on a sport-specific key that I pass into the thunk. I have a dropdown list that has click listeners that dispatch a handler in the parent component (GamesList). I'm noticing my action creator (gotKey) keeps returning the default key('americanfootball_ncaaf') even when clicking on the NFL list item in the DropdownList component. Any help or direction is much appreciated. Thanks!</p>
  
  <p>Redux Store </p>
  
  <pre><code>import axios from 'axios'
  require('../../secrets')
  
  const GOT_GAMES = 'GOT_GAMES'
  const GOT_MONEYLINES = 'GOT_MONEYLINES'
  const GOT_KEY = 'GOT_KEY'
  
  const gotGames = games =&gt; ({type: GOT_GAMES, games})
  const gotMoneyLines = games =&gt; ({type: GOT_MONEYLINES, games})
  const gotKey = key =&gt; ({type: GOT_KEY, key})
  
  const defaultSportKey = 'americanfootball_ncaaf'
  const apiKey = process.env.API_KEY
  
  export const getGames = (key = defaultSportKey) =&gt; async dispatch =&gt; {
    try {
      const {data} = await axios.get(
        `https://api.the-odds-api.com/v3/odds/?apiKey=${apiKey}&amp;sport=${key}&amp;region=us&amp;mkt=spreads`
      )
      dispatch(gotGames(data))
      dispatch(gotKey(key))
    } catch (error) {
      console.error(error)
    }
  }
  
  export const getMoneyLines = (key = defaultSportKey) =&gt; async dispatch =&gt; {
    try {
      const {data} = await axios.get(
        `https://api.the-odds-api.com/v3/odds/?apiKey=${apiKey}&amp;sport=${key}&amp;region=us&amp;mkt=h2h`
      )
      dispatch(gotMoneyLines(data))
      dispatch(gotKey(key))
    } catch (error) {
      console.error(error)
    }
  }
  
  const gamesState = {
    spreadGames: [],
    moneylineGames: [],
    sportKey: ''
  }
  
  const gamesReducer = (state = gamesState, action) =&gt; {
  //   console.log('action' + action)
    switch (action.type) {
      case GOT_GAMES:
        return {...state, spreadGames: action.games}
      case GOT_MONEYLINES:
        return {...state, moneylineGames: action.games}
      case GOT_KEY:
        return {...state, sportKey: action.key}
      default:
        return state
    }
  }
  
  export default gamesReducer
  </code></pre>
  
  <p>Main GamesList component</p>
  
  <pre><code>import React from 'react'
  import {connect} from 'react-redux'
  import {getGames, getMoneyLines} from '../store/games'
  import SingleGame from './SingleGame'
  import DropdownList from './DropdownList.js'
  
  class GamesList extends React.Component {
    constructor() {
      super()
      this.handler = this.handler.bind(this)
    }
  
    componentDidMount() {
      this.props.getGames()
      this.props.getMoneyLines()
    }
  
    handler(key) {
      this.props.getGames(key)
      this.props.getMoneyLines(key)
    }
  
    render() {
      // console.log(this.state)
      const spreadList = this.props.spreadGames.data
      const moneylineList = this.props.moneylineGames.data
      if (!spreadList || !moneylineList) {
        return &lt;div&gt;loading&lt;/div&gt;
      } else {
        return (
          &lt;div&gt;
            &lt;DropdownList handler={this.handler} /&gt;
            {spreadList.map((game, index) =&gt; (
                (Date.now().toString().slice(0, -3) &lt; game.commence_time) ? 
              &lt;div key={index}&gt;
                &lt;SingleGame
                  spreads={game.sites[0]}
                  homeTeam={game.home_team}
                  teams={game.teams}
                  timeStart={game.commence_time}
                  moneylineGame={moneylineList[index]}
                /&gt;
              &lt;/div&gt; : null
            ))}
          &lt;/div&gt;
        )
      }
    }
  }
  
  const mapStateToProps = state =&gt; ({
    spreadGames: state.games.spreadGames,
    moneylineGames: state.games.moneylineGames,
    sportKey: state.games.sportKey
  })
  
  const mapDispatchToProps = dispatch =&gt; ({
    getGames: () =&gt; dispatch(getGames()),
    getMoneyLines: () =&gt; dispatch(getMoneyLines())
  })
  
  export default connect(mapStateToProps, mapDispatchToProps)(GamesList)
  </code></pre>
  
  <p>DropdownList Component</p>
  
  <pre><code>import React from 'react'
  
  export default class DropdownList extends React.Component {
    constructor(props) {
      super()
      this.state = {
        listOpen: false
      }
      this.showList = this.showList.bind(this)
      this.hideList = this.showList.bind(this)
    }
  
    showList(event) {
      event.preventDefault()
      this.setState({listOpen: true}, () =&gt; {
        document.addEventListener('click', this.hideList)
      })
    }
  
    hideList() {
      this.setState({listOpen: false}, () =&gt; {
        document.addEventListener('click', this.hideList)
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div type="button" onClick={this.showList}&gt;
            Select A Sport
          &lt;/div&gt;
          {this.state.listOpen ? (
            &lt;ul&gt;
              &lt;li
                onClick={() =&gt; {
                  this.props.handler('americanfootball_nfl')
                }}
              &gt;
                NFL
              &lt;/li&gt;
              &lt;li
                onClick={() =&gt; {
                  this.props.handler('americanfootball_ncaaf')
                }}
              &gt;
                NCAA
              &lt;/li&gt;
            &lt;/ul&gt;
          ) : (
            &lt;li&gt;test&lt;/li&gt;
          )}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>