I am working on a react redux app with express framework .The app will show users 20 items according to their point of interest within 25 miles to their current location

SqlQueryStatement.txt

This is the code i have written to obtain the current user geolocation with react redux. I have this sql query to show 20 items according to their point of interest within 25 miles to their current location
```
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) )
* cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin(radians(lat)) ) ) 
AS distance
FROM shops
HAVING distance < 25
ORDER BY distance
LIMIT 0 , 20;
```

The main Challennge

The challenge is how to fetch the current user location at the frontend and feed it into the above sql query at the server side to perform the above sql operation on the items table. 
The table looks like this
id | name_of_item | latitude | longitude

This is my actions implemented with redux thunk

```
function requestGeolocation() {
  return function (dispatch) {
    navigator.geolocation.getCurrentPosition((position) => {
      dispatch({
        type: FETCHING_LOCATION,
        coords: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          inProgress: true,
        },
      });
    });
  };
}
function getGeolocation() {
  return function (dispatch) {
    if (!navigator.geolocation) {
      return dispatch({
        type: FETCHING_LOCATION
      });
    }
    return dispatch(requestGeolocation());
  };
}
export default getGeolocation;
```

This is my connected component

```
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import getGeolocation from '../client/actions/location_action';


class Location extends React.Component {

  componentDidMount() {
    this.props.onGelocation();
  }
  render() {
    return (
      <div>
        <div>Latitude is: <span>{this.props.location.latitude}</span></div>
        <div>Longitude is: <span>{this.props.location.longitude}</span></div>
      </div>
    );
  }
}


 // THe state here is the one set in the reducer .is from the store.not from the container.
const mapStateToProps = state =>
  // Location refers to the property name set in the reducer
   ({ location: state.location });

const mapDispatchToProps = dispatch => ({
  onGelocation: bindActionCreators(getGeolocation, dispatch)
});


// Here connect give LOcation component conatiner access to the state
export default connect(mapStateToProps, mapDispatchToProps)(Location);
```

I would appreciate your assistance on how to achieve this goal. Thanks a lot

This is my reducer

```
import { FETCHING_LOCATION } from '../actions/constants/actionTypes';

const INIT_STATE = {
  coords: {
    latitude: 0,
    longitude: 0,
    inProgress: false
  }
};

const LocationReducer = (state = INIT_STATE, action) => {
  switch (action.type) {
    case FETCHING_LOCATION:
      return Object.assign({}, state, action.coords);
    default:
      return state;
  }
};


export default LocationReducer;
```