Kiến Trúc Quản Lý State Toàn Cục với Zustand v5

Xây dựng Store chuẩn Enterprise: Atomic Selectors chống re-render, Slice Pattern tách module và Middleware Persist.

Core Mental Model

Zustand hoạt động bên ngoài React (External Store) và sử dụng cơ chế Subscription trực tiếp (`useSyncExternalStore`). Chỉ những component chọn chính xác thuộc tính (qua Selector) mới bị kích hoạt re-render khi thuộc tính đó thay đổi.

Key Takeaways & Principles

Luôn luôn sử dụng Atomic Selectors (ví dụ: `useStore(s => s.user)`) thay vì gọi toàn bộ Store `useStore()` để tránh re-render diện rộng.

Sử dụng Slices Pattern để chia nhỏ Store thành nhiều tính năng độc lập (AuthSlice, CartSlice, SettingSlice).

Tích hợp middleware `persist` và `devtools` một cách liền mạch mà không cần boilerplate phức tạp như Redux.

Advanced React Performance Patterns

intermediate

20 phút

#Zustand v5

#Global State

#Selectors