Giới thiệu

Quản lý trạng thái tải là một phần thiết yếu trong các ứng dụng React. Tuy nhiên, nhiều cách để theo dõi trạng thái của một hành động bất đồng bộ thường phải sử dụng các thư viện phức tạp, chẳng hạn như TanStack React Query hay Redux Toolkit. Đôi khi, việc thêm một thư viện như vậy cảm thấy không cần thiết. Vậy chúng ta có thể mong muốn điều gì?

Mục tiêu

Chúng ta muốn xử lý trạng thái đang chờ và lỗi của một hành động bất đồng bộ mà không cần viết lại hành động đó, không ảnh hưởng đến quản lý trạng thái hiện tại của ứng dụng, và vẫn có cách rõ ràng để chia sẻ trạng thái hành động với nhiều thành phần khác nhau khi cần thiết.

Để giải quyết nhiệm vụ này, tôi đã tạo ra một gói nhỏ có tên là @t8/react-pending. Dưới đây là cách thiết lập quản lý trạng thái hành động bất đồng bộ với gói này:

Cài đặt

Bước 1: Cài đặt gói

Đầu tiên, bạn cần cài đặt gói @t8/react-pending:

npm install @t8/react-pending

Bước 2: Sử dụng trong thành phần

Sau khi cài đặt, bạn có thể sử dụng gói trong thành phần của bạn như sau:

import { usePendingState } from '@t8/react-pending';
import React, { useEffect, useState } from 'react';

const ItemList = () => {
    const [items, setItems] = useState([]);
    const [state, withState] = usePendingState('item-list');

    useEffect(() => {
        withState(fetchItems()).then(setItems);
    }, [withState]);

    if (!state.complete) return <p>Đang tải...</p>;
    if (state.error) return <p>Đã xảy ra lỗi</p>;

    return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
};

const Status = () => {
    const [state] = usePendingState('item-list');
    return state.complete ? 'Hoàn tất' : 'Đang xử lý';
};

Cách hoạt động

Mã được thêm vào không làm thay đổi cấu trúc ban đầu và mã của hành động bất đồng bộ. Trong ví dụ của chúng ta, dữ liệu được lưu trữ trong trạng thái cục bộ, nhưng nó có thể được lưu trữ ở nơi khác nếu cần thiết.

Tham số chuỗi của hook usePendingState() gán một khóa duy nhất cho trạng thái cụ thể mà có thể được sử dụng trong các thành phần khác để tham chiếu đến trạng thái đó (như trong Status ở ví dụ trên). Khi trạng thái đang chờ chỉ cần trong một thành phần duy nhất, chúng ta có thể bỏ qua tham số của hook.

Thực hành tốt

• Sử dụng tên khóa rõ ràng: Khi sử dụng usePendingState(), hãy chắc chắn rằng tên khóa là duy nhất và dễ hiểu để dễ dàng quản lý.
• Kiểm tra trạng thái lỗi: Luôn luôn kiểm tra trạng thái lỗi và xử lý chúng một cách thích hợp để cung cấp trải nghiệm người dùng tốt hơn.

Cạm bẫy thường gặp

• Không kiểm soát trạng thái: Đảm bảo rằng bạn kiểm soát trạng thái của hành động bất đồng bộ để tránh các lỗi không mong muốn.
• Thiếu quản lý trạng thái: Nếu không sử dụng đúng cách, có thể dẫn đến việc trạng thái không đồng bộ không được quản lý một cách chính xác, gây khó khăn trong việc gỡ lỗi.

Mẹo hiệu suất

• Tránh việc gọi lại API không cần thiết: Sử dụng cache hoặc các kỹ thuật tải dữ liệu thông minh để cải thiện hiệu suất ứng dụng.
• Tối ưu hóa render: Đảm bảo rằng các thành phần chỉ render lại khi cần thiết để tiết kiệm tài nguyên.

Giải quyết sự cố

• Không hiển thị trạng thái: Nếu trạng thái không hiển thị đúng, hãy kiểm tra xem tên khóa được sử dụng có trùng khớp không.
• Lỗi khi gọi API: Đảm bảo rằng API đang hoạt động và kiểm tra các thông báo lỗi trong console để xác định nguyên nhân gốc rễ.

Kết luận

Gói @t8/react-pending cung cấp một cách đơn giản và hiệu quả để quản lý trạng thái hành động bất đồng bộ trong ứng dụng React mà không cần phải thêm các thư viện phức tạp. Bằng cách áp dụng cách tiếp cận này, bạn có thể duy trì mã nguồn sạch sẽ và dễ bảo trì hơn. Hãy thử nghiệm và áp dụng nó vào dự án của bạn ngay hôm nay!

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

1. Gói @t8/react-pending có tương thích với Redux không?

Có, bạn có thể sử dụng @t8/react-pending cùng với Redux mà không gặp vấn đề gì.

2. Liệu tôi có thể sử dụng usePendingState() trong các thành phần con không?

Có, bạn có thể sử dụng nó ở bất kỳ đâu trong cây thành phần miễn là tên khóa là duy nhất.

3. Làm thế nào để xử lý trạng thái lỗi?

Bạn có thể sử dụng thuộc tính state.error để kiểm tra lỗi và hiển thị thông báo phù hợp cho người dùng.

Tài nguyên tham khảo

• React Documentation
• Redux Documentation
• TanStack Query Documentation

Hãy bắt đầu sử dụng @t8/react-pending để cải thiện trải nghiệm người dùng và quản lý trạng thái bất đồng bộ một cách hiệu quả hơn.