@AI_Helper, как подключить?


import { createContext, useContext, useReducer, useMemo, useCallback, memo } from "react";

const CartContext = createContext(null);

const cartReducer = (state, action) => {
switch (action.type) {
case "ADD_ITEM": {
const existing = state.items.find(i => i.id === action.payload.id);
if (existing) {
return {
...state,
items: state.items.map(i =>
i.id === action.payload.id? {...i, qty: i.qty + 1 } : i
)
};
}
return {...state, items: [...state.items, {...action.payload, qty: 1 }] };
}
case "REMOVE_ITEM":
return {...state, items: state.items.filter(i => i.id!== action.payload) };
case "UPDATE_QTY":
return {
...state,
items: state.items.map(i =>
i.id === action.payload.id? {...i, qty: action.payload.qty } : i
).filter(i => i.qty > 0)
};
case "REORDER_ITEMS":
return {...state, items: action.payload };
case "CLEAR_CART":
return {...state, items: [] };
default:
return state;
}
};

export const CartProvider = memo(({ children }) => {
const [state, dispatch] = useReducer(cartReducer, { items: [] });

const addItem = useCallback((item) => dispatch({ type: "ADD_ITEM", payload: item }), []);
const removeItem = useCallback((id) => dispatch({ type: "REMOVE_ITEM", payload: id }), []);
const updateQty = useCallback((id, qty) => dispatch({ type: "UPDATE_QTY", payload: { id, qty } }), []);
const reorderItems = useCallback((items) => dispatch({ type: "REORDER_ITEMS", payload: items }), []);
const clearCart = useCallback(() => dispatch({ type: "CLEAR_CART" }), []);

const totalPrice = useMemo(() =>
state.items.reduce((sum, i) => sum + i.price * i.qty, 0), [state.items]
);
const totalQty = useMemo(() =>
state.items.reduce((sum, i) => sum + i.qty, 0), [state.items]
);

const value = useMemo(() => ({
items: state.items,
totalPrice,
totalQty,
addItem,
removeItem,
updateQty,
reorderItems,
clearCart
}), [state.items, totalPrice, totalQty, addItem, removeItem, updateQty, reorderItems, clearCart]);

return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
});

export const useCart = () => {
const ctx = useContext(CartContext);
if (!ctx) throw new Error("useCart must be used within CartProvider");
return ctx;
};

ну бл*?

@Sniper, Чтобы подключить этот контекст Carter в ваш React приложение, нужно выполнить несколько шагов:

1. Создайте файл с именем CartProvider.js или подобным.
2. Вставьте туда код, который вы привели.
3. Импортируйте CartProvider в главном файле вашего приложения (например, App.js ).
4. Оберните все компоненты, которые должны использовать контекст Carter, кодом <CartProvider> .

Пример:


Теперь все компоненты, использующие useCart , будут иметь доступ к состоянию корзины

@AI_Helper, У меня от так

<CartProvider>
<App />
</CartProvider>

@Sniper, Понял. Вам нужно подключить контекст CartContext к компоненту App. Для этого используйте <CartProvider> и передайте ему значение items из вашего состояния. Например:



Также не забудьте создать компонент CartProvider , который будет использовать функцию useReducer для управления состоянием.