Unstated Next – ReactJS 的轻量级状态管理库 |部分 – 2 |购物车

在之前发表的文章中，我们已经解释了您需要了解的有关 Unstated Next 的所有信息，如果您还没有，建议您阅读该文章。在本文中，我们将构建一个简单的购物车应用程序，该应用程序具有添加、删除、更新和显示购物车中任何商品的功能。

先决条件：

• 对 React state 和 props 有基本的了解。
• Nodejs 版本应该 >= 14。
• 如果您尚未全局安装 ReactJs，请使用npm install -g create-react-app命令安装它。

创建简单的购物车应用程序：

第 1 步：转到您 PC 上的首选位置并打开命令提示符并键入以下命令以创建一个新的 react 应用程序。

npx create-react-app shopping-cart

第 2 步：成功创建 React 应用程序后。使用以下命令进入其目录。

cd shopping-cart

第 3 步：创建components文件夹以添加新组件和store文件夹以使用 Unstated Next 库创建全局存储。按照以下命令创建文件夹。

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

第 4 步：安装一个名为 Unstated Next 的软件包：

npm i unstated-next

第 5 步：要验证一切是否正常，请运行以下命令来运行您的应用程序。

npm start

项目结构：在此之后，您的文件夹结构如下所示：

示例：在src/components文件夹中创建Cart.jsx文件并添加以下代码。

购物车.jsx

购物车.css

应用程序.js

• 应用程序.css

CSS

.App {
    text-align: center;
}

索引.css

现在，在 src/store 文件夹中创建一个 cart.js 文件。然后从 react 中导入useState （用作容器的状态）并从 'unstated-next' 中导入createContainer （以生成存储），如下所示。

Javascript

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

然后，创建一个 useCart 自定义钩子并将其作为输入传递给 createContainer。

Javascript

// 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);

• 上面的代码useCart函数作为一个自定义钩子，它将 initialState 作为一个空数组（提供初始状态是可选的）。
• 然后在函数内部，我们在useState的帮助下创建一个状态，它返回两个成员 I) items（用于存储购物车项目）和 II) setItems （用于更新购物车项目）
• 那么我们有 2 种添加和删除操作的方法。
• 在最后一行中，我们创建了一个容器，它提供了两种访问 store 字段和方法的方法。
• 商店字段 -物品
• 存储方法： addItem和deleteItem 。

现在，将商店连接到前端：

第 1 步：在App.js文件中使用 Provider（因为它是组件的根目录）。没有提供者，我们不能使用任何商店成员（归档和方法）。

Javascript

// 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 (
        

            
                
            
        
    );
}
 
export default App;

第 2 步：在src/components/Cart.jsx中，我们首先需要消耗所有商店成员，我们需要从store/cart导入useCart 。

Javascript

// 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 (
        

            
Cart Items
            

             
                // Conditionally displaying cart items
                {items.length > 0 ? ( 
                    // Mapping through all elements
                    items.map((item) => (
                        

                            

                                {item}{" "}
                            
                             deleteItem(item)}>
                                Delete
                            
                        
                    ))
                ) : (
                     
 
Cart is Empty
 
 
                )}
            
             setLocalItem(e.target.value)}
            />
             {
                        // Adding item to cart
                    addItem(localItem);
                    setLocalItem("");
                }}
            />
        
    );
}
 
export default Cart;

• 在useCart.useContainer()的帮助下，我们访问了所有的商店成员。
• 我们创建单独的本地状态（ localItems和setLocalItems ）来处理用户输入并将值传递给存储方法。

输出：

结论：如果您需要以下任何澄清评论，我希望您成功构建了此应用程序。另外，我还没有实施您认为具有挑战性的更新操作并实施它。在下一个教程中，我将向您解释如何在复杂的应用程序中使用 Unstated next。