Next.js 15 Fullstack (App Router + Server Actions) · บทเรียน

สถานะส่วนกลางด้วย Zustand

ผสาน Zustand ซึ่งเป็นไลบรารีจัดการสถานะขนาดเล็ก เพื่อสร้างโซลูชันสถานะส่วนกลางที่ทรงพลังและยืดหยุ่น

บทเรียน 2 จาก 411 ขั้นตอน

สถานะส่วนกลางด้วย Zustand เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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!

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 22
บทเรียน: 88

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “สถานะส่วนกลางด้วย Zustand” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สถานะส่วนกลางด้วย Zustand” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Next.js 15 Fullstack (App Router + Server Actions)