1. 09:14 14/10/2026
Khi xây dựng ứng dụng chạy cùng lúc trên Web (Next.js) và Mobile (Expo), việc chọn giải pháp state management phải cân nhắc giữa kích thước bundle, API đơn giản và khả năng chia sẻ logic giữa hai nền tảng. Zustand là một thư viện state quản lý cực nhỏ (khoảng 1 KB gzip) nhưng đủ mạnh để thay thế Redux hay Context phức tạp trong nhiều trường hợp thực tế.
**1. Cài đặt và cấu hình chung**
- Thêm `zustand` vào workspace monorepo (npm/yarn/pnpm).
- Tạo một package `shared-state` chứa các store dùng chung, ví dụ `useAuthStore`, `useCartStore`.
- Xuất các hook từ package này để cả `apps/web` và `apps/mobile` import như nhau.
**2. Ví dụ store xác thực**
```ts
// packages/shared-state/src/auth.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
export const useAuthStore = create(
persist(
(set) => ({
user: null,
token: null,
login: (user, token) => set({ user, token }),
logout: () => set({ user: null, token: null }),
}),
{ name: 'auth-storage' }
)
);
```
- `persist` tự động lưu vào `localStorage` trên Web và `AsyncStorage` trên React Native (cần cài `@react-native-async-storage/async-storage` và cấu hình `storage` tùy chỉnh).
**3. Sử dụng trong component**
- Web: `const { user, login } = useAuthStore();`
- Mobile: cùng một câu lệnh, không cần thay đổi.
- Khi gọi `login(user, token)` state cập nhật tức thì trên cả hai nền tảng.
**4. Lợi ích thực tế**
- Bundle size nhỏ, không làm chậm khởi động ứng dụng mobile.
- API hook-based quen thuộc, dễ học cho team mới.
- Hỗ trợ TypeScript tốt, tự động suy luận kiểu cho state và actions.
- Dễ dàng mở rộng với middleware như `devtools`, `immer` cho immutable updates.
**5. Mẹo áp dụng ngay**
- Tách store theo domain (auth, cart, ui) để tránh re-render không cần thiết.
- Sử dụng `shallow` từ `zustand/shallow` khi select nhiều trường cùng lúc.
- Cấu hình `persist` khác nhau cho Web và Mobile bằng cách truyền `storage` tùy biến ở entry point của từng app.
Kết luận: Zustand mang lại giải pháp state toàn cục nhẹ, thống nhất và dễ bảo trì cho monorepo React đa nền tảng. Hãy thử áp dụng cho dự án tiếp theo để cảm nhận sự gọn nhẹ mà vẫn đầy đủ tính năng.