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

En el artículo publicado anteriormente , implementamos un carrito de compras usando Unstated Next. En este artículo, aprenderemos cómo manejar los estados de más de un componente en una aplicación React usando Unstated Next.

Requisito previo:

• Este artículo es una continuación del anterior, consulte ese primero.
• Y siga todos los requisitos previos del artículo anterior.

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í:

Paso 1: Creación de varias tiendas

En la carpeta src/store, cree 3 tiendas más para el carrito, los usuarios y los artículos. La explicación detallada para crear una tienda dada en los artículos anteriores hace referencia a eso.

import { useState } from "react";
import { createContainer } from "unstated-next";
  
function useCart(initialState = []) {
    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 };
}
  
export default createContainer(useCart);

import { useState } from "react";
import { createContainer } from "unstated-next";
  
function useUser(initialState = []) {
    // Storing users using array 
    let [users, setUser] = useState(initialState); 
    let addUser = (_user) => {
        // Setting users list containing new user 
        setUser([...users, _user]); 
    };
    let deleteUser = (_user) => {
        // Filtering & deleting requested user 
        let newUser = users.filter((user) => user !== _user); 
        setUser(newUser);
    };
    return { users, addUser, deleteUser };
}
  
export default createContainer(useUser); 
// returns {Procider , useContainer}

import { useState } from "react";
import { createContainer } from "unstated-next";
  
function useItem(initialState = []) {
  
    // Storing items using array
    let [items, setItem] = useState(initialState);
    let addItem = (_item) => {
        // Setting items list containing new item
        setItem([...items, _item]); 
    };
    let deleteItem = (_item) => {
        // Filtering & deleting requested item
        let newItem = items.filter((item) => item !== _item); 
        setItem(newItem);
    };
    return { items, addItem, deleteItem };
}
  
// Returns {Procider , useContainer}
export default createContainer(useItem); 

Paso 2: Creación de múltiples componentes

A continuación, debemos crear 3 componentes simples para carrito , usuarios y elementos dentro de la carpeta src/components y conectarlos al archivo App.js.

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("");
    console.log(localItem, items);
    return (
        <div>
            <h1 className="title">Cart Items</h1>
            <ol className="items">
                {items.length > 0 ? (
                    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}
                onChange={(e) => setLocalItem(e.target.value)}
            />
            <input
                type="button"
                id="submitButton"
                value="Add"
                onClick={() => {
                    addItem(localItem);
                    setLocalItem("");
                }}
            />
        </div>
    );
}
  
export default Cart;

import React from "react";
  
function User() {
    return (
        <div
            style={{
                padding: "2vw",
                display: "flex",
                justifyContent: "left",
                width: "40vw",
                margin: "auto",
            }}
        >
            <div
                style={{
                    marginRight: "10px",
                }}
            >
                User
            </div>
            <input type={"text"} placeholder="user name"></input>
            <button>Add</button>
        </div>
    );
}
  
export default User;

import React from "react";
  
function Item() {
    return (
        <div
            style={{
                padding: "2vw",
                display: "flex",
                justifyContent: "left",
                width: "40vw",
                margin: "auto",
            }}
        >
            <div
                style={{
                    marginRight: "10px",
                }}
            >
                Item
            </div>
            <input type={"text"} placeholder="Item name"></input>
            <button>Add</button>
        </div>
    );
}
  
export default Item;

.title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 3rem;
    background-color: rgb(172, 172, 172);
    margin: 10vh 30vw;
    padding: 10px 22px;
    width: 40vw;
    border-radius: 5px;
}
.items {
    padding: 22px;
    width: 40vw;
    border-radius: 5px;
    margin: 10vh 30vw;
    margin-top: -9vh;
    background-color: rgb(221, 221, 171);
    font-size: 1.5rem;
    list-style-type: none;
}
.item-set {
    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
    width: 10vw;
    padding: 1vw;
}
.deleteButton {
    width: 10vw;
    height: 8vh;
    font-size: 1.2rem;
    border-radius: 5px;
    border: none;
    background-color: rgb(226, 148, 148);
}
.deleteButton:hover {
    background-color: rgb(211, 101, 101);
    color: rgb(255, 253, 253);
}
#newItem {
    padding: 2vh 8vw;
    outline: none;
    border: none;
    border-bottom: 2px solid rgb(172, 170, 170);
}
#submitButton {
    padding: 10px 40px;
    font-size: 1.2rem;
    border-radius: 5px;
    border: none;
    background-color: rgb(100, 214, 167);
    margin-left: 1vw;
}
#submitButton:active {
    background-color: rgb(43, 129, 93);
    color: wheat;
}

