Đây là bài 1 trong phần 8 của chuỗi demo “JavaScript thực tế: Dữ liệu, sự kiện và trạng thái”. Cách đọc luồng dữ liệu, tổ chức tương tác và xử lý trạng thái bất đồng bộ trên trình duyệt. Bài viết dùng ví dụ và dữ liệu giả để minh họa; hãy thử trên môi trường riêng trước khi áp dụng vào dự án.
Mục tiêu cụ thể
Ứng dụng hoàn chỉnh cần các trạng thái giao diện rõ ràng, cách cập nhật dữ liệu nhất quán và khả năng khôi phục sau tải lại. Mỗi tính năng nên có điều kiện chấp nhận trước khi triển khai.
Hiểu vấn đề trước khi dùng công cụ
Chương này tập trung vào một quyết định cụ thể: Hoàn thiện ứng dụng với thêm, sửa, xóa, lọc, tìm kiếm và lưu cục bộ; viết một hướng dẫn thao tác ngắn. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.
Ví dụ tối thiểu
const state = { tasks: [], filter: "all", query: "" };
function visibleTasks(state) {
return state.tasks.filter(task =>
(state.filter !== "done" || task.done) &&
task.title.toLowerCase().includes(state.query.toLowerCase())
);
}Giới hạn cần hiểu
Giữ nhiều bản sao danh sách đã lọc khiến trạng thái lệch nhau. Ưu tiên giữ nguồn dữ liệu và suy ra phần hiển thị.
Câu hỏi để tự giải thích
- Bạn sẽ giải thích dự án ứng dụng công việc cho người mới bằng ví dụ nào?
- Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
- Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?
Kết quả cần đạt
- Tìm kiếm kết hợp được bộ lọc
- Không mất dữ liệu khi render lại
- Có empty state và thông báo lỗi
Trước khi chuyển bài, hãy viết một đoạn giải thích bằng lời của bạn và chỉ ra ít nhất một trường hợp không nên áp dụng máy móc ví dụ này.