Giới Thiệu

Trong thời đại phát triển của web hiện đại, việc quản lý dữ liệu lớn trong ứng dụng React ngày càng trở nên phổ biến. Đặc biệt, phân trang, tìm kiếm và sắp xếp dữ liệu phía máy chủ là những yếu tố không thể thiếu để tối ưu hóa hiệu suất, nâng cao trải nghiệm người dùng và đảm bảo khả năng bảo trì cho ứng dụng. Bài viết này sẽ cung cấp cho bạn hướng dẫn chi tiết để triển khai những chức năng này trong ứng dụng React của bạn.

Nội Dung Chính

Các Công Nghệ Sử Dụng

Chúng ta sẽ sử dụng TanStack’s react-table để quản lý bảng dữ liệu, react-query để tìm nạp dữ liệu từ máy chủ, và react-router để điều hướng giữa các màn hình khác nhau. Bên cạnh đó, Typescript và Vite sẽ hỗ trợ trong việc phát triển ứng dụng một cách nhanh chóng và hiệu quả.

Thiết Lập Môi Trường Phát Triển

Trước tiên, bạn cần tạo một ứng dụng React mới với cấu hình TypeScript sử dụng Vite:

{
  "name": "server-side-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.24.1",
    "@tanstack/react-table": "^8.13.0",
    "axios": "^1.6.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.22.1",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }
}

Tạo Hàm Tiện Ích Kết Hợp

Chúng ta sẽ xây dựng một hàm tiện ích nhỏ để kết hợp các class-name trong Tailwind và clsx:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Triển Khai Custom Hooks

Để tối ưu hóa việc sử dụng bảng và phân trang, useTable và usePagination sẽ được xây dựng để cung cấp các chức năng cần thiết cho dự án.

Component Hiển Thị Dữ Liệu

Chúng ta sẽ tùy chỉnh các component như DataTable, Pagination và DebouncedInput để thực hiện các chức năng tìm kiếm, phân trang và sắp xếp dữ liệu phức tạp hơn.

Kết Nối Với Máy Chủ JSON

Bằng cách sử dụng react-query, chúng ta sẽ thiết lập một API để lấy thông tin người dùng từ máy chủ JSON và thực hiện tìm nạp dữ liệu dễ dàng hơn:

import axios from 'axios';

export async function getAllUsers({ page, search, sortBy, orderBy }) {
  let userUrl = `${import.meta.env.VITE_MOCK_DATA_URL}/users?`;
  if (search) userUrl += `q=${search}&`;
  if (page) userUrl += `_page=${page}&`;
  if (sortBy) userUrl += `_sort=${sortBy}&`;
  if (orderBy) userUrl += `_order=${orderBy}&`;
  return axios.get(`${userUrl}`).then((response) => response.data);
}

Kết Luận

Thông qua bài viết này, bạn đã học cách triển khai phân trang, tìm kiếm và sắp xếp phía máy chủ trong ứng dụng React. Các giải pháp được đề xuất sẽ giúp tối ưu hóa trải nghiệm người dùng và gia tăng hiệu suất cho ứng dụng của bạn.

Khám Phá Thêm

Để tìm hiểu thêm và tiếp cận mã nguồn, hãy truy cập kho lưu trữ mã nguồn. Cảm ơn bạn đã theo dõi!
source: viblo