title: Dispatching Action on the component button of React Native
body: <p>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.</p>
  <p>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.</p>
  <pre><code>//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 = () =&gt; {
      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 (
        &lt;ThemedView isFullView&gt;
          &lt;WebView
            source={{uri}}
            onNavigationStateChange={data =&gt; this.handleResponse(data)}
            style={styles.webView}
            onLoadStart={() =&gt; this.setState({loading: false})}
          /&gt;
          {loading &amp;&amp; (
            &lt;View style={styles.viewLoading}&gt;
              &lt;ActivityIndicator size=&quot;large&quot; color=&quot;black&quot;/&gt;
            &lt;/View&gt;
          )}
          &lt;Container style={styles.footer}&gt;
            &lt;Button
              title={t('cart:text_shopping')}
              onPress={this.handleContinue}
            /&gt;
          &lt;/Container&gt;
        &lt;/ThemedView&gt;
      );
    }
  }
  
  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);
  </code></pre>
  <p>In my <strong>actions.js</strong>, I have:</p>
  <pre><code>export function clearCart() {
    return {
      type: Actions.CLEAR_CART,
    };
  }
  </code></pre>