Tạm biệt Redux Toolkit: Vì sao Zustand và TanStack Query là cặp đôi hoàn hảo cho React?

Sự cồng kềnh của mô hình Global State truyền thống#

Trong nhiều năm, Redux là tiêu chuẩn bắt buộc trong mọi dự án React. Tuy nhiên, Redux mắc một sai lầm kiến trúc cơ bản: Đồng nhất giữa Client State và Server State vào chung một nơi.

Lập trình viên phải viết hàng chục action, reducer, slice, thunk chỉ để làm những việc cơ bản như: hiển thị loading spinner, cache dữ liệu người dùng, hoặc xử lý lỗi khi mạng chập chờn.

Phân tách ranh giới rõ ràng: Server State vs Client State#

1. Server State: Thuộc về TanStack Query (React Query)#

Dữ liệu đến từ backend (danh sách bài viết, thông tin user, giỏ hàng) cần cơ chế caching, deduplication, auto-refetching khi tab active:

import { useQuery } from '@tanstack/react-query';

export function useDiscussionList() {
  return useQuery({
    queryKey: ['discussions'],
    queryFn: () => fetch('/api/discussions').then(res => res.json()),
    staleTime: 1000 * 60 * 5, // Tự động cache 5 phút
  });
}

2. Client State: Thuộc về Zustand (Siêu nhẹ, không boilerplate)#

Trạng thái giao diện thuần túy (Mở/đóng sidebar, theme Dark/Light mode, tab đang chọn):

import { create } from 'zustand';

interface UIState {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
}

export const useUIStore = create<UIState>((set) => ({
  isSidebarOpen: false,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
}));

Kết quả sau khi loại bỏ Redux#

• Giảm 70% số dòng code liên quan đến state management.
• Bundle size giảm 45KB.
• Không còn cần thẻ <Provider> bọc quanh toàn bộ ứng dụng, component không bị re-render thừa thãi.

Góc thảo luận#

Team bạn đã chuyển sang dùng Zustand hoặc TanStack Query chưa? Còn nghiệp vụ nào khiến bạn vẫn bắt buộc phải gắn bó với Redux không?

Xem thêm nội dung liên quan:

• Học lộ trình React & TypeScript
• Bộ câu hỏi trắc nghiệm ReactJS