title: Multiple axios get requests React-Redux
body: <p>I have a React-Redux application and would like to make concurrent API GET requests using axios. I am passing the url as a parameter to the action. How can I achieve it? Its a UI component with different data from API when BU is clicked and when BU is clicked.</p>
  
  <p><a href="https://i.stack.imgur.com/QI7Rg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QI7Rg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/zNHvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zNHvO.png" alt="enter image description here"></a></p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>import React, { PropTypes, Component } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { getParallelData } from '../../actions/index';
  
  class BUBGContainer extends Component {
    componentDidMount() {
      this.props.getParallelData('https://localhost:3001/reports/bu-list');
      this.props.getParallelData('https://localhost:3001/reports/bg-list');
    }
  
    updateTabs(i) {
      if (i === 1) {
        this.props.bgTab = true;
        this.props.buTab = false;
      } else {
        this.props.bgTab = false;
        this.props.buTab = true;
      }
    }
  
  
    render() {
      return (
        &lt;div className="col-md-3"&gt;
          &lt;label htmlFor="bu-bg-select"&gt;BU/BG:&lt;/label&gt;
          &lt;ul id="bu-bg-select-tabs" className="nav nav-tabs"&gt;
            &lt;li role="presentation" className={ 'active' } onClick={ this.updateTabs(0) }&gt;&lt;a&gt;BU&lt;/a&gt;&lt;/li&gt;
            &lt;li role="presentation" className={ 'active' } onClick={ this.updateTabs(1) }&gt;&lt;a&gt;BG&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;select name="bubgSelect" id="bu-bg-select" className="form-control"&gt;{_.map(this.props.items, (item, index) =&gt; &lt;option key={ index }&gt;{item}&lt;/option&gt;)}&lt;/select&gt;
          &lt;p className="help-block"&gt;Hold &lt;kbd&gt;ctrl&lt;/kbd&gt; and click to select multiple items&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    items: state.bubgFetching.data.rows,
  });
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({ getParallelData }, dispatch);
  
  export default connect(mapStateToProps, mapDispatchToProps)(BUBGContainer);
  </code></pre>
  
  <p>I am not sure how to write an action to achieve the same.</p>
  
  <p>My current action is </p>
  
  <pre><code>export const getParallelData = url =&gt; (dispatch) =&gt; {
    dispatch(requestGetData());
    return axios.get(url)
      .then((response) =&gt; {
        dispatch(receiveGetData(response.data));
      })
      .catch((response) =&gt; {
        dispatch(receiveGetError(response.data));
      });
  };
  
  const requestGetData = () =&gt; ({ type: ACTION_TYPES.REQ_GET_DATA });
  
  const receiveGetData = json =&gt; ({
    type: ACTION_TYPES.RECV_GET_DATA,
    data: json,
  });
  
  const receiveGetError = json =&gt; ({
    type: ACTION_TYPES.RECV_GET_ERROR,
    data: json,
  });
  </code></pre>
  
  <p>My current reducer is </p>
  
  <pre><code>import _ from 'lodash';
  import * as ACTION_TYPES from '../consts/action_types';
  
  const initialState = {
    isLoading: false,
    data: [],
    error: false,
  };
  
  export const isFetchingGet = (state = initialState, action) =&gt; {
    const newState = _.cloneDeep(state);
  
    switch (action.type) {
      case ACTION_TYPES.RECV_GET_ERROR: {
        newState.isLoading = false;
        newState.data = action.data;
        newState.error = true;
        return newState;
      }
  
      case ACTION_TYPES.RECV_GET_DATA: {
        newState.isLoading = false;
        newState.data = action.data;
        newState.error = false;
        return newState;
      }
  
      case ACTION_TYPES.REQ_GET_DATA: {
        newState.isLoading = true;
        newState.error = false;
        return newState;
      }
  
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>This <a href="https://stackoverflow.com/a/38529764/6731368">link</a> says how to use it but not sure how to implement it.</p>