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())} />
Advertisement
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.