即使 state 已更新，组件也不会重新渲染

Question

I am trying to build a simple cart application.

1. When the item is not in the cart, I am showing Add button -> on clicking add one item will be added to cart, - 1 + will show in the UI.
2. Now when I am clicking on plus(+) button, the store is getting updated, but the change is not getting reflected in UI, it is still showing - 1 + when I go to other tab and come back it is re-rendering so the new state is visible.
3. Now say I have - 10 +, when I will click - 5 times, then it will be removed from the cart as 0 items are there, this state is visible, but intermediate change when the only count of the item is changing is not rendering the UI.

My Selector code.

const cartItem: CartItem = useSelector((state) => {
    if (
      !state ||
      !state.cart ||
      !state.cart.items ||
      state.cart.items.length === 0
    ) {
      return {quantity: 0};
    }
    const result = state.cart.items.find(
      (item: CartItem) => item.itemId === inventory.id,
    );
    console.log('result = ' + JSON.stringify(result));
    return result;
  });

Complete component code.

function InventoryView({inventory, navigation}: IProps) {
  const cartItem: CartItem = useSelector((state) => {
    if (
      !state ||
      !state.cart ||
      !state.cart.items ||
      state.cart.items.length === 0
    ) {
      return {quantity: 0};
    }
    const result = state.cart.items.find(
      (item: CartItem) => item.itemId === inventory.id,
    );
    console.log(JSON.stringify('result = ' + JSON.stringify(result)));
    return result;
  });

  console.log('cart item =' + JSON.stringify(cartItem));
  const shouldShowAddButton = !cartItem || !cartItem.quantity;
  console.log('shouldShowAddButton' + shouldShowAddButton);
  const dispatch = useDispatch();
  return (
    <View style={[styles.cardView]}>
      <View>
        <Text style={styles.textMain}>{inventory.name}</Text>
        <View style={styles.costRow}>
          <Text style={styles.costText}>₹ {inventory.price}</Text>
          <Text style={styles.costUnitText}> {inventory.unit}</Text>
        </View>
      </View>
      {shouldShowAddButton && (
        <TouchableOpacity
          style={styles.addButton}
          onPress={() =>
            dispatch(
              addToCart({
                itemId: inventory.id,
                quantity: 1,
                price: inventory.price,
                name: inventory.name,
              }),
            )
          }>
          <Text style={styles.addText}>Add</Text>
        </TouchableOpacity>
      )}
      {!shouldShowAddButton && (
        <View style={{alignItems: 'flex-end'}}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <TouchableOpacity
              style={styles.buttonMinus}
              onPress={() => dispatch(decreaseQuantity(inventory.id))}>
              <Text>-</Text>
            </TouchableOpacity>
            <Text style={styles.addText}>{cartItem.quantity}</Text>
            <TouchableOpacity
              style={[styles.buttonMinus, styles.buttonPlus]}
              onPress={() => dispatch(increaseQuantity(inventory.id))}>
              <Text>+</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            style={[styles.deleteButton]}
            onPress={() => dispatch(removeFromCart(inventory.id))}>
            <Text style={styles.deleteButtonTextStyle}>Remove</Text>
            {/* <Image source={require('../assets/pngs/delete.png')} /> */}
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

My Reducer Code

import {CartItem} from '../models/CartItem';

export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const INCREASE_QUANTITY = 'INCREASE_QUANTITY';
export const DECREASE_QUANTITY = 'DECREASE_QUANTITY';

export interface CartReducerState {
  items: CartItem[];
}
export const cartInitialSate: CartReducerState = {
  items: [],
};

const cartReducer = (state = cartInitialSate, action: any) => {
  switch (action.type) {
    case ADD_TO_CART:
      console.log(JSON.stringify(action.data));
      const updatedState = {
        ...state,
        items: [...state.items, action.data],
      };
      console.log(JSON.stringify(updatedState));
      return updatedState;
    case REMOVE_FROM_CART:
      return {
        ...state,
        items: state.items.filter((item) => item.itemId !== action.data.id),
      };
    case INCREASE_QUANTITY:
      return {
        ...state,
        items: state.items.map((item) => {
          if (item.itemId === action.data.id) {
            item.quantity++;
          }
          return item;
        }),
      };
    case DECREASE_QUANTITY:
      return {
        ...state,
        items: state.items
          .map((item) => {
            if (item.itemId === action.data.id) {
              item.quantity--;
            }
            return item;
          })
          .filter((item) => item.quantity && item.quantity > 0),
      };
    default:
      return state;
  }
};
export {cartReducer};

UI will look like this

Answer 1

In the INCREASE_QUANTITY of Cart Reducer. Instead of returning the same object try returning a new one.

case INCREASE_QUANTITY:
  return {
    ...state,
    items: state.items.map((item) => {
      if (item.itemId === action.data.id) {
        item.quantity++;
        return {...item};
      }
      return item;
    }),
  };