Unstated Next – Lightweight State Management Library For ReactJS | Part – 2 | Shopping Cart

In the previous published article, we have explained everything you need to know about Unstated Next that recommends you to read that article if you haven’t. In this article, we are going to build a simple shopping cart application having the functionality to add, remove, update and display any item in the cart.

Prerequisite:

• Have basic knowledge about react state and props.
• Nodejs version should be >= 14.
• If you haven’t installed ReactJs globally, install it using the npm install -g create-react-app command.

Creating Simple Shopping Cart Application:

Step 1: Go to your preferred location on your PC and open the command prompt and type the below command to create a new react app.

npx create-react-app shopping-cart

Step 2: Once you successfully create React app. got to its directory by using the below command.

cd shopping-cart

Step 3: Create components folder for adding new components and store folder for creating global store using Unstated Next library. follow the below commands for creating the folders.

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

Step 4: Install a package called Unstated Next:

npm i unstated-next

Step 5: to verify everything is working or not, run the below command to run your application.

npm start

Project Structure: After this, your folder structure looks like this:

Example: Create Cart.jsx file inside src/components folder and add below code.

Cart.jsx

cart.css

App.js

• App.css

CSS

.App {
    text-align: center;
}

index.css

Now, Create a cart.js file inside the src/store folder. and then import useState (used as a state for the container ) from react and createContainer ( to generate store) from ‘unstated-next’ as shown below.

Javascript

// src/store/cart.js

import { useState } from "react";
import { createContainer } from "unstated-next";

Then, Create a useCart custom hook and pass it as input to 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);

• Above the code useCart function act as a custom hook, it takes initialState as an empty array ( providing initial state is optional).
• Then inside the function, we create a state with the help of useState it returns two members I) items(use to store cart items) and II) setItems (used to update cart items)
• then we have 2 methods for adding and deleting operations.
• In the last line, we create a container that provides two methods to access the store field and methods.
• store field – items
• store methods: addItem and deleteItem.

Now, Connecting store to front-end:

Step 1: Use Provider inside App.js file (because it is the root of components). without a provider, we can’t use any store members (filed and methods).

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 (
        <div className="App">
            <useCart.Provider>
                <Cart />
            </useCart.Provider>
        </div>
    );
}

export default App;

Step 2: inside src/components/Cart.jsx we need to consume all store members for the first we need to import useCart from store/cart.

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

• with the help of useCart.useContainer() we access all the store members.
• we create separate local states (localItems and setLocalItems) to handle the user inputs and pass values to store methods.

Output:

Conclusion: I hope you successfully built this application in case you need any clarification comment below. also, I have not implemented the update operation that you take as a challenge and implement it. In this next tutorial, I will explain to you how to use Unstated next in complex applications.