Learn Zustand Right Now in the Simplest Way!

Managing state in React has never been this simple and lightweight! Meet Zustand, a small but powerful state management library that will make your life as a developer much easier. Whether you're tired of Redux's boilerplate or Context API's limitations, Zustand is here to save the day.

In this post, I'll introduce Zustand and share a starter project I've built, available on GitHub. Follow along to get started with Zustand in a Next.js project in just a few steps! ?

What is Zustand? ?

Zustand (German for "state") is a minimalistic state management library for React. It offers:

• A super-simple API.
• High performance with no unnecessary re-renders.
• Easy-to-understand syntax.
• Built-in middleware support (e.g., for persisting state).

Now, let’s dive into setting it up in your Next.js project!

---

How to Set Up Zustand in Your Next.js Project

Follow these easy steps to integrate Zustand into your Next.js app.

1. Install Zustand

Run the following command to install Zustand:

npm i zustand

2. Create a Store Folder

Inside your src folder, create a new folder named store. This will hold all your Zustand state files.

src/
  store/
    index.ts
    userStore.ts

---

3. Add Your Stores

userStore.ts

This store will handle user-related data.

import { create } from "zustand";

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user: User | null) => set({ user }),
}));

counterStore.ts (with persist)

This store will handle a counter state and persist it in localStorage.

"use client";

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

interface ICounterStore {
  counter: number;
  increment : ()=> void;
  decrement : ()=> void;
  reset : ()=> void;
  getLatestCountDivided2: ()=> number;
}
export const useCounterStore = create<ICounterStore>()(
  persist(
    (set, get) => ({
      counter: 0,

      increment: () => set(state => ({ counter: state.counter + 1 })),
      decrement: () => set(state => ({ counter: state.counter - 1 })),
      reset: () => set({ counter: 0 }),
      getLatestCountDivided2: ()=> get().counter / 2,
    }),
    {
      name: "counter-store",
      storage: createJSONStorage(()=> localStorage),
    }
  )
);

index.ts

This file will export all the stores for easier imports.

import { useUserStore } from "./userStore";
import { useCounterStore } from "./counterStore";

export { useUserStore, useCounterStore };

---

4. Using Zustand in Components

Here’s an example of how to use Zustand stores in your Next.js components.

Home.tsx

"use client";
import { useCounterStore, useUserStore } from "@/store";
import Link from "next/link";

export default function Home() {
  // Access Zustand stores
  const userStore = useUserStore();
  const counterStore = useCounterStore();

  const handleAddUser = () => {
    userStore.setUser({ id: "1", name: "Joodi", email: "mail@example.com" });
  };

  return (
    <div className="">
      <div className="flex gap-2 p-2">
        <Link className="p-2 border" href="/">Home</Link>
        <Link className="p-2 border" href="/about">About</Link>
        <Link className="p-2 border" href="/contact">Contact</Link>
      </div>
      <h1>Hello</h1>
      <h1>User: {userStore.user?.email}</h1>
      <button
        className="bg-blue-500 rounded-md p-2 text-white"
        onClick={handleAddUser}
      >
        Add User
      </button>

      <br />
      <h1>Counter: {counterStore.counter}</h1>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.increment}>
        Increment
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.decrement}>
        Decrement
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.reset}>
        Reset
      </button>
    </div>
  );
}

---

Starter Project Repository ?

The full code for this starter project is available on GitHub. It’s beginner-friendly and includes everything you need to start using Zustand with Next.js.

Clone the repository and get started:

git clone https://github.com/MiladJoodi/Zustand_Starter_Project.git
cd Zustand_Starter_Project
npm install
npm run dev

---

Start managing your state effortlessly with Zustand. Let me know what you think, or share your own use cases! ?

The above is the detailed content of Learn Zustand Right Now in the Simplest Way!. For more information, please follow other related articles on the PHP Chinese website!