Zustand Async: 5 Cách Xử Lý Bất Đồng Bộ Hiệu Quả Trong React

1. Tại Sao Cần Quản Lý Async State Tập Trung?

Mỗi yêu cầu API cần theo dõi ít nhất 3 trạng thái: loading, success, error. Nếu logic này bị phân tán khắp các component, codebase nhanh chóng trở nên khó đọc và khó debug. Tập trung async state vào Zustand store giúp:

• Logic fetch tách hoàn toàn khỏi UI component.

• Nhiều component dùng chung một nguồn dữ liệu duy nhất.

• Dễ xử lý race condition và hủy request khi component unmount.

2. Cách 1 — Store Async Cơ Bản

Async action trong Zustand chỉ là một hàm async thông thường bên trong store:

import { create } from 'zustand';

const useUserStore = create((set) => ({
  user: null,
  isLoading: false,
  error: null,

  fetchUser: async (userId) => {
    set({ isLoading: true, error: null });
    try {
      const res = await fetch(`/api/users/${userId}`);
      if (!res.ok) throw new Error('Không thể tải dữ liệu!');
      const data = await res.json();
      set({ user: data, isLoading: false });
    } catch (err) {
      set({ error: err.message, isLoading: false });
    }
  },
}));

3. Cách 2 — Dùng Trong Component Với Selector

Chỉ subscribe đúng mảnh state cần thiết để tránh re-render thừa:

const UserProfile = ({ userId }) => {
  const { user, isLoading, error, fetchUser } = useUserStore(state => ({
    user: state.user,
    isLoading: state.isLoading,
    error: state.error,
    fetchUser: state.fetchUser,
  }));

  useEffect(() => {
    fetchUser(userId);
  }, [userId]);

  if (isLoading) return <p>Đang tải...</p>;
  if (error) return <p>Lỗi: {error}</p>;
  return <div>{user?.name}</div>;
};

4. Cách 3 — Song Song Nhiều Request

Dùng Promise.all bên trong action để fetch nhiều nguồn cùng lúc:

fetchDashboard: async () => {
  set({ isLoading: true });
  try {
    const [stats, users, orders] = await Promise.all([
      fetch('/api/stats').then(r => r.json()),
      fetch('/api/users').then(r => r.json()),
      fetch('/api/orders').then(r => r.json()),
    ]);
    set({ stats, users, orders, isLoading: false });
  } catch (err) {
    set({ error: err.message, isLoading: false });
  }
},

5. Cách 4 — Optimistic Update

Cập nhật UI ngay lập tức, rollback nếu API thất bại:

addItem: async (item) => {
  // Cập nhật UI trước
  set(state => ({ items: [...state.items, item] }));
  try {
    await fetch('/api/items', { method: 'POST', body: JSON.stringify(item) });
  } catch (err) {
    // Rollback nếu lỗi
    set(state => ({ items: state.items.filter(i => i.id !== item.id) }));
  }
},

6. Cách 5 — Hủy Request Khi Không Cần Nữa

Dùng AbortController để hủy fetch khi component unmount hoặc userId thay đổi:

fetchUser: async (userId, signal) => {
  set({ isLoading: true });
  try {
    const res = await fetch(`/api/users/${userId}`, { signal });
    const data = await res.json();
    set({ user: data, isLoading: false });
  } catch (err) {
    if (err.name !== 'AbortError') {
      set({ error: err.message, isLoading: false });
    }
  }
},

// Trong component:
useEffect(() => {
  const controller = new AbortController();
  fetchUser(userId, controller.signal);
  return () => controller.abort(); // Hủy khi unmount
}, [userId]);

7. Tối Ưu Với Middleware

• devtools: Tích hợp Redux DevTools — debug async actions dễ dàng.

• immer: Cú pháp cập nhật state mutable nhưng vẫn immutable bên dưới.

• persist: Lưu state vào localStorage, phục hồi khi reload trang.

Tổng Kết

Zustand biến việc xử lý async trong React trở nên gọn nhẹ và tường minh hơn bất kỳ giải pháp nào khác:

• Cơ bản: async function trực tiếp trong store.

• Hiệu năng: Selector để tránh re-render thừa.

• Song song: Promise.all trong action.

• UX tốt: Optimistic update + rollback.

• An toàn: AbortController để tránh memory leak.