Why are my props `undefined` when using redux and react Native? - redux

Question

I followed all the steps to create a store, but I when I try to access my props, they are undefined. I am using react Native , redux, and the connect component from 'react-redux'. Please help . I cant move forward.
this is where I connect props to state :
const mapStateToProps = (state) => ({
location : state.location
})
export default connect(mapStateToProps)(MapsScreen);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignContent:'center',
}
})
This is the component :
import LocationComp from './location'
import {connect} from 'react-redux';
import * as actions from '../../../redux/actions'
import MapView from 'react-native-maps';
export class MapsScreen extends React.Component {
state = {
isLoading : true
}
handleLanguage = (loco) => {
store.dispatch(actions.newLocation(loco))
this.setState({ isLoading: !this.state.isLoading })
console.log(store.getState())
}
render() {
return (
<View style = {{flex :1}}>
{this.state.isLoading === true ?
(
<LocationComp getLocation = {this.handleLanguage}/>
):(
<MapView
style={{flex:1}}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{console.log(this.props.location)}
</MapView>
)}
</View>
);
}
}
My store:
import {createStore, applyMiddleware} from 'redux'
import reducer from './reducer'
import {addTest} from './actions'
import thunk from 'redux-thunk'
export default store = createStore(reducer, applyMiddleware(thunk))
My reducer :
import {UPDATE_TEST, UPDATE_LOCATION,} from './actions'
import { combineReducers} from 'redux'
const merge = (prev, next ) => Object.assign({}, prev, next)
const hustleReducer = (state = [], action) => {
if(action.type === UPDATE_TEST) {
return [...state, action.payload]
}
return state
}
const locoReducer = (state = {}, action) => {
if(action.type === UPDATE_LOCATION){
return merge(state.location, action.payload)
}
return state
}
export default reducer = combineReducers({
hustleList : hustleReducer,
location : locoReducer,
})
my actions :
/// action creators
export const UPDATE_TEST= 'UPDATE_TEST'
export const UPDATE_LOCATION = 'UPDATE_LOCATION'
export const addTest = newContact => ({
type : UPDATE_TEST,
payload : newContact
})
export const newLocation = newLocation =>({
type : UPDATE_LOCATION,
payload : newLocation
})

Answer 1

You dont need merge, try return something like return {{...state.location}, {...action.payload}}