Un carrito de compras es una parte esencial de cualquier sitio de comercio electrónico. Permite a los clientes almacenar y comprar productos.
En una aplicación de comercio electrónico Next.js, puede usar la API de contexto y el enlace useReducer para crear un carrito. La API de contexto simplifica el intercambio de datos del carrito entre componentes, mientras que useReducer maneja el estado del carrito.
Creación de la página del producto
En la carpeta de páginas, cree un nuevo archivo llamado Product.jsx que represente un solo producto.
exportarpor defectofunciónProducto({id, nombre, precio}) {
devolver (
{nombre}</p>
{precio}</p>
El componente de producto acepta el ID, el nombre y el precio de un producto y lo muestra. También tiene un botón "Agregar al carrito".
Cuando un producto ya se agregó al carrito, el botón debe cambiar a un botón "eliminar del carrito" y si un producto no está en el carrito, la página debe mostrar el botón "Agregar al carrito".
Para implementar esta funcionalidad, deberá realizar un seguimiento de los artículos en el carrito usando la API de contexto y el gancho useReducer.
Crear un carrito de compras usando la API de contexto
La API de contexto le permite compartir datos entre diferentes componentes sin tener que pasar accesorios manualmente de padre a hijo. Estos componentes pueden ser la barra de navegación, la página de detalles del producto o la página de pago.
Cree un nuevo archivo llamado cartContext.js en una carpeta llamada contexto y cree el contexto.
importar { crear contexto } de"reaccionar";
exportarconstante CartContext = createContext({
elementos: [],
});
CartContext toma una matriz de elementos como valor predeterminado.
A continuación, cree el proveedor de contexto. Un proveedor de contexto permite que los componentes que consumen el contexto se suscriban a los cambios de contexto.
En una nueva función llamada cartProvider, agregue lo siguiente:
exportarconstante ProveedorCarrito = ({ niños }) => {
devolver<CartContext. Proveedor>{niños}CartContext. Proveedor>;
};
Para realizar un seguimiento de los artículos en el carrito, utilizará el gancho useReducer.
El gancho useReducer funciona como el gancho useState excepto que ayuda a administrar una lógica de estado más compleja. Acepta una función reductora y el estado inicial. Devuelve el estado actual y una función de despacho que pasa una acción a la función reductora.
Cree una nueva función llamada CartReducer y agregue el reductor.
constante cartReducer = (estado, acción) => {
constante { tipo, carga útil } = acción;cambiar (tipo) {
caso"AGREGAR":
devolver {
...estado,
artículos: payload.items,
};caso"ELIMINAR":
devolver {
...estado,
artículos: payload.items,
};
por defecto:
tirarnuevoError("No hay caso para ese tipo");
}
};
La función reducer comprende una declaración de cambio que actualiza el estado según el tipo de acción. La función de reducción de carrito tiene acciones de "AGREGAR" y "ELIMINAR" que agregan al carrito y eliminan del carrito respectivamente.
Después de crear la función reducer, utilícela en el gancho useReducer. Comience creando la función CartProvider. Esta es la función que proporcionará el contexto a otros componentes.
exportarconstante ProveedorCarrito = ({niños}) => {
devolver<CartContext. Proveedor>{niños}CartContext. Proveedor>;
}
Luego, crea el enlace useReducer.
exportarconstante ProveedorCarrito = ({ niños }) => {
constante [estado, envío] = useReducer (cartReducer, { elementos: [] });
devolver<CartContext. Proveedor>{niños}CartContext. Proveedor>;
};
La función de envío es responsable de actualizar el estado del carrito, así que modifique la función CartProvider para incluir funciones que envíen productos al enlace useReducer cuando se actualice el carrito.
importar { crearContexto, usarReductor } de"reaccionar";exportarconstante ProveedorCarrito = ({ niños }) => {
constante [estado, envío] = useReducer (cartReducer, initialState);constante agregar al carrito = (producto) => {
constante carrito actualizado = [...estado.elementos, producto];despacho({
tipo: "AGREGAR",
carga útil: {
artículos: carrito actualizado,
},
});
};constante removeFromCart = (identificación) => {
constante carrito actualizado = estado.elementos.filtro(
(productoactual) => productoactual.id !== id
);despacho({
tipo: "ELIMINAR",
carga útil: {
artículos: carrito actualizado,
},
});
};
devolver<CartContext. Proveedor>{niños}CartContext. Proveedor>;
};
La función addToCart agrega el nuevo producto a los productos existentes y devuelve los productos actualizados en el objeto de carga útil de la función de envío. Asimismo, la función removeFromCart filtra el artículo por ID y devuelve la lista actualizada.
También debe devolver la propiedad de valor en el proveedor CartContext.
exportarconstante ProveedorCarrito = ({ niños }) => {
constante [estado, envío] = useReducer (cartReducer, {
elementos: [],
});constante agregar al carrito = (producto) => {};
constante removeFromCart = (identificación) => {};constante valor = {
elementos: estado.elementos,
añadir a la cesta,
eliminar del carrito,
};
devolver<CartContext. Proveedorvalor={valor}>{niños}CartContext. Proveedor>;
}
La propuesta de valor se consume a través del gancho useContext.
Consumo del contexto del carrito
Hasta ahora ha creado el contexto del carrito y ha creado una función useReducer que actualiza el carrito. A continuación, consumirá el contexto del carrito en el componente del producto mediante el gancho useContext.
Comience por envolver index.js, el componente superior, con el proveedor de contexto para que los valores de contexto estén disponibles en toda la aplicación.
importar { ProveedorCarrito } de"../contexto/cartContext";funciónMi aplicación({ Componente, accesorios de página }) {
devolver (
</CartProvider>
);
}
exportarpor defecto MiAplicación;
Luego importe el enlace useContext y el proveedor de contexto del carrito en Product.js
importar { usarContexto } de"reaccionar"
importar {Contexto del carrito} de"../contexto/cartContext"exportarpor defectofunciónProducto() {
constante {artículos, addToCart, removeFromCart} = useContext (CartContext)
devolver (
<>{nombre}</p>
{precio}</p>
La función del botón depende de si el artículo ya está en el carrito. Si existe un artículo en el carrito, el botón debe eliminarlo del carrito y si un artículo aún no está en el carrito, debe agregarlo. Esto significa que debe realizar un seguimiento del estado del elemento mediante useEffect y useState. El código useEffect verifica si el artículo está en el carrito después de que el componente se procesa mientras useState actualiza el estado del artículo.
constante [existe, setExists] = useState(FALSO);usarEfecto(() => {
constante enCarrito = items.find((artículo) => artículo.id id);
si (en el carrito) {
setExiste(verdadero);
} demás {
setExiste(FALSO);
}
}, [elementos, id]);
Ahora, usar representación condicional para mostrar el botón en función del estado existente.
devolver (
{nombre}</p>
{precio}</p>
{
existe
? <botónal hacer clic={() => removeFromCart (id)}>Eliminar del carritobotón>
: <botónal hacer clic={() => addToCart({id, nombre, precio})}>Agregar al carritobotón>
}
</div>
)
Tenga en cuenta que las funciones del controlador onClick son las funciones removeFromCart y addToCart definidas en el proveedor de contexto.
Agregar más funcionalidad al carrito
Aprendió a crear un carrito de compras usando la API de contexto y el enlace useReducer.
Aunque esta guía solo cubrió la funcionalidad de agregar y quitar, puede usar los mismos conceptos para agregar más funciones, como ajustar las cantidades de artículos del carrito. Lo crucial es comprender la API de contexto y cómo usar ganchos para actualizar los detalles del carrito.
