Получение редуктора не является функциональной ошибкой, когда я нажимаю кнопку «Добавить в корзину» ⇐ CSS

[Гость]

Сейчас я создаю клон Amazon.

Привет, каждый раз, когда я нажимаю кнопку «Добавить в корзину», отображается реакция:

()

Поставщик состояний

import React, { createContext, useContext, useReducer } из «реагировать»; // Подготавливает dataLayerexport const StateContext = createContext(); // Оберните наше приложение и предоставьте Data Layerexport const StateProvider = ({reducer, InitialState, Children }) => ({children}< /StateContext.Provider>); // Извлекаем информацию из слоя данных.export const useStateValue = () => useContext(StateContext); редуктор

export const InitialState = { корзина: [], пользователь: ноль }; // Селектор экспортировать const getBasketTotal = (корзина) => корзина?.reduce((сумма, предмет) => предмет.цена + сумма, 0); const редуктор = (состояние, действие) => { console.log(действие); переключатель (action.type) { случай "ADD_TO_BASKET": возвращаться { ...состояние, корзина: [...state.basket, action.item], }; по умолчанию: возвратное состояние; } }; экспортировать редуктор по умолчанию; продукт

импортировать React из 'реагировать' импортировать "./Product.css" импортировать { useStateValue } из './StateProvider' function Product({id, title, image, цена, рейтинг}) { const [{корзина}, отправка] = useStateValue(); const addToBasket = () =>{ //отправляем элемент на уровень данных отправлять({ введите: "ADD_TO_BASKET", элемент: { заголовок: заголовок, изображение: изображение, цена: цена, рейтинг: рейтинг, }, }); }; возвращаться ( {title}

$ {цена


{Array(rating).fill().map((_, i)=> (

))} Добавить в корзину ) } экспортировать продукт по умолчанию
Когда я нажимаю кнопку, он должен отобразить реквизиты в консоли и отправить данные для хранения, но вместо этого просто отображается сообщение об ошибке. Я прочитал некоторые ранее заданные вопросы, и кто-то заметил, что это может быть потому, что я использую Babel? Любая помощь будет очень признательна