Paso 3: Mover proveedores al archivo provider.js: este paso es muy importante porque en el tutorial anterior agregamos Provider directamente al archivo App.js. así que cada vez que creamos una nueva tienda necesitamos eso. esto hace que el archivo App.js sea muy complejo; para evitar esto, agregamos todos los proveedores a un solo archivo y luego lo importamos al archivo App.js.

Para eso, necesitamos crear un archivo proveedor.js dentro de src/store y luego agregar el código a continuación.

import React from "react";
  
import useUser from "./user";
import useCart from "./cart";
import useItem from "./item";
  
// "props" will contain Child components
// it named as "childern"
const Provider = (props) => { 
    return (
        <useCart.Provider> // for cart
            <useItem.Provider> // for Item
                // for user
                <useUser.Provider>{props.children}</useUser.Provider> 
            </useItem.Provider>
        </useCart.Provider>
    );
};
  
export default Provider;

Entonces, cada vez que cree una nueva tienda, solo necesita agregarla aquí.

Ahora necesitamos importar Provider en App.js

import "./App.css";
import Cart from "./components/Cart";
import Item from "./components/Item";
import User from "./components/User";
import Provider from "./store/provider";
  
function App() {
    return (
        <div className="App">
            // it contains all 3 store providers
            <Provider>  
                <Cart />
                <User />
                <Item />
            </Provider>
        </div>
    );
}
  
export default App;

Paso 4: Tienda de consumo en componentes

Necesitamos importar useContainer a los componentes respectivos para consumir datos de la tienda. siga el siguiente código para importar datos y métodos de la tienda de consumo.

• src/components/User.jsx: Reemplace el código anterior con este

import React, { useState } from "react";
import useUser from "../store/user";
  
function User() {
    // Extracting field and methods
    const { users, addUser } = useUser.useContainer();
    // To capture user input
    const [localUser, setLocalUser] = useState(""); 
  
    return (
        <div
            style={{
                padding: "2vw",
                display: "flex",
                justifyContent: "left",
                width: "40vw",
                margin: "auto",
            }}
        >
            <div
                style={{
                    marginRight: "10px",
                    // Display items horizontally
                    display: "flex", 
                }}
            >
                {users.length > 0 &&
                    // Mapping through users array
                    users.map((user) => (  
                        <p key={user} style={{ marginRight: 12 }}>
                            {user}
                        </p>
  
                    ))}
            </div>
            <input
                type={"text"}
                value={localUser}
                // Updating user input
                onChange={(e) => setLocalUser(e.target.value)} 
                placeholder="user name"
            ></input>
            // Adding new users
            <button onClick={() => addUser(localUser)}>Add</button> 
        </div>
    );
}
  
export default User;

src/components/Item.jsx: Reemplace el código anterior con este

import React, { useState } from "react";
import useItem from "../store/item";
  
function Item() {
    const { items, addItem } = useItem.useContainer();
    const [localItem, setLocalItem] = useState("");
    return (
        <div
            style={{
                padding: "2vw",
                display: "flex",
                justifyContent: "left",
                width: "40vw",
                margin: "auto",
            }}
        >
            <div
                style={{
                    marginRight: "10px",
                    display: "flex",
                }}
            >
                {items.length > 0 &&
                    items.map((item) => (
                        <p key={item} style={{ marginRight: 12 }}>
                            {item}
                        </p>
  
                    ))}
            </div>
            <input
                type={"text"}
                value={localItem}
                onChange={(e) => setLocalItem(e.target.value)}
                placeholder="item name"
            ></input>
            <button onClick={() => addItem(localItem)}>
                Add
            </button>
        </div>
    );
}
  
export default Item;

Producción:

Conclusión: Manejamos con éxito más de una tienda al crear un archivo Provider.js separado. Espero que haya entendido todos los conceptos en caso de que necesite alguna aclaración, no dude en comentar a continuación.