Connecting the components with React-Redux - react-native

Question

I'm using Expo React Native to develop a mobile application with the help of Redux, as well as React-Redux. With the React-Redux v6.0, I can connect the components with no issues, but I cannot get the state from the store with v6.0, although with Logger Middleware, my state is already updated. I cannot use it after extract it with mapStateToProps. So I decided to update React-Redux to v7.0 with the hope that the issues will be solved but I met a new one (Image below).
Issue Screen
This is my App.js
import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<LocationShow />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my LocationShow.js
import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';
class LocationShow extends React.Component {
componentDidMount = async () =>{
if (Platform.OS === 'android' && !Constants.isDevice){
console.log('Switch to the real device dawg!')
}else{
await this.props.getCurrentLocation();
}
}
render(){
return(
<View>
{this.props.isLoading ?
<ActivityIndicator/>:
<View>
<Text>Latitude:{this.props.latitude}</Text>
<Text>Longitude:{this.props.longitude}</Text>
</View>
}
</View>
)
}
}
const mapStateToProps = (state) =>{
return{
latitude: state.latitude,
longitude: state.longitude,
error: state.error,
isLoading: state.isLoading
}
}
const mapDispatchToProps = (dispatch) =>{
return {
getCurrentLocation: () =>
dispatch(locationActions.getCurrentLocation())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LocationShow);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
I read the changes of v7.0 with the connect() but Im quite new to React so I cannot get the idea of it.
Note: connect now uses React.memo() internally, which returns a special object rather than a function. Any code that assumed React components are only functions is wrong, and has been wrong since the release of React 16.6. If you were using PropTypes to check for valid component types, you should change from PropTypes.func to PropTypes.elementType instead.
Im running React:v16.8.6, React-Native:0.57.1, React-Redux: v7.0.2, Redux:v4.0.1
Hope someone can help me out, sorry if the code is too bad, as I said above, I'm quite new to React Native and Redux or other stuff.
Thank you!

Answer 1

After considering, I decied to go back to version 6.0.1 of react-redux. Now everything works like a champ. This thread can be closed right now.
By the way, the problem exactly comes from the new connect(), cause the react-redux team uses React.memo() and Hooks. But I still do not understand why it is the problem so if anyone has an idea about the changes of version 7.0.2 with the new connect(), feel free to explain.
Thank you guys!