立即以最简单的方式学习 Zustand！

React 中的状态管理从未如此简单和轻量级！ Zustand，一个小而强大的状态管理库，它将让您作为开发人员的生活变得更加轻松。无论您厌倦了 Redux 的样板文件还是 Context API 的限制，Zustand 都可以拯救您。

在这篇文章中，我将介绍 Zustand 并分享我构建的入门项目，可在 GitHub 上获取。按照说明，只需几个步骤即可在 Next.js 项目中开始使用 Zustand！ ？

祖斯坦是什么？ ？

Zustand（德语“状态”）是 React 的简约状态管理库。它提供：

• 一个超级简单的API。
• 高性能，无需不必要的重新渲染。
• 易于理解的语法。
• 内置中间件支持（例如，用于持久状态）。

现在，让我们深入了解在您的 Next.js 项目中进行设置！

---

如何在您的 Next.js 项目中设置 Zustand

按照以下简单步骤将 Zustand 集成到您的 Next.js 应用程序中。

1.安装Zustand

运行以下命令来安装 Zustand：

npm i zustand

2. 创建存储文件夹

在 src 文件夹中，创建一个名为 store 的新文件夹。这将保存您所有的 Zustand 状态文件。

src/
  store/
    index.ts
    userStore.ts

---

3. 添加您的商店

userStore.ts

该商店将处理用户相关数据。

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（带有持久性）

该存储将处理计数器状态并将其保存在 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

此文件将导出所有商店以便于导入。

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

export { useUserStore, useCounterStore };

---

4. 在组件中使用Zustand

以下是如何在 Next.js 组件中使用 Zustand 存储的示例。

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

---

启动项目存储库？

此入门项目的完整代码可在 GitHub 上找到。它适合初学者，包含开始将 Zustand 与 Next.js 结合使用所需的一切。

克隆存储库并开始：

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

---

开始使用 Zustand 轻松管理您的状态。让我知道您的想法，或分享您自己的用例！ ？

以上是立即以最简单的方式学习 Zustand！的详细内容。更多信息请关注PHP中文网其他相关文章！