Zustand: State Management ที่ง่ายเหมือนปอกกล้วย

เคยปวดหัวกับการจัดการ State ใน React ไหมครับ? พอแอปเริ่มใหญ่ขึ้น การส่ง props ต่อกันไปหลาย ๆ ชั้น (ที่เราเรียกกันว่า "Prop Drilling") ก็เริ่มจะกลายเป็นฝันร้าย 😫

วันนี้เราจะมาทำความรู้จักกับ Zustand ฮีโร่ตัวจิ๋วที่จะมาช่วยให้การจัดการ State

Zustand คืออะไร?

Zustand เป็นไลบรารีสำหรับจัดการ State ที่มีขนาดเล็กมาก เบา และใช้งานง่ายสุด ๆ โดยยึดหลักการที่ว่า "Simple is beautiful" มันถูกสร้างขึ้นมาเพื่อแก้ปัญหา State Management โดยไม่ต้องมี Boilerplate (โค้ดที่ต้องเขียนซ้ำ ๆ) เยอะแยะเหมือนไลบรารีตัวอื่น ๆ

จุดเด่นของ Zustand ที่ทำให้หลายคนหลงรัก:

• โค้ดน้อยมาก: สร้าง Store และนำไปใช้ได้ในไม่กี่บรรทัด
• ไม่ต้องมี <Provider>: ไม่ต้องเอา Provider มาครอบแอปทั้งหมดเหมือน Context API
• ใช้ Hook เป็นหลัก: ใช้งานง่ายและเป็นธรรมชาติสำหรับชาว React
• เร็วสุด ๆ: re-render เฉพาะ Component ที่ใช้ State ส่วนนั้นจริง ๆ

มาลองสร้าง Counter Store ง่าย ๆ กัน

เพื่อให้เห็นภาพ เรามาสร้าง Store สำหรับนับเลขกันดีกว่าครับ

1. ติดตั้ง Zustand

เริ่มจากติดตั้งแพ็กเกจก่อนเลย

npm install zustand

2. สร้าง Store ของเรา

สร้างไฟล์ใหม่ชื่อ counterStore.js แล้วใส่โค้ดนี้เข้าไป

import { create } from 'zustand';
 
// create คือฟังก์ชันสำหรับสร้าง store ของเรา
export const useCounterStore = create((set) => ({
  // 1. State: ข้อมูลที่เราต้องการเก็บ
  count: 0,
 
  // 2. Actions: ฟังก์ชันสำหรับอัปเดต State
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

แค่นี้เองครับ! เราก็ได้ Store ที่พร้อมใช้งานแล้ว สังเกตว่าเรามีทั้ง State (count) และ Actions (increment, decrement) อยู่ในที่เดียวกันเลย ง่ายสุด ๆ

3. นำ Store ไปใช้ใน Component

ทีนี้เราจะเอา Store ไปใช้ใน Component ไหนก็ได้ โดยไม่ต้องส่ง props เลย

import { useCounterStore } from "../stores/counterStore";
 
export default function Counter() {
  // ดึง state และ action ออกมาจาก store เหมือนใช้ custom hook ทั่วไป
  const { count, increment, decrement, reset } = useCounterStore();
 
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>เพิ่ม +1</button>
      <button onClick={decrement}>ลด -1</button>
      <button onClick={reset}>รีเซ็ต</button>
    </div>
  );
}

import { useCounterStore } from "../stores/counterStore";
 
export default function DisplayCount() {
  // Component นี้ต้องการแค่ count ก็ดึงมาแค่ count
  // นี่คือเทคนิค "Selector" ที่ช่วยเพิ่ม Performance
  const count = useCounterStore((state) => state.count);
 
  return <p>ค่าปัจจุบันคือ: {count}</p>;
}

เห็นไหมครับว่า Component Counter และ DisplayCount สามารถเข้าถึง State เดียวกันได้โดยตรง ไม่ต้องรู้จักกัน และไม่ต้องส่ง props หากันเลย นี่แหละคือความสวยงามของ Zustand ครับ

เจาะลึกโค้ดนิดหน่อย

• create((set) => ({...})): เป็นหัวใจหลักของ Zustand เราจะกำหนด State เริ่มต้นและ Actions ไว้ข้างในนี้
• set(): เป็นฟังก์ชันสำหรับอัปเดต State มันจะทำการ merge state ให้อัตโนมัติ เราจึงไม่ต้องกังวลเรื่องการ copy state เก่าด้วย ...state ทุกครั้ง (ยกเว้นกรณีที่ค่าใหม่ต้องอ้างอิงจากค่าเก่า)
• Selector Function: ใน DisplayCount.jsx เราใช้ useCounterStore(state => state.count) วิธีนี้เรียกว่า "Selector" ครับ มันจะทำให้ Component นี้ re-render ก็ต่อเมื่อ ค่า count เปลี่ยนแปลงเท่านั้น! ถ้ามี State ตัวอื่นใน Store เปลี่ยนไป Component นี้ก็จะไม่ถูกกระทบเลย เป็นการ optimize performance ที่ง่ายและทรงพลังมาก

💡 พลังเสริมของ Zustand: Middleware

Zustand ยังมีของเล่นเจ๋ง ๆ อย่าง Middleware ที่ช่วยเพิ่มความสามารถให้ Store ของเราได้ง่าย ๆ เช่น:

• persist: ใช้สำหรับบันทึก State ลงใน localStorage หรือ sessionStorage แบบอัตโนมัติ แค่เพิ่มโค้ดไม่กี่ตัว สถานะของแอปเราก็จะถูกจดจำไว้แม้จะปิดเบราว์เซอร์ไปแล้ว
• devtools: ช่วยให้เราเชื่อมต่อกับ Redux DevTools Extension บนเบราว์เซอร์ได้ เพื่อดูการเปลี่ยนแปลงของ State ทั้งหมด

สรุป

Zustand เป็นอีกหนึ่งทางเลือกที่ยอดเยี่ยมสำหรับการจัดการ State ใน React โดยเฉพาะโปรเจกต์ขนาดเล็กถึงกลาง หรือใครก็ตามที่รู้สึกว่า Redux นั้นซับซ้อนเกินไป ด้วยความเรียบง่าย โค้ดน้อย และ Performance ที่ดี ทำให้มันเป็นเครื่องมือที่น่าลองมาก ๆ ครับ

ถ้าทุกคน กำลังมองหา State Management ที่ใช้ง่ายและไม่ปวดหัว ลองให้โอกาส Zustand ดูนะครับ 😎