redux toolkit How to change the price when the variability of the product changes - react-redux

Question

There is a json file
{
"items": [
{ "id": "0", "imageUrl": "https://dodopizza.azureedge.net/static/Img/Products/f035c7f46c0844069722f2bb3ee9f113_584x584.jpeg", "title": "Пепперони Фреш с перцем", "types": [0, 1], "sizes": [26, 30, 40], "price": 803, "category": 0, "rating": 4 },
]
}
Pizza is loaded from the file, and all data is output to react
http://joxi.ru/krDaNEVSGRlpJm
Tell me please, how in redux toolkit to make the price of the product increase depending on the selected parameter sizes. That is, if the value 26 is selected, then you need to increase the amount by 100 rubles, if the size is 30, then by 200 rubles.
I tried to do it with various crutches, but I don't have enough knowledge
Here is the code where I get the pizzas
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
pizzas: [],
itemsCount: 0,
isLoading: true,
};
export const getItemsSlice = createSlice({
name: "items",
initialState,
reducers: {
setItems(state, action) {
state.pizzas = action.payload;
},
setItemsCount(state, action) {
state.itemsCount = action.payload;
},
setIsLoading(state, action) {
state.isLoading = action.payload;
},
},
});
export const { setItems, setItemsCount, setIsLoading } = getItemsSlice.actions;
export default getItemsSlice.reducer;
React output code
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { addPizzaInCart } from "../../../redux/slices/CartSlice";
import { typeName } from "../../../redux/slices/GetItemsSlice";
import styles from "./PizzaBlock.module.scss";
function PizzaBlock({ id, imageUrl, title, price, types, sizes }) {
const [activeType, setActiveType] = React.useState(0);
const [activeSize, setActiveSize] = React.useState(0);
const dispatch = useDispatch();
const itemInCart = useSelector((state) => state.cart.pizzasInCart.find((obj) => obj.id === id && obj.type === typeName[activeType] && obj.size === sizes[activeSize]));
const addedCount = itemInCart ? itemInCart.count : 0;
const pizza = {
id,
imageUrl,
title,
price,
type: typeName[activeType],
size: sizes[activeSize],
};
const onClickAddPizza = () => {
dispatch(addPizzaInCart(pizza));
};
const onChangeSize = (i) => {
setActiveSize(i);
};
return (
<div className={styles.item}>
<img className={styles.item__image} src={imageUrl} alt="Pizza" />
<Link to={`/product/${pizza.id}`} className={styles.item__title}>
{title}
</Link>
<div className={styles.item__selector}>
<ul>
{types.map((type, i) => (
<li className={activeType === i ? styles.active : ""} onClick={() => setActiveType(type)} key={i}>
{typeName[type]}
</li>
))}
</ul>
<ul>
{sizes.map((size, i) => (
<li className={activeSize === i ? styles.active : ""} onClick={() => onChangeSize(i)} key={i}>
{size} см.
</li>
))}
</ul>
</div>
<div className={styles.item__bottom}>
<div className={styles.item__price}>от {Math.trunc(pizza.price * (pizza.size / 100 + 1))} ₽</div>
<div className={styles.item__buttons}>
<button className={`${styles.button} ${styles.button_outline} ${styles.button_add}`} onClick={onClickAddPizza}>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z" fill="white" />
</svg>
<span>Добавить</span>
{addedCount > 0 && <i>{addedCount}</i>}
</button>
</div>
</div>
</div>
);
}
export default PizzaBlock;
There are items with sizes 26, 30 and 40. When I change the active size, that is, I press the button 26, 30 or 40, I need the price for pizza to automatically increase by 0, 100 and 200 rubles, depending on the size of the pizza. I tried using state to pass size parameters and already substitute the required amount in redux, but in this case problems appeared, the value of this state was applied to all pizzas at once, but only to the current one
Here Cart logic
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
totalPricePizzasInCart: 0,
totalCountPizzasInCart: 0,
pizzasInCart: [],
};
export const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addPizzaInCart(state, action) {
const findItem = state.pizzasInCart.find((obj) => {
return obj.id === action.payload.id && obj.type === action.payload.type && obj.size === action.payload.size;
});
if (findItem) {
findItem.count++;
} else {
state.pizzasInCart.push({
...action.payload,
count: 1,
});
}
state.totalPricePizzasInCart = state.pizzasInCart.reduce((sum, obj) => {
return Math.trunc(obj.price * (obj.size / 100 + 1)) * obj.count + sum;
}, 0);
state.totalCountPizzasInCart = state.pizzasInCart.reduce((count, obj) => {
return obj.count + count;
}, 0);
},
minusPizzaInCart(state, action) {
const findItem = state.pizzasInCart.find((obj) => {
return obj.id === action.payload.id && obj.type === action.payload.type && obj.size === action.payload.size;
});
if (findItem && findItem.count > 0) {
findItem.count--;
state.totalPricePizzasInCart = state.totalPricePizzasInCart - Math.trunc(findItem.price * (findItem.size / 100 + 1));
}
state.totalCountPizzasInCart = state.pizzasInCart.reduce((count, obj) => {
return obj.count + count;
}, 0);
},
removePizzaInCart(state, action) {
state.pizzasInCart = state.pizzasInCart.filter((obj) => {
return obj.id !== action.payload.id || obj.type !== action.payload.type || obj.size !== action.payload.size;
});
state.totalPricePizzasInCart = state.pizzasInCart.reduce((sum, obj) => {
return Math.trunc(obj.price * (obj.size / 100 + 1)) * obj.count + sum;
}, 0);
state.totalCountPizzasInCart = state.pizzasInCart.reduce((count, obj) => {
return obj.count + count;
}, 0);
},
clearPizzasInCart(state) {
state.pizzasInCart = [];
state.totalPricePizzasInCart = 0;
state.totalCountPizzasInCart = 0;
},
},
});
export const { addPizzaInCart, removePizzaInCart, minusPizzaInCart, clearPizzasInCart } = cartSlice.actions;
export default cartSlice.reducer;
github github.com/antonboec1994/reactPizza.git

Answer 1

Store :
import { configureStore, createSlice } from "#reduxjs/toolkit";
const initialState = {
basePrice: 100,
total: 0,
itemsCount: 0
};
export const getItemsSlice = createSlice({
name: "items",
initialState,
reducers: {
addToCart(state, action) {
console.log(action.payload);
state.itemsCount = action.payload;
state.total = state.itemsCount * state.basePrice;
}
}
});
export const { addToCart } = getItemsSlice.actions;
export const store = configureStore({
reducer: {
pizza: getItemsSlice.reducer
}
});
export default getItemsSlice.reducer;
Component :
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addToCart } from "../store/__counterStore__";
const PizzaComponent = () => {
const dispatch = useDispatch();
const storeData = useSelector((state) => state.pizza);
console.log(storeData);
const [itemCount, setItemCount] = React.useState(0);
const handleAdd = () => {
setItemCount(itemCount + 1);
dispatch(addToCart(itemCount));
};
return (
<div>
<button onClick={handleAdd}>Add 1 Pitzzza</button>
<h2>Cart Price</h2>
<div>{storeData.total}</div>
</div>
);
};
export default PizzaComponent;
I just updated price for one type of pitza, what you can do is you can updated price according to type of different pitzas, by setting dispatch different kind of payload of you can put locgic in your reducer.
I tried to make it simple, since purpose is to understand the folw and logic.
EDIT:
CODESANDBOX