Quản lý tham số URL như trạng thái trong React

Giới thiệu

Trong phát triển ứng dụng web, việc quản lý trạng thái là một phần quan trọng giúp cải thiện trải nghiệm người dùng. Một trong những cách để quản lý trạng thái trong React là xử lý các tham số URL như một phần của trạng thái. Bài viết này sẽ hướng dẫn bạn cách thực hiện điều đó, đồng thời cung cấp các mẹo, thực tiễn tốt nhất và các ví dụ minh họa.

Tại sao tham số URL lại quan trọng?

Tham số URL có thể được coi là một phần của trạng thái của ứng dụng. Chúng cho phép chia sẻ và đánh dấu trạng thái của ứng dụng trong URL, giúp người dùng có thể chia sẻ liên kết hoặc quay lại một trạng thái cụ thể của ứng dụng. Điều này đặc biệt hữu ích trong các ứng dụng đơn trang (SPA).

Cách xử lý tham số URL trong React

Sử dụng useState()

Hãy xem xét cách mà bạn có thể sử dụng React để xử lý các tham số URL. Giả sử bạn có một URL gốc là /:

export const App = () => {
  let [{query}, setState] = useRouteState('/');

  let setPosition = () => {
    setState((state) => ({
      ...state,
      query: {
        x: Math.floor(100 * Math.random()),
        y: Math.floor(100 * Math.random()),
      },
    }));
  };

  return (
    <main>
      <Shape x={query.x} y={query.y}/>
      <p><button onClick={setPosition}>Di chuyển</button></p>
    </main>
  );
};

Sự tương đồng với useState()

Mã trên có cấu trúc tương tự như khi sử dụng useState(), điều này giúp bạn dễ dàng chuyển đổi từ trạng thái cục bộ sang trạng thái tham số URL. Cách tiếp cận này cũng phù hợp với phương pháp tối giản trong định tuyến mà tôi đã đề cập trong một bài viết trước đây.

Tạo demo trực tiếp

Bây giờ, chúng ta có thể chuyển đổi mã này thành một demo trực tiếp. Trong cách tiếp cận này, trạng thái của định tuyến cũng có thể được xử lý với kiểu dữ liệu chính xác hơn bằng cách giới thiệu một bộ xây dựng URL an toàn kiểu url() và một sơ đồ URL sử dụng zod:

import {useRouteState} from '@t8/react-router';
import {createURLSchema} from 'url-shape';
import {z} from 'zod';

const {url} = createURLSchema({
  '/shapes/:id': {
    params: z.object({
      id: z.coerce.number(),
    }),
    query: z.optional(
      z.object({
        x: z.coerce.number(),
        y: z.coerce.number(),
      })
    ),
  },
});

export const ShapeSection = () => {
  let [{params, query}, setState] = useRouteState(url('/shapes/:id'));

  let setPosition = () => {
    setState((state) => ({
      ...state,
      query: {
        x: Math.floor(100 * Math.random()),
        y: Math.floor(100 * Math.random()),
      },
    }));
  };

  let resetPosition = () => {
    setState({params});
  };

  return (
    <main>
      <h1>Hình {params.id}</h1>
      <Shape x={query.x} y={query.y} n={params.id + 2}/>
      <p>
        <button onClick={setPosition}>Di chuyển</button>{' '}
        <button onClick={resetPosition}>Đặt lại</button>
      </p>
    </main>
  );
};

So sánh với ví dụ trước

So với ví dụ đầu tiên, chúng ta đã thêm một định nghĩa sơ đồ URL với createURLSchema() và thay thế URL cố định '/' bằng mẫu URL kiểu url('/shapes/:id'). Những thay đổi này đã dẫn đến việc params và query được giải quyết với kiểu dữ liệu chính xác hơn, giúp cải thiện tính chính xác khi sử dụng trong mã.

Thực tiễn tốt nhất khi làm việc với tham số URL

• Giữ cho URL ngắn gọn: Tránh đưa vào nhiều tham số không cần thiết.
• Sử dụng mã hóa: Đảm bảo rằng tham số URL được mã hóa hợp lý để tránh lỗi.
• Kiểm tra trạng thái: Luôn kiểm tra trạng thái của ứng dụng khi tham số URL thay đổi để cập nhật giao diện người dùng.

Các cạm bẫy phổ biến

• Không xử lý đúng: Tham số URL có thể bị bỏ qua hoặc không được xử lý đúng cách nếu không được kiểm tra.
• Khó khăn trong bảo trì: Khi tham số URL trở nên phức tạp, mã có thể trở nên khó bảo trì và đọc hiểu.

Mẹo hiệu suất

• Tối ưu hóa truy vấn: Hãy cẩn thận với cách bạn sử dụng tham số URL để tránh việc gửi quá nhiều dữ liệu không cần thiết.
• Sử dụng memoization: Sử dụng các kỹ thuật memoization để giảm thiểu việc tính toán lại không cần thiết.

Tìm lỗi

Nếu gặp phải sự cố khi quản lý tham số URL, hãy kiểm tra:

• Đảm bảo rằng các tham số được định nghĩa đúng trong sơ đồ URL.
• Kiểm tra các giá trị tham số để đảm bảo chúng đang nhận giá trị mong đợi.
• Sử dụng công cụ phát triển để theo dõi trạng thái và tham số URL.

Kết luận

Quản lý tham số URL như trạng thái trong React là một cách tiếp cận mạnh mẽ để cải thiện tính tương tác và khả năng chia sẻ của ứng dụng. Hy vọng rằng bài viết này đã cung cấp cho bạn những hiểu biết cần thiết để áp dụng phương pháp này một cách hiệu quả.

Câu hỏi thường gặp (FAQ)

1. Tham số URL có thể sử dụng cho những loại ứng dụng nào?
   Tham số URL có thể được sử dụng trong bất kỳ ứng dụng web nào cần quản lý trạng thái, đặc biệt là trong các ứng dụng SPA.

2. Có cách nào khác để quản lý trạng thái không?
   Có nhiều phương pháp khác nhau, bao gồm sử dụng Redux, Context API và nhiều thư viện khác.

3. Làm thế nào để kiểm tra trạng thái tham số URL?
   Bạn có thể sử dụng các công cụ phát triển hoặc viết các bài kiểm tra tự động để kiểm tra trạng thái tham số URL.

Hãy bắt đầu áp dụng ngay hôm nay để cải thiện ứng dụng của bạn!