Các store nhẹ như Zustand và Jotai khác Redux như thế nào?

Question

Accepted Answer

**Zustand** và **Jotai** là các thư viện state tối giản đạt được global state với ít boilerplate hơn Redux nhiều, và với **subscription chọn lọc** tích hợp sẵn để tránh các re-render không cần thiết. Chúng có các mô hình tư duy khác nhau: Zustand là một store duy nhất; Jotai là atomic. ## Zustand — một store đơn giản, dựa trên hook ```jsx import { create } from "zustand"; // định nghĩa một store: state + các action cập nhật nó, tất cả ở một nơi const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // không action/reducer/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — chỉ re-render khi count thay đổi const increment = useStore((s) => s.increment); return ; } ``` Không provider, không action, không reducer, không dispatch — bạn gọi các hàm setter trực tiếp. Selector (`s => s.count`) nghĩa là component chỉ re-render *khi* slice đó thay đổi. ## Jotai — atomic state ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // một mẩu state nhỏ const doubleAtom = atom((get) => get(countAtom) * 2); // atom derived function Counter() { const [count, setCount] = useAtom(countAtom); // hoạt động như useState, nhưng GLOBAL return ; } ``` Jotai xây state từ các **atom** nhỏ mà bạn kết hợp; component subscribe vào các atom riêng lẻ và chỉ re-render khi những atom cụ thể đó thay đổi. ## So sánh với Redux ```text Redux (cổ điển) Zustand Jotai Boilerplate cao (action/reducer) rất thấp rất thấp Provider bắt buộc không có tối thiểu Mô hình tư duy single store + dispatch single store, hooks atomic (kiểu useState) Re-render cần selector selector tích hợp theo atom (mịn) Devtools xuất sắc tốt tốt Bundle size lớn hơn rất nhỏ (~1KB) rất nhỏ ``` ## Khi nào chọn cái gì ```text Zustand → global state đơn giản, ít nghi thức (nhu cầu global của hầu hết app) Jotai → state bottom-up/mịn, nhiều mảnh độc lập, các giá trị derived Redux(RTK) → app rất lớn, cấu trúc nghiêm ngặt, hệ sinh thái devtools/middleware phong phú ``` ## Tại sao điều này quan trọng Zustand và Jotai đại diện cho xu hướng hiện đại rời xa boilerplate của Redux hướng tới global state **tối giản, tiện dụng (ergonomic)** với subscription chọn lọc tích hợp sẵn (giải quyết vấn đề re-render của Context). Biết chúng tồn tại — và rằng Zustand cung cấp một mô hình single-store nhỏ gọn trong khi Jotai cung cấp các atom có thể kết hợp — cho phép bạn chọn một công cụ nhẹ phù hợp với nhu cầu global-state của hầu hết app, dành Redux Toolkit nặng hơn cho các ứng dụng thực sự lớn, phức tạp. Lợi thế chung then chốt so với Context là subscription mịn (granular) ngăn việc re-render quá mức.