Geolocation - can't get latitude and longitude in React/Redux app - reactjs

Question

I have following action creator:
export const getLocation = () => {
const geolocation = navigator.geolocation;
const location = new Promise((resolve, reject) => {
if (!geolocation) {
reject(new Error('Not Supported'));
}
geolocation.getCurrentPosition((position) => {
resolve(position);
}, () => {
reject (new Error('Permission denied'));
});
});
return {
type: GET_LOCATION,
payload: location
}
};
And following reducer for GET_LOCATION type:
case GET_LOCATION: {
return {
...state,
location: {
latitude: action.location.coords.latitude,
longitude: action.location.coords.latitude,
}
}
}
I try to use this data in my component like so:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getLocation } from '../actions';
import { bindActionCreators } from 'redux';
class UserLocation extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.getLocation();
}
render() {
return (
<div>
<div><span>latitude:</span>{this.props.location.latitude}
</div>
<div><span>longitude:</span>{this.props.location.longitude} </div>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return bindActionCreators( { getLocation }, dispatch )
}
export default connect(null, mapDispatchToProps)(UserLocation);
But everytime when I load this component I get TypeError: Cannot read property 'latitude' of undefined
Can you please point me where I was wrong?

Answer 1

The geolocation data will be resolved asynchronously, and is not available the first time your component is rendered. You need to correctly handle the case where that data is not yet available, and there's several ways you can do that. Please see the article Watch Out for Undefined State for descriptions of how to handle data that is not available.

Answer 2

You should use componentWillReceiveProps to receive the returned data from dispatched action.
componentWillReceiveProps = (nextProps) => {
if (this.props.location.latitude !== nextProps.location.latitude) {
// You will have location object here that is returned from recuder
}
}
Check this alternative way to call geocoding to fetch lat and long in react with redux
https://medium.com/#eesh.t/auto-detect-location-react-component-using-google-geocoding-and-reverse-geocoding-in-autocomplete-66a269c59315

Answer 3

You're doing the request in componentWillMount() that it's before mount the component, but this doesn't not mean that the component will wait for the request end. Therefore you should put some validation in the render method like if(!this.props.location) return <div>Loading...</div>

Answer 4

I think I used too the example from the same Codepen as you, in it the author uses a very simplified version of a React Promise Middleware.
But suggest that you use a redux-promise-middleware so you can control how the promise will be resolved.
So you should import the middleware and include it in applyMiddleware when creating the Redux store:
import promiseMiddleware from 'redux-promise-middleware'
composeStoreWithMiddleware = applyMiddleware(
promiseMiddleware(),
)(createStore)
The promise that you're dispatching in your action creator must be handled in the reducer with a FULFILED promise suffix (there are another ways to do the same but you should be ok with this one, also I'm not a native English speaker, so watchout with typos in _FULFILLED).
case `${GET_LOCATION}_FULFILLED`:
return {
...state,
location: {
latitude: action.location.coords.latitude,
longitude: action.location.coords.latitude,
}
}
I use the location object from the render() method so you can use const mapStateToProps so you can use it from there.
const mapStateToProps = (state) => {
return {location: state.location};
};
Then at the render method of your component you can destructure your location object from the props:
render() {
const { location: { latitude, longitude } } = this.props;
return (
<div>
<div><span>latitude:</span>{latitude}</div>
<div><span>longitude:</span>{longitude}</div>
</div>
);