Next.js 15 Fullstack (App Router + Server Actions) · درس

الحالة العامة باستخدام Zustand

ادمج Zustand، وهي مكتبة خفيفة لإدارة الحالة، لتوفير حل قوي ومرن للحالة العامة

الحالة العامة باستخدام Zustand درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Meet Zustand for Global State

Welcome to Zustand! It's a small, fast, and scalable state management solution for React and Next.js applications.

Unlike some other libraries, Zustand is known for its simplicity and minimal boilerplate, making it easy to learn and use.

Simple: Uses a simple API based on React hooks.
Fast: Optimized for performance, avoiding unnecessary re-renders.
Scalable: Works well for small apps and large, complex projects.

Why Global State Matters

In larger applications, you often need to share data across many components that aren't directly connected (e.g., a user's login status or shopping cart items).

Without global state, you might find yourself 'prop drilling' – passing props down through many layers of components, which can be messy and hard to maintain.

Global state libraries like Zustand solve this by providing a central place to store and manage data accessible from any component.

Install Zustand in Your Project

Getting started with Zustand is straightforward. You just need to install it using your preferred package manager.

Open your terminal in your Next.js project directory and run one of the following commands:

npm: npm install zustand
yarn: yarn add zustand
pnpm: pnpm add zustand

Once installed, you're ready to create your first store!

Build Your First Zustand Store

A Zustand store is created using the create function. This function takes a callback that defines your initial state and any functions (actions) to modify that state.

The set argument in the callback is used to update the store's state. Let's define a basic counter store:

import { create } from 'zustand';
import React from 'react';

// Define your store
const useCounterStore = create((set) => ({
  count: 0, // Initial state
}));

// A dummy component to make it runnable
function StoreDefined() {
  return <p>Zustand store created!</p>;
}

export default function App() {
  return <StoreDefined />;
}

Access Store State in React

Now that we have a store, let's learn how to read its state within a React component. Zustand provides a hook (generated from your store) that you can call directly.

You can also use a 'selector' function to pick out just the specific pieces of state you need, avoiding unnecessary re-renders.

import { create } from 'zustand';
import React from 'react';

const useCounterStore = create((set) => ({
  count: 0,
}));

// This component reads the 'count' from the store
function CountDisplay() {
  const count = useCounterStore((state) => state.count);
  return (
    <div>
      <h3>Current Count:</h3>
      <p>{count}</p>
    </div>
  );
}

export default function App() {
  return <CountDisplay />;
}

Actions to Modify Store State

Stores are not just for reading data; they also define the actions that can modify the state. These actions are functions within your create call that use the set argument.

Let's add increment and decrement actions to our counter store and use them with buttons in a component:

import { create } from 'zustand';
import React from 'react';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function CounterApp() {
  // Select both state and actions
  const { count, increment, decrement } = useCounterStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default function App() {
  return <CounterApp />;
}

Optimize with State Selectors

If your store holds many values, a component that only uses a small part of the state might still re-render when other, unrelated parts of the state change.

Zustand's selector pattern helps prevent this. By providing a selector function to useStore, your component will only re-render if the *selected* part of the state changes.

import { create } from 'zustand';
import React from 'react';

const useUserProfileStore = create((set) => ({
  username: "Coddy",
  email: "coddy@example.com",
  loggedIn: true,
  updateUsername: (name) => set({ username: name }),
}));

// This component only cares about the username
function UsernameDisplay() {
  // Select only 'username' for efficient rendering
  const username = useUserProfileStore((state) => state.username);
  return (
    <div>
      <p>Hello, {username}!</p>
    </div>
  );
}

export default function App() {
  return <UsernameDisplay />;
}

Handle Asynchronous Updates

Zustand actions can easily handle asynchronous operations, such as fetching data from an API. You simply perform your async logic within the action and then call set when the data is ready.

This allows you to manage loading states or update data after network requests complete. Here's an example simulating a delayed update:

import { create } from 'zustand';
import React from 'react';

const useLoadingStore = create((set) => ({
  isLoading: false,
  message: "",
  fetchData: async () => {
    set({ isLoading: true, message: "Loading..." });
    // Simulate an API call
    await new Promise((resolve) => setTimeout(resolve, 1500));
    set({ isLoading: false, message: "Data Loaded!" });
  },
}));

function DataFetcher() {
  const { isLoading, message, fetchData } = useLoadingStore();
  return (
    <div>
      <p>{message}</p>
      <button onClick={fetchData} disabled={isLoading}>
        {isLoading ? "Fetching..." : "Fetch Data"}
      </button>
    </div>
  );
}

export default function App() {
  return <DataFetcher />;
}

Structure Your Zustand Stores

For larger Next.js applications, it's good practice to organize your Zustand stores. Instead of defining all stores in one file, create a dedicated file for each store (e.g., stores/userStore.js, stores/cartStore.js).

This keeps your codebase clean, modular, and easier to navigate. You can then import and use these store hooks wherever needed.

Test Your Zustand Skills

Consider the following Zustand store definition:


import { create } from 'zustand';

const useSettingsStore = create((set) => ({
  theme: 'light',
  fontSize: 16,
  toggleTheme: () => set((state) => ({
    theme: state.theme === 'light' ? 'dark' : 'light',
  })),
  setFontSize: (size) => set({ fontSize: size }),
}));

If you call useSettingsStore((state) => state.theme) in a component, what will its initial value be?

Zustand: A Quick Review

Great job! You've successfully explored Zustand, a powerful and lightweight library for global state management in Next.js.

You learned how to:

Create a simple Zustand store.
Read state and dispatch actions in components.
Optimize performance using selectors.
Handle asynchronous updates.

Zustand's simplicity and flexibility make it an excellent choice for managing client-side global state in your applications. Keep practicing to master it!

الأسئلة الشائعة

هل درس «الحالة العامة باستخدام Zustand» مجاني؟

نعم — نص درس «الحالة العامة باستخدام Zustand» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

ماذا ستتعلم في «الحالة العامة باستخدام Zustand»؟

ادمج Zustand، وهي مكتبة خفيفة لإدارة الحالة، لتوفير حل قوي ومرن للحالة العامة تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الحالة العامة باستخدام Zustand»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)