aborting HTTP request in redux

Component.jsx

export default class Component extends React.Component {
  componentDidMount(){
    this.requests = [];
    this.requests.push(this.props.dispatch(fetchItem(startDate, endDate)));
  }
  
  componentWillUnmount() {
    this.requests.forEach(request => request.abort());
  }
}

fetchItem.js

export function fetchItem(startDate, endDate) {
  return (dispatch) => {
    dispatch({type: FETCH_METRICS_REQUEST});

    const APIPath = `/your/path/to/API`;
    const params = {startDate, endDate};
    const xhr = XHR.get(APIPath, params);
    
    trackXHR(xhr,
      (response) => {dispatch(fetchItemSuccess(response));},
      (error) => {dispatch(fetchItemFailure(error));});

    return {abort: () => xhr.abort()};
  };
}

trackXHR.js

export default (xhr, success, error) => {
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && 200 <= xhr.status && xhr.status <= 300) {
      success(JSON.parse(xhr.responseText));
    } else {
      if (xhr.status >= 400 && xhr.readyState === 4) {
        error(xhr.responseText);
      }
    }
  };
};

XHR.js

export default {
  get(APIPath, params) {
    let paramsStr = '';
    if (params) {
      paramsStr += '?';
      Object.keys(params).map((parameter) => {
        paramsStr += parameter + '=' + params[parameter] + '&';
      });

      paramsStr = paramsStr.substring(0, paramsStr.lastIndexOf('&'));
    }

    const xhr = new XMLHttpRequest();

    xhr.open('GET', APIPath + paramsStr, true);
    xhr.send();
    return xhr;
  }
};