TypeError: Cannot read property ‘qty’ of undefined. React Native Redux

I try to build an application called Cake Shop to sell and make Cakes, I have a problem reducing the number of cakes in my State, Here is my initial State

import { SELL_ONE_CAKE } from "./types";

const initialState = {
  cakes: [
    {
      id: 1,
      title: "Classic Cake",
      qty: 40,
      price: 15,
    },
    {
      id: 2,
      title: "Chocolate Cake",
      qty: 10,
      price: 20,
    },
    {
      id: 3,
      title: "Simple White Cake",
      qty: 40,
      price: 30,
    },
  ],
};

I think the problem is here in my Reducer, I want to reduce the quantity every time I dispatch the action.

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SELL_ONE_CAKE:
      return { ...state, cakes: state.cakes[0].qty - 1 };   // => I Think The problem is Here
    default:
      return state;
  }
};

This My Action

import { SELL_ONE_CAKE } from "./types";

export const sellOneCake = () => ({
  type: SELL_ONE_CAKE,
});

That’s how I call the action on my Screen.

      <Text>porfit: {Profits}</Text>
      <Text>Number Of Cakes: {cakes}</Text>
      <Button title="Sell One Cake" onPress={() => dispatch(sellOneCake())} />

Answer

Your current reducer line has a problem:

return { ...state, cakes: state.cakes[0].qty - 1 };

When this is run the first time, it sets cakes to a number — the quantity of the first item in the array – 1.

What you want to do instead is set cakes to a new array, with the quantity of that one item altered:

return { ...state,
  cakes: state.cakes.map((item, index) => {
   if (index == 0) {
     return {...item, qty: item.qty - 1};
   } else {
     return item;
   }
  })
}

In a real-world example, it’s unlikely your action would ever just modify the first item of the array in a hard-coded way. The more likely scenario would be to contain an ID to alter in your action and then just update the item with a matching ID.