Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Корзина — неотъемлемая часть любого интернет-магазина. Это позволяет клиентам хранить и покупать продукты.

В приложении электронной коммерции Next.js вы можете использовать Context API и хук useReducer для создания корзины. API контекста упрощает совместное использование данных корзины между компонентами, в то время как useReducer обрабатывает состояние корзины.

Создание страницы продукта

В папке pages создайте новый файл с именем Product.jsx, отображающий один продукт.

экспортпо умолчаниюфункцияПродукт({идентификатор, имя, цена}) {
возвращаться (


{имя}</p>


{цена}</p>

Компонент продукта принимает идентификатор, имя и цену продукта и отображает их. Также есть кнопка «Добавить в корзину».

Когда товар уже добавлен в корзину, кнопка должна переключиться на кнопку «Удалить из корзины», а если товара нет в корзине, на странице должна отображаться кнопка «Добавить в корзину».

instagram viewer

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

Создание корзины покупок с помощью контекстного API

API контекста позволяет вам обмениваться данными между различными компонентами без необходимости вручную передавать реквизиты от родителя к дочернему. Этими компонентами могут быть панель навигации, страница сведений о продукте или страница оформления заказа.

Создайте новый файл с именем cartContext.js в папке с именем context и создайте контекст.

Импортировать {создатьконтекст} от"реагировать";
экспортконстанта КорзинаКонтекст = создатьКонтекст({
 предметы: [],
});

CartContext принимает массив элементов в качестве значения по умолчанию.

Затем создайте поставщика контекста. Поставщик контекста позволяет компонентам, использующим контекст, подписываться на изменения контекста.

В новую функцию с именем cartProvider добавьте следующее:

экспортконстанта Поставщик карт = ({ дети }) => {
возвращаться<КорзинаКонтекст. Провайдер>{дети}КорзинаКонтекст. Провайдер>;
};

Чтобы отслеживать товары в корзине, вы будете использовать хук useReducer.

Хук useReducer работает так же, как хук useState, за исключением того, что он помогает управлять более сложной логикой состояния. Он принимает функцию редуктора и начальное состояние. Он возвращает текущее состояние и функцию отправки, которая передает действие функции редуктора.

Создайте новую функцию CartReducer и добавьте редюсер.

константа корзина Редьюсер = (состояние, действие) => {
константа {тип, полезная нагрузка} = действие;
выключатель (тип) {
случай"ДОБАВЛЯТЬ":
возвращаться {
 ...состояние,
 предметы: полезная нагрузка.элементы,
 };


случай"УДАЛЯТЬ":
возвращаться {
 ...состояние,
 предметы: полезная нагрузка.элементы,
 };
по умолчанию:
бросатьновыйОшибка(«Нет случая для этого типа»);
 }
};

Функция редуктора содержит оператор switch, который обновляет состояние в зависимости от типа действия. Функция уменьшения корзины имеет действия «ДОБАВИТЬ» и «УДАЛИТЬ», которые добавляют в корзину и удаляют из корзины соответственно.

После создания функции редуктора используйте ее в хуке useReducer. Начните с создания функции CartProvider. Это функция, которая будет предоставлять контекст другим компонентам.

экспортконстанта Поставщик карт = ({дети}) => {
возвращаться<КорзинаКонтекст. Провайдер>{дети}КорзинаКонтекст. Провайдер>;
}

Затем создайте хук useReducer.

экспортконстанта Поставщик карт = ({ дети }) => {
константа [состояние, отправка] = useReducer (cartReducer, { предметы: [] });
возвращаться<КорзинаКонтекст. Провайдер>{дети}КорзинаКонтекст. Провайдер>;
};

Функция отправки отвечает за обновление состояния корзины, поэтому измените функцию CartProvider, включив в нее функции, которые отправляют товары в хук useReducer при обновлении корзины.

Импортировать { createContext, useReducer } от"реагировать";
экспортконстанта Поставщик карт = ({ дети }) => {
константа [состояние, отправка] = useReducer (cartReducer, initialState);


константа добавить в корзину = (продукт) => {
константа updatedCart = [...state.items, product];


 отправлять({
 тип: "ДОБАВЛЯТЬ",
 полезная нагрузка: {
 предметы: обновленная корзина,
 },
 });
 };


константа удалить из корзины = (идентификатор) => {
константа updatedCart = состояние.элементы.фильтр(
 (currentProduct) => currentProduct.id !== id
 );


 отправлять({
 тип: "УДАЛЯТЬ",
 полезная нагрузка: {
 предметы: обновленная корзина,
 },
 });
 };
возвращаться<КорзинаКонтекст. Провайдер>{дети}КорзинаКонтекст. Провайдер>;
};

Функция addToCart добавляет новый продукт к существующим продуктам и возвращает обновленные продукты в объекте полезной нагрузки функции отправки. Аналогичным образом функция removeFromCart отфильтровывает товар по идентификатору и возвращает обновленный список.

Вам также необходимо вернуть свойство value в поставщике CartContext.

экспортконстанта Поставщик карт = ({ дети }) => {
константа [состояние, отправка] = useReducer (cartReducer, {
 предметы: [],
 });
константа добавить в корзину = (продукт) => {};
константа удалить из корзины = (идентификатор) => {};


константа значение = {
 предметы: гос.предметы,
 добавить в корзину,
 удалить из корзины,
 };
возвращаться<КорзинаКонтекст. Провайдерценить={ценить}>{дети}КорзинаКонтекст. Провайдер>;
}

Свойство value потребляется через хук useContext.

Использование контекста корзины

Итак, вы создали контекст корзины и создали функцию useReducer, которая обновляет корзину. Далее вы будете использовать контекст корзины в компоненте продукта, используя хук useContext.

Начните с обертывания index.js, верхнего компонента, поставщиком контекста, чтобы сделать значения контекста доступными для всего приложения.

Импортировать {КартПровайдер} от"../контекст/контекст корзины";
функцияМое приложение({Компонент, pageProps}) {
возвращаться (


 </CartProvider>
 );
}
экспортпо умолчанию мое приложение;

Затем импортируйте хук useContext и поставщика контекста корзины в Product.js.

Импортировать {использоватьконтекст} от"реагировать"
Импортировать {Контекст корзины} от"../контекст/контекст корзины"
экспортпо умолчаниюфункцияПродукт() {
константа {items, addToCart, removeFromCart} = useContext (CartContext)
возвращаться (
 <>


{имя}</p>


{цена}</p>

Функция кнопки зависит от того, находится ли товар уже в корзине. Если товар есть в корзине, кнопка должна удалить его из корзины, а если товара еще нет в корзине, она должна его добавить. Это означает, что вы должны отслеживать состояние элемента, используя useEffect и useState. Код useEffect проверяет, находится ли элемент в корзине после рендеринга компонента, в то время как useState обновляет состояние элемента.

константа [существует, setExists] = useState(ЛОЖЬ);
использоватьЭффект(() => {
константа inCart = товары.найти((элемент) => идентификатор элемента.id);
если (в корзине) {
 установитьсуществует(истинный);
 } еще {
 установитьсуществует(ЛОЖЬ);
 } 
}, [элементы, идентификатор]);

Сейчас, использовать условный рендеринг чтобы показать кнопку на основе существующего состояния.

возвращаться (


{имя}</p>


{цена}</p>
 {
 существует
? <кнопкапо щелчку={() => removeFromCart (id)}>Удалить из корзиныкнопка>
: <кнопкапо щелчку={() => addToCart({id, name, price})}>Добавить в корзинукнопка>
 }
 </div>
)

Обратите внимание, что функции обработчика onClick — это функции removeFromCart и addToCart, определенные в поставщике контекста.

Добавление дополнительных функций в корзину

Вы узнали, как создать корзину с помощью контекстного API и хука useReducer.

Несмотря на то, что в этом руководстве рассматриваются только функции добавления и удаления, вы можете использовать те же концепции для добавления дополнительных функций, таких как настройка количества товаров в корзине. Важнейшим моментом является понимание контекстного API и того, как использовать хуки для обновления сведений о корзине.