最も簡単な方法で今すぐ 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 をインストールします:

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 ストアを使用する方法の例を次に示します。

ホーム.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 で入手できます。初心者向けで、Next.js で Zustand の使用を開始するために必要なものがすべて含まれています。

リポジトリのクローンを作成して開始します:

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

---

Zustand を使って簡単に状態の管理を始めましょう。ご意見をお聞かせください。または、ご自身の使用例も共有してください。 ?

以上が最も簡単な方法で今すぐ Zustand を学びましょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。