Bye Bye Redux, Hello TanStack Query: Quản lý Profile người dùng dễ như ăn kẹo!

Lê Lân

22/08/2025

Quản Lý State Toàn Cầu Trong React Với TanStack Query: Giải Pháp Thay Thế Redux & Zustand

Mở Đầu

Trong thế giới React, việc quản lý state toàn cầu luôn là một thử thách khó nhằn. Trước đây, Redux là lựa chọn hàng đầu và sau này xuất hiện những thư viện nhẹ hơn như Zustand, tuy nhiên trong nhiều trường hợp, đặc biệt khi dữ liệu đến trực tiếp từ server, bạn hoàn toàn không cần một thư viện quản lý state phức tạp.

Bài viết này sẽ cùng bạn khám phá một ví dụ thực tế: giữ dữ liệu profile người dùng sẵn có trên toàn bộ ứng dụng frontend. Ta sẽ thấy rằng TanStack Query có thể làm điều này một cách dễ dàng, với đầy đủ tính năng cache, invalidate và persistence, mà không cần sử dụng Redux hay Zustand.

🧩 Vấn Đề Cần Giải Quyết

Bạn có một API endpoint /api/me trả về dữ liệu profile của người dùng đã đăng nhập. Bạn muốn dữ liệu này:

Có thể truy cập dễ dàng ở nhiều nơi trong ứng dụng như thanh điều hướng (navbar), trang cài đặt, v.v.

Được lưu trong bộ nhớ tạm mà không cần phải gọi lại API mỗi khi render.

Chỉ làm mới khi thật sự cần thiết (ví dụ sau khi cập nhật profile).

Xóa sạch dữ liệu khi người dùng đăng xuất.

Truyền thống, chúng ta sẽ:

Gọi API lấy profile một lần.

Lưu dữ liệu global state qua Redux hoặc Zustand.

Cập nhật/xóa dữ liệu thủ công khi có thay đổi.

Với TanStack Query, tất cả bước trên đều được thực hiện tự động và hiệu quả.

⚡ Khởi Tạo TanStack Query Trong Ứng Dụng React

Trước hết, cài đặt các thư viện cần thiết:

npm install @tanstack/react-query axios

Bọc toàn bộ ứng dụng trong QueryClientProvider :

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourRoutes />
    </QueryClientProvider>
  );
}

📦 Định Nghĩa Query Cho Profile Người Dùng

Thay vì đặt cấu hình query rải rác khắp code, ta nên tạo một query object tập trung để tái sử dụng hiệu quả:

// profileQuery.ts
import { queryOptions } from '@tanstack/react-query';
import axios from 'axios';

async function fetchProfile() {
  const { data } = await axios.get('/api/me');
  return data;
}

export const profileQuery = queryOptions({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: Infinity, // Profile không thay đổi thường xuyên
  gcTime: Infinity,    // Giữ cache cho đến khi được xóa thủ công
});

Điều quan trọng: staleTime và gcTime được đặt vô hạn để tránh refetch không cần thiết.

🎯 Sử Dụng Profile Ở Nhiều Thành Phần

Bạn có thể import profileQuery ở bất cứ đâu trong ứng dụng và sử dụng với useQuery :

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

function Navbar() {
  const { data: profile } = useQuery(profileQuery);
  return <span>Welcome, {profile?.name}</span>;
}

function SettingsPage() {
  const { data: profile } = useQuery(profileQuery);
  return <div>Email: {profile?.email}</div>;
}

✅ Hai component đọc từ cùng cached query.

✅ Không cần truyền props qua nhiều tầng (no prop drilling).

✅ Không tạo boilerplate từ Redux hay Zustand.

🔄 Làm Mới Dữ Liệu Khi Cập Nhật Profile

Khi người dùng thay đổi thông tin cá nhân, chỉ cần invalidate lại query để tự động fetch dữ liệu mới:

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

function useUpdateProfile() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (updates) => axios.put('/api/me', updates),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['profile'] });
    },
  });
}

Điều này giúp giao diện luôn cập nhật dữ liệu mới nhất mà không phải tự quản lý state phức tạp.

🚪 Xử Lý Đăng Xuất: Xóa Cache Profile

Khi người dùng đăng xuất, bạn chỉ cần xoá dữ liệu cache để đảm bảo không còn thông tin cũ tồn tại:

function useLogout() {
  const queryClient = useQueryClient();

  return () => {
    // Gọi API đăng xuất nếu có
    queryClient.removeQueries({ queryKey: ['profile'] });
  };
}

📌 Tổng Kết và Lời Khuyên

TanStack Query có thể thay thế hoàn toàn vai trò kho lưu state server (server state global store).

Dùng staleTime: Infinity cho dữ liệu ổn định như profile, chỉ invalidate khi update.

Bộ cấu hình query tách riêng giúp dễ quản lý, tái sử dụng toàn app.

Xóa cache khi logout để giữ ứng dụng sạch sẽ, bảo mật.

Với client-side UI state (theme, modal,...) hãy ưu tiên dùng Zustand hoặc React Context.

👉 Kết quả: Không cần reducers, actions hay ổn Redux/Zustand overhead — chỉ là các query gọn nhẹ, hiệu quả.

Tham Khảo

TanStack Query Docs

React Query Best Practices, Tanner Linsley

Axios Documentation

Managing Server State in React

June 1, 2024