Как добавить товар в корзину, используя реакционную систему?

Question

Я работаю в Android-приложении, которое подключается к WordPress woocommerce API, получает данные из WordPress и обрабатывает их. Все работает нормально, но я новичок в реакции-родной и не могу определить, как добавить товар в корзину. Также необходимо показать товар на странице корзины. Ниже я добавил свой код. Я надеюсь, что получит помощь.

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Platform,
    StatusBar,
    Image,
    TouchableHighlight, ToolbarAndroid,
    FlatList,
    ScrollView,TextInput,
    AsyncStorage

} from "react-native";
import HTMLView from 'react-native-htmlview';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { StackNavigator } from "react-navigation";
import {Icon, Button, Container, Header, Content,Left ,Right,Item,Input,Card,CardItem} from 'native-base'
import { Ionicons,FontAwesome } from '@expo/vector-icons'

import FAIcon from 'react-native-vector-icons/FontAwesome'
import * as CartAction from '../Actions/CartActions';

//Constant declaration
export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS'
export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED';
export const GET_CART_SUCCESS = 'GET_CART_SUCCESS';
export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS';
export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';

class Products extends Component {
    constructor(props) {
        super(props);
        this.state = { quantity: 1 };
    }

//decrease quantity working
    decreaseQuantity = () => {
        if(this.state.quantity <= 1) {
            return;
        } else {
            this.setState({
                quantity: this.state.quantity - 1
            });
        }
    }


//increase quantity working
    increaseQuantitiy = () => {
        this.setState({
            quantity: this.state.quantity - 1 + 2
        });
    }
//add to cart NOT WORKING
addToCart(product, quantity) {
        return (dispatch) => {
            const cartItem = {
                "id": product.id,
                "image": product.images[0].src,
                "name": product.name,
                "quantity": quantity
            }
            dispatch({
                type: types.ADD_TO_CART_SUCCESS,
                item: cartItem
            });
        }   
    }

//Sidemenu Icon
    static navigationOptions ={
        drawerIcon:(
                <FontAwesome name="home" size={30} color="black" />
            )
    }
//Render Block    
    render() {
        const product = this.props.navigation.state.params.product;
        return (
           <Container>
            //Product View
            <ScrollView>
            <Image style={styles.image} source={{ uri: product.images[0].src }} />
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>

            <Text style={{fontSize:18,fontWeight:'bold'}}>{product.name}</Text>
            <Text> ₹ {product.price}</Text>
          </View>
          <View style={{ display: 'flex', flexDirection: 'row', padding: 10, marginLeft: 20, marginBottom: 20 }}>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center',marginTop:10 }}>
                        <TouchableOpacity style={styles.decreaseButton} onPress={this.decreaseQuantity}>
                            <Text> - </Text>
                        </TouchableOpacity>
                        <TextInput
                            style={styles.input}
                            onChangeText={(quantity) => this.setState({ quantity })}
                            value={`${this.state.quantity}`}
                            keyboardType="numeric"
                        />
                        <TouchableOpacity style={styles.inceaseButton} onPress={this.increaseQuantitiy} >
                            <Text> + </Text>
                        </TouchableOpacity>
                    </View>


// ---------------- Adding to cart not working also need to show this product in cart page----------------
                    <TouchableOpacity style={styles.button} onPress={() => this.addToCart(product, this.state.quantity)} >
                        <Text style={{ color: '#fff' }}> ADD TO CART </Text>
                    </TouchableOpacity>
                </View>
                <HTMLView style={styles.html} value={product.description} />

            </ScrollView>
            </Container>
        )
    }
}
export default Products;