React Native Redux not updating Boolean value

Question

I created a Boolean state for my shopping app in which when a user clicks the buy button, it should set that state to true and display the cart total in a container, but it's not working.

Below is my code:

reducer:

 if (action.type === SHOW_CART) {
    return {
      ...state,
      show: action.showCart,
    };

const initialstate = {
  show: false,
}

That's my reducer with initial state :

export const showCart = () => {
  return {
    type: SHOW_CART,
    showCart: true,
  };
};

That's my action:

    <View style={styles.buy}>
         <Text
            onPress={() => {
            this.props.addToCart(item.id);
            this.props.showCart();
               }}
          >
          Buy Once
          </Text>
    </View>
const mapStateToProps = (state) => {
  return {
    items: state.clothes.jeans,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => dispatch(addToCart(id)),
    showCart: () => dispatch(showCart()),
  };
};

In this code I used a flat list, in the flat list I used onPress to show the cart container and to dispatch my action

App

 export default function App() {
  return (
    <>
      <Provider store={Store}>
        <NavigationContainer>
          <AppNavigation />
        </NavigationContainer>
        <ViewChart />
      </Provider>
    </>
  );
}

ViewCart.js

  <View>
        {this.props.show ? (
          <View style={styles.total}>
            <Text style={styles.totaltext}>Total:</Text>
            <Text style={styles.priceTotal}>{this.props.total}</Text>
            <View style={styles.onPress}>
              <Text
                style={styles.pressText}
                onPress={() => this.props.navigation.navigate("Cart")}
              >
                View Cart
              </Text>
            </View>
          </View>
        ) : null}
      </View>
const mapStateToProps = (state) => {
  return {
    total: state.clothes.total,
    show: state.clothes.show,
  };
};

export default connect(mapStateToProps)(ViewChart);

In App.js I added the conatiner of view cart, which should be displayed when user clicks buy and in view cart I'm getting error undefined is not an object (evaluating '_this.props.navigation.navigate')

Answer 1

Change

this.props.showCart;

to

this.props.showChart();