Frontend Academy · บทเรียน

Zustand สำหรับสถานะ React แบบเบา

สร้างคลังสถานะ Zustand ด้วย create() อ่านสถานะด้วย hook อัปเดตด้วย action และใช้งาน API ที่เรียบง่ายโดยไม่ต้องเขียนโค้ดประกอบจำนวนมาก

Zustand สำหรับสถานะ React แบบเบา เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Zustand คืออะไร

Zustand เป็นไลบรารีจัดการสถานะสำหรับ React ที่มีขนาดเล็กและทำงานรวดเร็ว พื้นที่การใช้งานทั้งหมดมีขนาดเล็กมาก เพียงสร้าง store แล้วใช้ฮุกเพื่ออ่านและอัปเดตข้อมูล ไม่ต้องมีตัวลดสถานะ ไม่ต้องมีแอ็กชัน และไม่ต้องมีโค้ดประกอบซ้ำซ้อน

การสร้าง Store

create() กำหนด store ที่มีสถานะและแอ็กชันเป็นออบเจ็กต์ธรรมดา ค่าที่คืนมาคือฮุก

import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

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

การอ่านสถานะจาก Store

เรียกใช้ฮุกพร้อมฟังก์ชันตัวเลือกเพื่อสมัครรับการเปลี่ยนแปลงเฉพาะส่วนของสถานะ คอมโพเนนต์จะเรนเดอร์ใหม่เฉพาะเมื่อส่วนที่เลือกมีการเปลี่ยนแปลง

function Counter() {
  const count = useCounterStore(state => state.count);
  return <p>Count: {count}</p>;
}

การอ่านแอ็กชัน

เลือกแอ็กชันด้วยวิธีเดียวกัน แอ็กชันไม่มีการเปลี่ยนแปลง ดังนั้นการเลือกแอ็กชันจึงไม่ทำให้เกิดการเรนเดอร์ใหม่เพิ่มเติม

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

การอัปเดตสถานะด้วย set()

ฟังก์ชัน set() จะรวมการอัปเดตแบบตื้น ๆ เช่นเดียวกับ setState ในคอมโพเนนต์คลาสของ React ให้ส่งฟังก์ชันเมื่อการอัปเดตขึ้นอยู่กับสถานะก่อนหน้า

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

แอ็กชันแบบอะซิงก์

แอ็กชันใน Zustand สามารถเป็นแบบอะซิงก์ได้ เพียงเรียก set() หลังจากรอการดำเนินการแบบอะซิงก์เสร็จสิ้น

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

Slices — การประกอบ Store ขนาดใหญ่

แบ่ง store ขนาดใหญ่ออกเป็น slice ต่าง ๆ ซึ่งเป็นออบเจ็กต์แยกกัน แล้วนำมารวมกัน รูปแบบของ Zustand ไม่ได้บังคับให้ใช้แนวคิด slice แต่เป็นวิธีที่เป็นระเบียบสำหรับจัดการ store ขนาดใหญ่

มิดเดิลแวร์: persist

มิดเดิลแวร์ persist จะบันทึกสถานะของ Zustand ลงใน localStorage และกู้คืนสถานะเมื่อโหลด โดยต้องตั้งค่าเพียงเล็กน้อย

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

มิดเดิลแวร์: devtools

เพิ่มการรองรับ Redux DevTools ให้กับ Zustand ด้วยมิดเดิลแวร์ devtools คุณจะได้ทั้งการบันทึกแอ็กชันอย่างครบถ้วนและการย้อนดูตามเวลา

Zustand เทียบกับ Redux Toolkit

Zustand มีขนาดเล็ก ไม่มีโค้ดประกอบซ้ำซ้อน ตั้งค่าได้รวดเร็ว และเหมาะอย่างยิ่งกับ app ขนาดเล็กถึงกลาง ส่วน RTK มีโครงสร้าง ขยายได้ดี มี DevTools ระดับแนวหน้า และเหมาะกับทีมขนาดใหญ่มากกว่า ทั้งสองแบบเป็นตัวเลือกที่ดี — ความเรียบง่ายของ Zustand ทำให้เหมาะกับ app ส่วนใหญ่

ตัวเลือกและประสิทธิภาพ

เลือกเฉพาะส่วนของสถานะที่เล็กที่สุดเท่าที่คอมโพเนนต์ต้องการเสมอ การเลือกออบเจ็กต์สถานะทั้งหมดจะทำให้เกิดการเรนเดอร์ใหม่เมื่อ store มีการเปลี่ยนแปลงใด ๆ ใช้ shallow จาก zustand/shallow สำหรับการเลือกหลายพร็อพเพอร์ตี

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

ตรวจสอบอย่างรวดเร็ว

คุณสร้าง store ของ Zustand ที่ app React ทั้งหมดสามารถใช้ได้อย่างไร

สรุป: Zustand

create() ใช้กำหนดสถานะและแอ็กชัน ค่าที่คืนมาคือฮุก เลือกเฉพาะส่วนของสถานะเพื่อหลีกเลี่ยงการเรนเดอร์ใหม่โดยไม่จำเป็น set() ใช้รวมการอัปเดตสถานะ แอ็กชันแบบอะซิงก์จะเรียก set() หลัง await ใช้มิดเดิลแวร์ persist สำหรับ localStorage และใช้ devtools เพื่อผสานรวมกับ Redux DevTools ไม่จำเป็นต้องใช้ Provider

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

บทเรียน “Zustand สำหรับสถานะ React แบบเบา” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Zustand สำหรับสถานะ React แบบเบา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Zustand สำหรับสถานะ React แบบเบา”

สร้างคลังสถานะ Zustand ด้วย create() อ่านสถานะด้วย hook อัปเดตด้วย action และใช้งาน API ที่เรียบง่ายโดยไม่ต้องเขียนโค้ดประกอบจำนวนมาก คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Zustand สำหรับสถานะ React แบบเบา” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

Redux Toolkit: createSlice และ configureStore
Zustand สำหรับสถานะ React แบบเบา
Pinia สำหรับ Vue: defineStore และ storeToRefs
ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด

← กลับไปที่ Frontend Academy