Dispatching Action on the component button of React Native - react-native

Question

I am relatively new in React Native and I tried to read a lot of tutorials everywhere, still I don't get the proper solution on my issue. What is the proper way of calling the action clearCart() and at the same time navigate? I am having this error regarding the dispatch when pressed the button.
It seems I use componentDidMount() or useEffect() and separately call the clearCart() but I would gladly welcome any suggestions as it will be additional for me.
//other imports
import {clearCart} from 'src/modules/cart/actions';
//other imports..
class WebviewPayment extends Component {
constructor(props, context) {
super(props, context);
const {route} = props;
this.state = {
loading: true,
uri: route?.params?.uri ?? '',
};
}
handleContinue = () => {
const {navigation, dispatch} = this.props;
dispatch(clearCart());
navigation.pop();
navigation.navigate(homeTabs.shop);
};
//other components here
render() {
const {loading, uri} = this.state;
const {t} = this.props;
return (
<ThemedView isFullView>
<WebView
source={{uri}}
onNavigationStateChange={data => this.handleResponse(data)}
style={styles.webView}
onLoadStart={() => this.setState({loading: false})}
/>
{loading && (
<View style={styles.viewLoading}>
<ActivityIndicator size="large" color="black"/>
</View>
)}
<Container style={styles.footer}>
<Button
title={t('cart:text_shopping')}
onPress={this.handleContinue}
/>
</Container>
</ThemedView>
);
}
}
const styles = StyleSheet.create({
webView: {
flex: 1,
backgroundColor: 'transparent',
},
viewLoading: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
},
footer: {
marginVertical: margin.big,
},
});
WebviewPayment.propTypes = {};
export default withTranslation()(WebviewPayment);
In my actions.js, I have:
export function clearCart() {
return {
type: Actions.CLEAR_CART,
};
}

Answer 1

I got it working now and this might help others in case they come across with the same issue as mine. The working code is as follow:
//other imports
import {clearCart} from 'src/modules/cart/actions';
import {connect} from 'react-redux';
//other imports..
class WebviewPayment extends Component {
constructor(props, context) {
super(props, context);
const {route} = props;
this.state = {
loading: true,
uri: route?.params?.uri ?? '',
};
}
handleContinue = () => {
const {navigation} = this.props;
this.props.clearCart();
navigation.pop();
navigation.navigate(homeTabs.shop);
};
//other components here
render() {
const {loading, uri} = this.state;
const {t} = this.props;
return (
<ThemedView isFullView>
<WebView
source={{uri}}
onNavigationStateChange={data => this.handleResponse(data)}
style={styles.webView}
onLoadStart={() => this.setState({loading: false})}
/>
{loading && (
<View style={styles.viewLoading}>
<ActivityIndicator size="large" color="black"/>
</View>
)}
<Container style={styles.footer}>
<Button
title={t('cart:text_shopping')}
onPress={this.handleContinue}
/>
</Container>
</ThemedView>
);
}
}
const styles = StyleSheet.create({
webView: {
flex: 1,
backgroundColor: 'transparent',
},
viewLoading: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
},
footer: {
marginVertical: margin.big,
},
});
WebviewPayment.propTypes = {};
const mapDispatchToProps = (dispatch) => ({
clearCart: () => dispatch(clearCart()),
});
export default connect(
null,
mapDispatchToProps,
)(withTranslation()(WebviewPayment));
I used react-redux connect then mapDispatchToProps to pass the clearCart() into props.