Siguiente no declarado: Biblioteca de gestión de estado ligero para ReactJS | Parte – 2 | Carrito de compras

En el artículo publicado anteriormente , hemos explicado todo lo que necesitas saber sobre Unstated Next que te recomienda leer ese artículo si no lo has hecho. En este artículo, vamos a crear una aplicación de carrito de compras simple que tenga la funcionalidad de agregar, eliminar, actualizar y mostrar cualquier artículo en el carrito.

Requisito previo:

• Tener conocimientos básicos sobre el estado de reacción y los accesorios.
• La versión de Nodejs debe ser >= 14.
• Si no ha instalado ReactJs globalmente, instálelo usando el comando npm install -g create-react-app .

Creación de una aplicación de carrito de compras simple:

Paso 1: Vaya a su ubicación preferida en su PC, abra el símbolo del sistema y escriba el siguiente comando para crear una nueva aplicación de reacción.

npx create-react-app shopping-cart

Paso 2: una vez que haya creado con éxito la aplicación React. llegó a su directorio usando el siguiente comando.

cd shopping-cart

Paso 3: cree una carpeta de componentes para agregar nuevos componentes y una carpeta de almacenamiento para crear un almacenamiento global utilizando la biblioteca Unstated Next. siga los siguientes comandos para crear las carpetas.

mkdir src/components src/store
or
mkdir src\components src\store

Paso 4: Instale un paquete llamado Unstated Next:

npm i unstated-next

Paso 5: para verificar que todo funcione o no, ejecute el siguiente comando para ejecutar su aplicación.

npm start

Estructura del proyecto: después de esto, la estructura de carpetas se ve así:

Ejemplo: Cree el archivo Cart.jsx dentro de la carpeta src/components y agregue el código a continuación.

Carrito.jsx

carro.css

Aplicación.js

• aplicación.css

.App {
    text-align: center;
}

índice.css

Ahora, cree un archivo cart.js dentro de la carpeta src/store. y luego importe useState (usado como un estado para el contenedor) desde react y createContainer (para generar la tienda) desde ‘unstated-next’ como se muestra a continuación.

// src/store/cart.js
 
import { useState } from "react";
import { createContainer } from "unstated-next";

Luego, cree un gancho personalizado useCart y páselo como entrada a createContainer.

// src/store/cart.js
 
function useCart(initialState = []) { //custom hook
    let [items, setItems] = useState(initialState);
    let addItem = (_item) => {
        setItems([...items, _item]);
    };
    let deleteItem = (_item) => {
        let newItem = items.filter((item) => item !== _item);
        setItems(newItem);
    };
    return { items, addItem, deleteItem };
}
 
// return {Provider , useContainer}
export default createContainer(useCart);

• Por encima del código , la función useCart actúa como un gancho personalizado, toma initialState como una array vacía (proporcionar el estado inicial es opcional).
• Luego, dentro de la función, creamos un estado con la ayuda de useState , devuelve dos miembros I) artículos (se usan para almacenar artículos del carrito) y II) setItems (se usan para actualizar artículos del carrito)
• entonces tenemos 2 métodos para agregar y eliminar operaciones.
• En la última línea, creamos un contenedor que proporciona dos métodos para acceder al campo y métodos de la tienda.
• campo de tienda – artículos
• almacenar métodos: addItem y deleteItem .

Ahora, conectando la tienda al front-end:

Paso 1: use el proveedor dentro del archivo App.js (porque es la raíz de los componentes). sin un proveedor, no podemos usar ningún miembro de la tienda (archivos y métodos).

// Inside src/App.js
// Replace previous code with this new code
 
import "./App.css";
import Cart from "./components/Cart";
import useCart from "./store/cart";
 
function App() {
    return (
        <div className="App">
            <useCart.Provider>
                <Cart />
            </useCart.Provider>
        </div>
    );
}
 
export default App;

Paso 2: dentro de src/components/Cart.jsx , necesitamos consumir todos los miembros de la tienda, primero necesitamos importar useCart desde store/cart .

// Replace previous code with this one
 
import React, { useState } from "react";
import "./cart.css";
import useCart from "../store/cart";
 
function Cart() {
 
    let { items, addItem, deleteItem } = useCart.useContainer();
    const [localItem, setLocalItem] = useState("");
 
    return (
        <div>
            <h1 className="title">Cart Items</h1>
            <ol className="items">
             
                // Conditionally displaying cart items
                {items.length > 0 ? ( 
                    // Mapping through all elements
                    items.map((item) => (
                        <div className="item-set">
                            <li className="item" key={item}>
                                {item}{" "}
                            </li>
                            <button className="deleteButton"
                                onClick={() => deleteItem(item)}>
                                Delete
                            </button>
                        </div>
                    ))
                ) : (
                     
 
<p>Cart is Empty</p>
 
 
                )}
            </ol>
            <input
                type="text"
                id="newItem"
                placeholder="Item name"
                value={localItem}
                // Handle user input
                onChange={(e) => setLocalItem(e.target.value)}
            />
            <input
                type="button"
                id="submitButton"
                value="Add"
                onClick={() => {
                        // Adding item to cart
                    addItem(localItem);
                    setLocalItem("");
                }}
            />
        </div>
    );
}
 
export default Cart;

• con la ayuda de useCart.useContainer() accedemos a todos los miembros de la tienda.
• creamos estados locales separados ( localItems y setLocalItems ) para manejar las entradas del usuario y pasar valores a los métodos de almacenamiento.

Producción:

Conclusión: espero que haya creado con éxito esta aplicación en caso de que necesite alguna aclaración, comente a continuación. además, no he implementado la operación de actualización que tomas como un desafío y la implementas. En este próximo tutorial, te explicaré cómo usar Unstated next en aplicaciones complejas.