I try to connect the state to the props in one of my components.
When mapPropsToState(state)
is called I can see that the state
is exactly what I want it to be. However, when I try to log the props I get an error stating:
Uncaught ReferenceError: props is not defined
at eval (eval at _getCardAndBalance (VM28 Home.bundle:NaN), <anonymous>:1:1)
at _getCardAndBalance (VM28 Home.bundle:58)
at Object.onPress (VM28 Home.bundle:235)
at TouchableText.touchableHandlePress (Text.js:242)
at TouchableText._performSideEffectsForTransition (Touchable.js:880)
at TouchableText._receiveSignal (Touchable.js:779)
at TouchableText.touchableHandleResponderRelease (Touchable.js:491)
at onResponderRelease (Text.js:194)
at Object.invokeGuardedCallbackImpl (ReactNativeRenderer-dev.js:286)
at invokeGuardedCallback (ReactNativeRenderer-dev.js:497)
I don't understand what am I doing wrong here and why it doesn't work.
This is my reducer:
const initialState = {}
const calReducer = (state = initialState, action:any) => {
console.log('CAL reducer with type ' + action.type + ' token ' + action.token)
switch(action.type) {
case CAL_SEND_OTP_TOKEN:
return {...state, sendOtpToken: action.token}
case CAL_VERIFY_OTP_TOKEN:
return {...state, verifyOtpToken: action.token}
case CAL_GET_PAY_ACCOUNT:
return {...state, payAccount: action.cards}
default:
return state
}
}
export default calReducer;
This is my component:
const Home = (props: any) => {
useEffect(() => {
console.log("Home --> useEffect() props are: " + props)
}, [])
return (
<View style={styles.MainContainer}>
<ScrollView
scrollEventThrottle={17}
contentContainerStyle={{ paddingTop: Header_Maximum_Height }}
onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: AnimatedHeaderValue } } }
], { useNativeDriver: false })}>
<Text style={styles.TextViewStyle} onPress={ (e) => _getCardAndBalance(e)}>GetCardsAndBalance</Text>
</ScrollView>
);
};
const mapDispatchToProps = (dispatch:any) => ({
setCalSendOtpToken: (token: string) => dispatch(setCalSendOtpToken(token)),
})
const mapStateToProps = (state:any) => {
console.log("Home: --> mapStateToProps(): state is: " + state)
return {
sendOtpToken: state.calReducer.sendOtpToken,
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Regardless of where I stop the code execution with a break point, the props are always not defined. What's wrong with that code?