init

добавил стэйт для корзины

readme

@@ -0,0 +1 @@
+Нашёд баг и за useEfect итемка при изменение состояния рендерится 2 раза

src/components/main/Main.tsx

@@ -13,8 +13,6 @@ const Main: React.FC = () => {
     setValue(`${typePuzza} пиццы`);
   });
 
-  console.log("2");
-
   return (
     <main className="main">
       <h1>{value}</h1>
@@ -23,6 +21,7 @@ const Main: React.FC = () => {
           newSortPizza.map((pizza) => (
             <PizzaItem
               key={pizza.id}
+              id={pizza.id}
               url={pizza.url}
               name={pizza.name}
               price={pizza.price}

src/components/main/PizzaItem.tsx

@@ -1,12 +1,26 @@
 import React, { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
 import { valueFormat } from "../../utils/valueFormat";
-import { ISise, IType, Pizza, WidthSise } from "./pizzaTypes";
+import { ISise, IType, Pizza, PizzaState, WidthSise } from "./pizzaTypes";
+import { addItem } from "../../redux/buyPizza/buySlice";
 
-const PizzaItem: React.FC<Pizza> = ({ url, name, type, width, price }) => {
+const PizzaItem: React.FC<Pizza> = ({ url, name, type, width, price, id }) => {
   const [typePizza, setTypePizza] = useState<IType>({ ...type });
   const [widthPizza, setWidthPizza] = useState<ISise>({ ...width });
   const [typesPizza, setTypesPizza] = useState<number>(0);
   const [sisePizza, setSisePizza] = useState<number>(0);
+  const dispatch = useDispatch();
+  const pzType: WidthSise = newPizzaTypeSize(typePizza);
+  const pzSise: WidthSise = newPizzaTypeSize(widthPizza);
+
+  const pizzaState: PizzaState = {
+    id: id,
+    img: url,
+    name: name,
+    type: pzType.value,
+    sise: pzSise.value,
+    price: typesPizza + sisePizza + price,
+  };
 
   const typePyzzaHandler = (spanState: number) => {
     setTypePizza({
@@ -42,10 +56,14 @@ const PizzaItem: React.FC<Pizza> = ({ url, name, type, width, price }) => {
     });
   };
 
+  function newPizzaTypeSize(obj: ISise | IType) {
+    const truePrice = Object.entries(obj).map((i) => i);
+    return truePrice.find((i) => i[1].select === true)?.[1];
+  }
+
   useEffect(() => {
     newPrice();
   }, [widthPizza]);
-
   useEffect(() => {
     finallPrice();
   }, [typePizza]);
@@ -69,11 +87,6 @@ const PizzaItem: React.FC<Pizza> = ({ url, name, type, width, price }) => {
     }
   }
 
-  function newPizzaTypeSize(obj: ISise | IType) {
-    const truePrice = Object.entries(obj).map((i) => i);
-    return truePrice.find((i) => i[1].select === true)?.[1];
-  }
-
   return (
     <div className="item">
       <img src={url} alt="" />
@@ -116,7 +129,9 @@ const PizzaItem: React.FC<Pizza> = ({ url, name, type, width, price }) => {
       </div>
       <div className="price-block">
         <span>от {valueFormat(typesPizza + sisePizza + price)}</span>
-        <button>+ Добавить</button>
+        <button onClick={() => dispatch(addItem(pizzaState))}>
+          + Добавить
+        </button>
       </div>
     </div>
   );

src/components/main/pizzaTypes.ts

@@ -15,10 +15,19 @@ export interface WidthSise {
 }
 
 export interface Pizza {
-  id?: string;
+  id: string;
   url: string;
   name: string;
   price: number;
   type: IType;
   width: ISise;
 }
+
+export interface PizzaState {
+  id: string;
+  img: string;
+  name: string;
+  type: string;
+  sise: string;
+  price: number;
+}

src/redux/buyPizza/buySlice.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { PizzaState } from "../../components/main/pizzaTypes";
+
+interface Items {
+  buyItems: PizzaState[];
+}
+
+const initialState: Items = {
+  buyItems: [],
+};
+
+const buyState = createSlice({
+  name: "buyItems",
+  initialState,
+  reducers: {
+    addItem: (state, action: PayloadAction<PizzaState>) => {
+      state.buyItems.push(action.payload);
+    },
+  },
+});
+
+export const { addItem } = buyState.actions;
+export default buyState.reducer;

src/redux/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import sortSlice from "./sortPizza/sortSlice";
+import buyState from "./buyPizza/buySlice";
 
 export const store = configureStore({
   reducer: {
     newPizzaList: sortSlice,
+    buyBasket: buyState,
   },
 });