passing current state from one screen to another using mapDispatchToProps - react-native

Question

I am working with react native maps and react native geocoding, I want to pass the current user location to the redux store using mapDispatchToProps, and to be able to use that location on a different map component. I am roughly a newbie in the redux world and I am a bit confused. kindly make corrections to my code below. I have tried using the example implemented on the documentation, however, I do not fully understand
Location 1
import React, { Component, Fragment } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import MapView from 'react-native-maps';
import Geocoder from 'react-native-geocoding';
Geocoder.init('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
const LONGITUDEDELTA = 0.0173;
const LATITUDEDELTA = 0.0174;
class Location1 extends Component {
static navigationOptions = {
header: null,
}
constructor(props) {
super(props);
this.state = {
region: null,
};
this.handleBack = this.handleBack.bind(this);
}
async componentDidMount() {
this.watchId = navigator.geolocation.watchPosition(
async ({ coords: { latitude, longitude } }) => {
const response = await Geocoder.from({ latitude, longitude });
const address = response.results[0].formatted_address;
const location = address.substring(0, address.indexOf(','));
this.setState({
location,
region: {
latitude,
longitude,
title: location,
latitudeDelta: LATITUDEDELTA,
longitudeDelta: LONGITUDEDELTA,
},
});
}, //sucesso
() => {}, //erro
{
timeout: 2000,
enableHighAccuracy: true,
maximumAge: 1000
}
);
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchId);
}
render() {
const { region } = this.state;
const { container, map, } = styles;
return (
<View style={container}>
<MapView
style={map}
region={region}
loadingEnabled
showsCompass
showsTraffic
showsBuildings
showsIndoors
>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
...StyleSheet.absoluteFill,
},
});
function mapDispatchToProps(dispatch) {
return {
region: () => {
dispatch(this.state.region);
},
location: () => {
dispatch(this.state.location); // address name
}
}
}
export default connect(mapDispatchToProps) (Location1);
Location2
import React, { Component, Fragment } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import MapView from 'react-native-maps';
import Geocoder from 'react-native-geocoding';
const LONGITUDEDELTA = 0.0173;
const LATITUDEDELTA = 0.0174;
class Location2 extends Component {
static navigationOptions = {
header: null,
}
constructor(props) {
super(props);
this.state = {
region: null,
};
}
render() {
const { container, map, } = styles;
return (
<View style={container}>
<MapView
style={map}
region={this.props.region}
loadingEnabled
showsCompass
showsTraffic
showsBuildings
showsIndoors
>
</MapView>
<View><Text>{this.props.location}</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
...StyleSheet.absoluteFill,
},
});
function mapStateToProps(state) {
return {
region: state.region,
location: state.location
}
}
export default connect(mapStateToProps) (Location2);
Reducer
import { CURRENT_LOCATION, LOCATION_NAME } from '../actions/types';
const initialState = {
region: null,
location: ''
};
const Reducer = (state = initialState, action) => {
switch (action.type) {
case CURRENT_LOCATION:
return {
...state,
region: action.region
};
case LOCATION_NAME:
return {
...state,
location: action.location
};
default:
return state;
}
};
export default Reducer;

Answer 1

Firstly in the first code here
function mapDispatchToProps(dispatch) {
return {
region: () => {
dispatch(this.state.region);
},
location: () => {
dispatch(this.state.location); // address name
}
}
}
export default connect(mapDispatchToProps) (Location1);
you need to pass the first argument to connect wich is the mapStateToProps but if you don't wanna use it pass null instead
export default connect(mapStateToProps, mapDispatchToProps)(Location1);
and also you dispatch actions in redux by passing and actionType(required) and a actionPayload(optional)
function mapDispatchToProps(dispatch) {
return {
region: (regionVal) => {
dispatch({type: 'LOCATION_NAME',payload: regionVal});
},
location: (locationVal) => {
dispatch({type: 'CURRENT_LOCATION',payload: locationVal}); // address name
}
}}
and call it inside the componentDidMount like
async componentDidMount() {
.
.
.
this.props.region(regionVal);
this.props.locatio(locationVal);
}
and in the reducer you should fix this
case CURRENT_LOCATION:
return {
...state,
region: action.region
};
to something like this
case CURRENT_LOCATION:
return {
...state,
region: action.payload // you should call the payload from the action
};