การสร้าง Zustand Store แรกของคุณ

ยินดีต้อนรับ

Zustand คืออะไร

การติดตั้ง

npm install zustand

การสร้างสโตร์

import { create } from 'zustand';

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

การใช้สโตร์ในคอมโพเนนต์

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

ไวยากรณ์ของตัวเลือก

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

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

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

แอ็กชันแบบอะซิงโครนัส

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

การอัปเดตสถานะที่ซ้อนกัน

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

การอ่านสโตร์นอก React

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทเรียนถัดไป