How do I handle multiple calls in one thunk function?

Viewed 11995

I don’t know if everybody has read this: https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727 but it basically teaches you how to handle one 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:

componentDidMount() {
    axios.get('http://localhost:3001/customers').then(res => {
      this.setState({
        res,
        customer: res.data
      })
    })

    axios.get('http://localhost:3001/events').then(res => {
      this.setState({
        res,
        event: res.data
      })
    })

    axios.get('http://localhost:3001/locks').then(res => {
      this.setState({
        res,
        lock: res.data
      })
    })
  }

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):

const fetchData = () => async dispatch => {
  try {
    const customers = await axios.get(`${settings.hostname}/customers`)
      .then(res) => res.json()

    const events = await axios.get(`${settings.hostname}/events`)
      .then(res) => res.json()

    const locks = await axios.get(`${settings.hostname}/locks`)
      .then(res) => res.json()

    dispatch(setCustomers(customers))
    dispatch(setEvents(events))
    dispatch(setLocks(locks))
  } catch(err) => console.log('Error', err)
}

So the next step is to create your reducers, I just made one:

export function events(state = initialState, action) {
    switch (action.type) {
        case 'EVENTS_FETCH_DATA_SUCCESS':
            return action.events;
        default:
            return state;
    }
}

Here's my problem:

I don't know how to handle this inside of my component now. If you follow the article ( https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-36723b3116b2-1502668727) it will end up like this:

componentDidMount() {
  this.props.fetchData('http://localhost:3001/locks')
}

And

    Doors.propTypes = {
  fetchData: PropTypes.func.isRequired,
  doors: PropTypes.object.isRequired
}

const mapStateToProps = state => {
  return {
    doors: state.doors
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchData: url => dispatch(doorsFetchData(url))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Doors)

My question

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.

All help is super appreciated!!

3 Answers
Related