React 中的狀態(tài)管理從未如此簡(jiǎn)單和輕量級(jí)！ Zustand，一個(gè)小而強(qiáng)大的狀態(tài)管理庫(kù)，它將讓您作為開(kāi)發(fā)人員的生活變得更加輕松。無(wú)論您厭倦了 Redux 的樣板文件還是 Context API 的限制，Zustand 都可以拯救您。

在這篇文章中，我將介紹 Zustand 并分享我構(gòu)建的入門(mén)項(xiàng)目，可在 GitHub 上獲取。按照說(shuō)明，只需幾個(gè)步驟即可在 Next.js 項(xiàng)目中開(kāi)始使用 Zustand！ ？

祖斯坦是什么？ ？

Zustand（德語(yǔ)“狀態(tài)”）是 React 的簡(jiǎn)約狀態(tài)管理庫(kù)。它提供：

• 一個(gè)超級(jí)簡(jiǎn)單的API。
• 高性能，無(wú)需不必要的重新渲染。
• 易于理解的語(yǔ)法。
• 內(nèi)置中間件支持（例如，用于持久狀態(tài)）。

現(xiàn)在，讓我們深入了解在您的 Next.js 項(xiàng)目中進(jìn)行設(shè)置！

---

如何在您的 Next.js 項(xiàng)目中設(shè)置 Zustand

按照以下簡(jiǎn)單步驟將 Zustand 集成到您的 Next.js 應(yīng)用程序中。

1.安裝Zustand

運(yùn)行以下命令來(lái)安裝 Zustand：

npm i zustand

2. 創(chuàng)建存儲(chǔ)文件夾

在 src 文件夾中，創(chuàng)建一個(gè)名為 store 的新文件夾。這將保存您所有的 Zustand 狀態(tài)文件。

src/
  store/
    index.ts
    userStore.ts

---

3. 添加您的商店

userStore.ts

該商店將處理用戶相關(guān)數(shù)據(jù)。

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

該存儲(chǔ)將處理計(jì)數(shù)器狀態(tài)并將其保存在 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

此文件將導(dǎo)出所有商店以便于導(dǎo)入。

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

export { useUserStore, useCounterStore };

---

4. 在組件中使用Zustand

以下是如何在 Next.js 組件中使用 Zustand 存儲(chǔ)的示例。

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

---

啟動(dòng)項(xiàng)目存儲(chǔ)庫(kù)？

此入門(mén)項(xiàng)目的完整代碼可在 GitHub 上找到。它適合初學(xué)者，包含開(kāi)始將 Zustand 與 Next.js 結(jié)合使用所需的一切。

克隆存儲(chǔ)庫(kù)并開(kāi)始：

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

---

開(kāi)始使用 Zustand 輕松管理您的狀態(tài)。讓我知道您的想法，或分享您自己的用例！ ？

以上是立即以最簡(jiǎn)單的方式學(xué)習(xí) Zustand！的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！