Zustand for state management in React.js

State management becomes very crucial when it comes to build a robust React applications, and Zustand has emerged as a lightweight, elegant solution that simplifies the way we handle global state.

Table of contents#

What is Zustand?#

As said, Zustand is a small, fast and scalable status management solution. Its state management is centralized and action-based. Its core philosophy is to make state management straightforward and developer-friendly.

Advantages of using Zustand#

• Middleware and Persist
• Simple and Minimal API
• Performance Optimizations
• Async Actions

Quick Installation#

npm install zustand
# or
yarn add zustand
Copy

Once the library is installed, we need to create a folder /hooks and inside the folder we add a new file, I am creating use-cart.ts.

I am taking example of my ecommerce-store app where I have used zustand for state management.

Creating Store#

Zustand provide function to create store using create and set variables to certain function using set that can be activated using certain conditions.

Importing zustand

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
Copy

Here, use-cart.ts basically handles the card activity for the ecommerce app. First step would be to set the variables

import { Product } from "@/types";
interface CartProps {
    items: Product[];
    addItem: (data: Product) => void;
    removeItem: (id: string) => void;
    removeAll: () => void;
};
Copy

• addItems: (data: Product) => void is a function that add items to cart, takes a Product as an argument and returns nothing (void).
• removeItem: (id: string) => void is a function that removes item from cart using their id, takes id as an argument, returns nothing (void)
• removeAll: () => void; is a function that removes all item from cart, takes no argument and returns nothing (void).

Here, data is of type Product as in

export interface Product {
    id: string;
    name: string;
    price: string;
}
Copy

Now, we can create a store by using above variables and functions as

const useCart = create(
    // Store definition
    persist<CartProps>((set, get) => ({
        // Initial state
        items: [],

        // Method to add an item to the cart
        addItem: (data: Product) => {
            const currentItems = get().items;
            const existingItem = currentItems.find((item) => item.id === data.id);

            if(existingItem) {
                return toast("Item already in cart.")
            }

            set({ items: [...get().items, data] });
            toast.success("Item added to cart.")
        },

        // Method to remove a specific item from the cart
        removeItem: (id: string) => {
            set({ items: [...get().items.filter((item) => item.id !== id)] });
            toast.success("Item removed from the cart.");
        },

        // Method to clear all items from the cart
        removeAll: () => set({ items: [] }),
    }), 
    // Persistence configuration
    {
        name: "cart-storage",
        storage: createJSONStorage(() => localStorage)
    })
)
export default useCart;
Copy

Key Components#

Zustand Store Creation:
create() is a Zustand method to create a global state store. persist() is a middleware that allows saving the store’s state to local storage. set and get are used to modify and retrieve the current state of the variables.

const useCart = create(
    persist<CartProps>((set, get) => ({
    }))
)
Copy

Store State:
items: An array to store cart items by starting as an empty array []

Methods:

• addItem() - Checks if item already exists in cart, prevents duplicate items, adds new item to cart, shows a toast notification

addItem: (data: Product) => {
    const currentItems = get().items;
    ...
    set({ items: [...get().items, data] });
    ...
}
Copy

Here, current state of data is retrieved which of type Product using get. set is used to modify the state.

• removeItem() - Removes a specific item by its ID, shows a toast notification

removeItem: (id: string) => {
    set({ items: [...get().items.filter((item) => item.id !== id)] });
    ...
}
Copy

Again, set is used to remove the item from cart i.e localStorage using the id of product

• removeAll() - Clears entire cart

Persistence Configuration:

• name: "cart-storage" - Key used in local storage.

• createJSONStorage(() => localStorage) - Saves cart data to browser’s local storage This means cart items persist between page reloads

This is just an example, but the principle remain same.

Executing the action#

It can be easily imported and be used for state management in other components.

We can create an object using the hook that we created earlier and subject the variables though it for overall state-management

import useCart from "@/hooks/use-cart";
// creating object 
const cart = useCart();
Copy

Now, it can be used in action to provide the parameters.

function ProductComponent() {
  const { addItem } = useCart();
  
  return (
    <button onClick={() => addItem(product)}>
      Add to Cart
    </button>
  );
}

function CartComponent() {
  const { items, removeItem, removeAll } = useCart();
  
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => removeItem(item.id)}>Remove</button>
        </div>
      ))}
      <button onClick={removeAll}>Clear Cart</button>
    </div>
  );
}
Copy

This implementation provides a robust, globally accessible cart state management solution with local storage persistence and user-friendly notifications.

Conclusion#

Navigating the complexities of state management in React just got easier with Zustand. This innovative library cuts through the traditional complexity, offering developers an elegant and straightforward approach to handling global application states.

Thanks for joining me on this deep dive into Zustand. I hope this guide has demystified state management and shown you how powerful yet simple this library can be.