ร้านค้าเบาน้อย เช่น Zustand และ Jotai แตกต่างจาก Redux อย่างไร

Question

IT Interview Practice · Accepted Answer

**Zustand** และ **Jotai** คือไลบรารีสเตตขั้นต่ำที่ทำให้เกิดสเตตส่วนกลางด้วย boilerplate ที่น้อยกว่า Redux มากนั้น และมี **subscription ที่เลือกได้** ในตัวเพื่อหลีกเลี่ยงการ re-render ที่ไม่จำเป็น พวกเขาใช้โมเดลทางความคิดที่แตกต่างกัน: Zustand คือร้านค้าเดียว Jotai คือแบบ atomic ## Zustand — ร้านค้าที่ใช้ hook อย่างง่าย ```jsx import { create } from "zustand"; // define a store: state + the actions that update it, all in one place const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // no actions/reducers/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — re-renders only when count changes const increment = useStore((s) => s.increment); return ; } ``` ไม่มี provider ไม่มี action ไม่มี reducer ไม่มี dispatch — คุณเรียกใช้ฟังก์ชัน setter โดยตรง selector (`s => s.count`) หมายความว่า component จะ re-render *เฉพาะ* เมื่อส่วนนั้นเปลี่ยน ## Jotai — สเตตแบบ atomic ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a tiny piece of state const doubleAtom = atom((get) => get(countAtom) * 2); // derived atom function Counter() { const [count, setCount] = useAtom(countAtom); // works like useState, but GLOBAL return ; } ``` Jotai สร้างสเตตจากเล็ก ๆ **atoms** ที่คุณประกอบขึ้น; component จะ subscribe บน atoms ที่เฉพาะเจาะจง และ re-render เฉพาะเมื่อ atoms นั้นเปลี่ยน ## เปรียบเทียบกับ Redux ```text Redux (classic) Zustand Jotai Boilerplate high (actions/reducers) very low very low Provider required none minimal Mental model single store + dispatch single store, hooks atomic (useState-like) Re-renders needs selectors selector built-in per-atom (granular) Devtools excellent good good Bundle size larger tiny (~1KB) tiny ``` ## เลือกอะไรเมื่อไร ```text Zustand → simple global state, minimal ceremony (most apps' global needs) Jotai → bottom-up/granular state, lots of independent pieces, derived values Redux(RTK) → very large apps, strict structure, rich devtools/middleware ecosystem ``` ## ทำไมจึงสำคัญ Zustand และ Jotai แสดงถึงแนวโน้มสมัยใหม่ที่ห่างไกลจาก boilerplate ของ Redux ไปสู่สเตตส่วนกลาง **ขั้นต่ำและสะดวก** ที่มี **subscription ที่เลือกได้** ในตัว (แก้ปัญหา re-render ของ Context) การรู้ว่าพวกมันมีอยู่ — และ Zustand มีโมเดล single-store ขนาดเล็ก ขณะที่ Jotai มี atoms ที่สามารถจัดองค์ประกอบได้ — ให้คุณเลือกเครื่องมือที่เบาฝาดที่เหมาะสมกับความต้องการของสเตตส่วนกลางของแอปพลิเคชันส่วนใหญ่ โดยสงวน Redux Toolkit ที่หนักกว่าไว้สำหรับแอปพลิเคชันที่ใหญ่และซับซ้อนจริง ๆ ข้อได้เปรียบหลักที่ใช้ร่วมกันจาก Context คือ subscription ที่เล็กละเอียดซึ่งป้องกันการ over-rendering

Zustand — ร้านค้าที่ใช้ hook อย่างง่าย

Jotai — สเตตแบบ atomic

เปรียบเทียบกับ Redux

เลือกอะไรเมื่อไร

ทำไมจึงสำคัญ

คำถามที่เกี่ยวข้อง