Redux state is not rendering properly

Question

Screen A --> Flatlist --> Card A --> QtyButton Component

Screen B --> Flatlist --> Card B --> QtyButton Component

Screen C --> Flatlist --> Card C --> QtyButton Component

Im passing array in flatlist and product object in card and then quantity from that object in QtyButton Component. Quantity is displayed in between minus and plus button.

And from QtyButton Component I'm updating qty of product object based on id in redux. And in Redux the state updates. I'm not retrieving quantity directly in QtyButton. But instead getting the quantity this way.
Flatlist --> card --> QtyButton

But I'm facing some weird problems.

Screen A --> Flatlist --> Card A --> QtyButton Component Qty doesn't update on run time. If it does its very slow and sluggish render

Screen B --> Flatlist --> Card A --> QtyButton Component Same Screen A scenario

Screen C --> Flatlist --> Card A --> QtyButton Component If products are more than two then quantity starts to render slowly.

And here Reducer

Cart = [];
   
export default (state = Cart, action) => {
  const {type, payload, error} = action;
  switch (type) {

   case ACTION_TYPES.CART:
    let cartItems = [...state.Cart];

    // Check if product already exist in cart

    if (cartItems.some(x => x.product_id === 
        payload.item.product_id)) {
         cartItems.map(item =>
          item.product_id === payload.item.product_id
        ? {...item, quantity: item.quantity + 1}
        : item,
    );
    } else {
     cartItems.push({...payload.item, quantity: 1});
    }
   return {...state, Cart: cartItems};

   case ACTION_TYPES.REMOVE_FROM_CART:
    return {
     ...state,
     Cart: state.Cart.filter(x => x.product_id !== payload.id),
   };

   case ACTION_TYPES.INCREMENT:
    return {
    ...state,
    Cart: state.Cart.map(x =>
      x.product_id === payload.id
        ? {...x, quantity: x.quantity + payload.quantity}
        : x,
    ),
  };

  case ACTION_TYPES.DECREMENT:
     return {
    ...state,
    Cart: state.Cart.map(x =>
            x.product_id === payload.id
              ? {...x, quantity: x.quantity - payload.quantity}
              : x,
          ),
  };

 default:
  return state;

}

Answer 1

So I figured out the problem.

I was updating the quantity in the nested component(QtyButton) and nowhere in Screen A and Screen B, I was not setting the updated quantity from redux store to API array.

Because initially, I was displaying the quantity from the Api array in Flat list and all the way down to the QtyButton component.

Call the api get data from API in state

After setting the state I needed to set the updated quantity from redux store to API state. This will check the quantity in redux, and whatever the quantity stored in redux will be set to API array.

let cart = props.cart;

  for (let i = 0; i < apiState.length; i++) {
    for (let j = 0; j < cart.length; j++) {
      if (apiState[i].id === cart [j].id) {
        apiState[i].quantity = cart [j].quantity;
      }
    }
  }

And then in render function

Flatlist
 data={apiState}
 //remaining flatlist stuff
/>

And Now I have the updated quantity.