title: How do I handle multiple calls in one thunk function?
body: <p>I don’t know if everybody has read this: <a href="https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727" rel="noreferrer">https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727</a> but it basically teaches you how to handle <em>one</em> API requests with redux and redux thunk. It’s a great guide, but I wonder what if my React component is having more than just one get request to a server? Like this:</p>
  
  <pre><code>componentDidMount() {
      axios.get('http://localhost:3001/customers').then(res =&gt; {
        this.setState({
          res,
          customer: res.data
        })
      })
  
      axios.get('http://localhost:3001/events').then(res =&gt; {
        this.setState({
          res,
          event: res.data
        })
      })
  
      axios.get('http://localhost:3001/locks').then(res =&gt; {
        this.setState({
          res,
          lock: res.data
        })
      })
    }
  </code></pre>
  
  <p>I've been googling like crazy and I think I've made some progress, my action creator currently looks like this (don't know if its 100% correct):</p>
  
  <pre><code>const fetchData = () =&gt; async dispatch =&gt; {
    try {
      const customers = await axios.get(`${settings.hostname}/customers`)
        .then(res) =&gt; res.json()
  
      const events = await axios.get(`${settings.hostname}/events`)
        .then(res) =&gt; res.json()
  
      const locks = await axios.get(`${settings.hostname}/locks`)
        .then(res) =&gt; res.json()
  
      dispatch(setCustomers(customers))
      dispatch(setEvents(events))
      dispatch(setLocks(locks))
    } catch(err) =&gt; console.log('Error', err)
  }
  </code></pre>
  
  <p>So the next step is to create your reducers, I just made one:</p>
  
  <pre><code>export function events(state = initialState, action) {
      switch (action.type) {
          case 'EVENTS_FETCH_DATA_SUCCESS':
              return action.events;
          default:
              return state;
      }
  }
  </code></pre>
  
  <h3>Here's my problem:</h3>
  
  <p>I don't know how to handle this inside of my component now. If you follow the article ( <a href="https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727" rel="noreferrer">https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727</a>) it will end up like this:</p>
  
  <pre><code>componentDidMount() {
    this.props.fetchData('http://localhost:3001/locks')
  }
  </code></pre>
  
  <p>And</p>
  
  <pre><code>    Doors.propTypes = {
    fetchData: PropTypes.func.isRequired,
    doors: PropTypes.object.isRequired
  }
  
  const mapStateToProps = state =&gt; {
    return {
      doors: state.doors
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      fetchData: url =&gt; dispatch(doorsFetchData(url))
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Doors)
  </code></pre>
  
  <h3>My question</h3>
  
  <p>So my question is how should I handle my multiple get requests inside of my component now? Sorry if this questions seems lazy, but I really can't figure it out and I've really been trying to. </p>
  
  <p>All help is <strong>super</strong> appreciated!!</p>