How to Build a Shopping Cart with Next.js and Zustand: State Management with TypeScript

The state is a fundamental part of any application developed with React, and it is essential to efficiently and effectively manage the state to create modern, high-performance applications. One of the popular libraries for state management in React is Zustand. In this tutorial, we will learn how to create and manage the state of an application using Zustand. We will develop a simple shopping cart using Next.js and Tailwind CSS. It is not necessary to have specific knowledge about Next.js as well as Tailwind CSS. Therefore, you will be able to follow the tutorial with React and CSS knowledge only. Also, we will use to make requests and retrieve fake JSON data, in particular, we will use dummyJSON https://dummyjson.com/products With that in mind let’s get started! What is Zustand? is a Hooks-based state management library that provides a simple and powerful solution for managing the state of an application globally. Zustand One of the main advantages of Zustand is that you can create state stores that are independent of components and can be shared and accessed from anywhere in your application, which means you don’t need to wrap your components in Providers. Setting Up We create a new Next.js project with the following command and follow the steps indicated. pnpm create-next-app 2. We install the dependencies that we will need in the project: pnpm install zustand 3. After that, we will create the following structure for the project: ... ├── src/ │ ├── components/ │ │ ├── minicart/ │ │ │ ├── Cart.tsx │ │ │ └── CartItem.tsx │ │ ├── products/ │ │ │ ├── ProductCart.tsx │ │ │ └── ProductList.tsx │ │ ├── ui/ │ │ │ ├── Drawer.tsx │ │ │ └── Header.tsx │ ├── data/ │ │ └── db-dummy.ts │ ├── hooks/ │ │ └── useFromStore.ts │ ├── pages/ │ │ ... │ │ └── index.js │ │ ... │ ├── store/ │ │ ├── useCartStore.ts │ │ └── useProductsStore.ts ... Creating the Store for the Cart Defining the required types. : types.d export interface Product { id: number title: string description: string price: number discountPercentage: number rating: number stock: number brand: string category: string thumbnail: string images: string[] quantity?: number } 2. Creating the store. : useCartStore import { create } from "zustand" import { Product } from "../types" // Define the interface of the Cart state interface State { cart: Product[] totalItems: number totalPrice: number } // Define the interface of the actions that can be performed in the Cart interface Actions { addToCart: (Item: Product) => void removeFromCart: (Item: Product) => void } // Initialize a default state const INITIAL_STATE: State = { cart: [], totalItems: 0, totalPrice: 0, } // Create the store with Zustand, combining the status interface and actions export const useCartStore = create ((set, get) => ({ cart: INITIAL_STATE.cart, totalItems: INITIAL_STATE.totalItems, totalPrice: INITIAL_STATE.totalPrice, addToCart: (product: Product) => { const cart = get().cart const cartItem = cart.find(item => item.id === product.id) // If the item already exists in the Cart, increase its quantity if (cartItem) { const updatedCart = cart.map(item => item.id === product.id ? { ...item, quantity: (item.quantity as number) + 1 } : item ) set(state => ({ cart: updatedCart, totalItems: state.totalItems + 1, totalPrice: state.totalPrice + product.price, })) } else { const updatedCart = [...cart, { ...product, quantity: 1 }] set(state => ({ cart: updatedCart, totalItems: state.totalItems + 1, totalPrice: state.totalPrice + product.price, })) } }, removeFromCart: (product: Product) => { set(state => ({ cart: state.cart.filter(item => item.id !== product.id), totalItems: state.totalItems - 1, totalPrice: state.totalPrice - product.price, })) }, })) In this code, we use function to create a store to manage the state of the shopping cart. The store has three properties in its state: create , which is an array of products of type product added to the cart. cart , which is the total number of products in the cart. totalItems , which is the total price of the products in the cart. totalPrice We also define two in the store: actions , which adds a product to the cart and updates the cart status. addToCart , which removes a product from the cart and updates the status accordingly. removeFromCart The store uses the function provided by Zustand to update the shopping cart state immutably, maintaining the integrity of the state at all times. You can use this store in your components to access and update the shopping cart status easily and efficiently. set Creation of components Initially, we will use data stored in a local file. Later, we will explore how to make use of fetch with Zustand to fetch data from an external API. We will create the necessary components for our application and show only the important parts of the code. However, if you wish to review the complete code, you can access the project repository that will be provided at the end of the tutorial. : index.tsx ... import { products } from "@/data/db-dummy" export default function Home() { const [isDrawerOpen, setIsDrawerOpen] = useState(false) const handleCartIconClick = () => { setIsDrawerOpen(!isDrawerOpen) } return ( <> ) } : Header.tsx ... import { useCartStore } from "../../store/useCartStore" export default function Header({ onCartIconClick }: Props) { // Get the cart status using the hook useCartStore, which gives us access to the cart status of the store. const totalItems = useFromStore(useCartStore, state => state.totalItems) return ( ... {totalItems} ... ) } : Cart.tsx ... import { useCartStore } from "../../store/useCartStore" export default function Cart() { // Get the cart status using the hook useCartStore, which gives us access to the cart status of the store. const cart = useCartStore(state => state.cart); // Calculate the total price of the products in the cart by adding the prices of each product multiplied by its quantity. const total = cart.reduce((acc, product) => acc + product.price * (product.quantity as number), 0); return ( {cart.map(product => ( ))} Total: ${total.toFixed(2)} ) } : CartItem.tsx ... import { useCartStore } from "../../store/useCartStore" ... export default function CartItem({ product }: Props) { // Recover the store action to remove items from the cart const removeFromCart = useCartStore(state => state.removeFromCart) return ( ... removeFromCart(product)} > ) } : ProductCard.tsx ... import { useCartStore } from "../../store/useCartStore" ... export default function ProductCard({ product }: Props) { // Recover the store action to add items to cart const addToCart = useCartStore(state => state.addToCart) return ( ... ... ${product.price} addToCart(product)} > Add to Cart ) } As we can see, to use the state of Zustand, we simply import the hook of the corresponding store and extract the states or actions that we want to use in our component. With these steps, we have created a basic shopping cart that works. However, if you wish, you can supplement it with more features according to your specific needs and requirements. Now, to further extend the functionality offered by Zustand, we are going to implement data fetching and use middleware to persist the state. This will allow us to ensure that items already in the cart are not lost, even if the page is reloaded or closed. Fetching with Zustand To get the from the API, we will create a new store, which will allow us to manage the retrieved data. products : useProductsStore import { create } from "zustand" import { Product } from "../types.d" interface State { products: Product[] isLoading: boolean error: any } interface Actions { fetchData: () => Promise } const INITIAL_STATE: State = { products: [], isLoading: false, error: null, } export const useProductsStore = create (set => ({ products: INITIAL_STATE.products, isLoading: INITIAL_STATE.isLoading, error: INITIAL_STATE.error, fetchData: async () => { try { set({ isLoading: true, error: null }) const response = await fetch("https://dummyjson.com/products") const data = await response.json() set({ products: data.products, isLoading: false }) } catch (error) { set({ error, isLoading: false }) } }, })) We will define two important interfaces: and . The interface will represent the state structure of the store, which includes a list of products, the loading status, and any errors that may occur during data loading. State Actions State The interface, on the other hand, will represent the actions that can be performed in the store. In this case, we will only have one action called , which will be used to load the product data from the API. Actions fetchData 2. Now, we need to update the index file to get the from the store. products : index.tsx ... import { useProductsStore } from "@/store/useProductsStore" export default function Home() { ... const { products, isLoading, error, fetchData } = useProductsStore() useEffect(() => { fetchData() }, [fetchData]) ... return ( <> ... {isLoading ? Loading... : } ) } Persisting state In Zustand, middleware can be used to persist the state in the browser’s local storage, allowing the state to be maintained even after the page is reloaded or the browser is closed. persist import { create } from "zustand" // Imoprt persist middleware import { persist } from "zustand/middleware" ... // Persistence middleware configuration export const useCartStore = create( persist ( (set, get) => ({ cart: INITIAL_STATE.cart, totalItems: INITIAL_STATE.totalItems, totalPrice: INITIAL_STATE.totalPrice, addToCart: (product: Product) => { ... }, removeFromCart: (product: Product) => { ... }, }), { name: "cart-storage", // unic name // getStorage: () => sessionStorage, (optional) by default the 'localStorage' is used } ) ) To enable persistence of state in the browser’s local storage, we use to wrap the store. We specify the storage name as , although by default uses the , so there is no need to explicitly declare it. persist cart-storage persist localStorage Done! Now we won’t lose the status of our shopping cart thanks to the persistence of the status. However, there is still one more thing we need to do to make sure it works properly. If we update the browser, we may encounter an error similar to this one: In short, this indicates that the state sent by the server does not match the state rendered on the client. Error: react-hydration-error | Next.js (nextjs.org) To quickly fix this error, we can follow these steps: For all components that use a persisted state in the , it is necessary to create a local state with . localStorage useState Use to set the local state with the store data. This way, the local state will be updated when mounting the component, avoiding inconsistencies. useEffect Use the local state of the created cart to render the items instead of directly using the state of the cart in the store. : Cart.tsx ... function Cart() { const [cartState, setCartState] = useState ([]) const cart = useCartStore(state => state.cart) const total = cartState.reduce((acc, product) => acc + product.price * (product.quantity as number), 0) useEffect(() => { setCartState(cart) }, [cart]) return ( ... {cartState.map(product => ( ))} ... ) } export default Cart With this, we have solved the problem. However, we can further improve this approach to simplify the process. 4. We can create a custom hook called . This hook will allow us to get the persisted state of the cart from the store in a simple and reusable way in several components. useFromStore : useFromStore.ts import { useEffect, useState } from "react" export default function useFromStore ( store: (callback: (state: T) => unknown) => unknown, storeCallback: (state: T) => F ) { const [state, setState] = useState () const stateOfStore = store(storeCallback) as F useEffect(() => { setState(stateOfStore) }, [stateOfStore]) return state } The hook receives two arguments: : A function that takes a as an argument and calls it with the state of the store. The callback must return a value that will be the state to be retrieved from the store. This function acts as an interface to access the state of the store in the component. store callback : A function that takes the state of the store as an argument and returns the specific value to be retrieved from the state. This callback is responsible for extracting the desired value from the state of the store. storeCallback With this custom hook, our components become cleaner and more reusable, as we can pass any persisted Zustand state as a parameter. This allows us to encapsulate the state fetching logic in a single place and use it in multiple components efficiently. : Cart.tsx ... import { useCartStore } from "../../stores/useCartStore" import useFromStore from "../../hooks/useFromStore" export default function Cart() { const cart = useFromStore(useCartStore, state => state.cart) let total = 0 if (cart) { total = cart.reduce((acc, product) => acc + product.price * (product.quantity as number), 0) } return ( Shopping Cart {cart?.map(product => ( ))} Total: ${total.toFixed(2)} ) } Versioning the state of Zustand Finally, it is important to note that if we update the store structure, such as adding new values, removing old values, or changing its type, we may face state inconsistency errors, especially if we already have persistent data in the localStorage. Fortunately, Zustand offers the option of using state versions to handle this kind of situation. Suppose we want to change the name of to : totalItems totalProducts ... export const useCartStore = create( persist ( (set, get) => ({ ... }), { name: "cart-storage", // getStorage: () => sessionStorage, (optional) by default the 'localStorage' is used version: 1, // State version number, migrate: (persistedState: unknown, version: number) => { if (version === 0) { // if the stored value is in version 0, we rename the field to the new name persistedState.totalProducts = persistedState.totalItems delete persistedState.totalItems } return persistedState as State & Actions }, } ) ) Providing a state number, any changes to the state structure will be handled properly in the storage persistence, avoiding inconsistency errors. version It is important to make sure to update the state version number whenever changes are made to the state structure to ensure the integrity of the data stored in . localStorage And that’s it! We have now created a functional shopping cart, managing its with Zustand. It’s worth mentioning that Zustand offers even more interesting features that you could explore. state See demo here Repo here Conclusion In conclusion, Zustand is a powerful and simple state management library for React applications. It allows you to create component-independent state stores, making it easy to access and update states efficiently throughout the application. I invite you to take a look at the documentation to discover more about the additional capabilities you can take advantage of with this powerful library. Read more: Setting up a GraphQL Server and Client in Next.js How to Create a Modern Skeleton Loader in React to Improve User Experience Want to connect with the Author? Love connecting with friends all around the world on . Twitter Also published . here