"Single source of truth" nghĩa là gì?

Question

Accepted Answer

**Single source of truth** nghĩa là mỗi mẩu dữ liệu được lưu ở **đúng một nơi**, và mọi thứ cần nó đều đọc từ đó — thay vì giữ nhiều bản sao có thể lệch nhau (out of sync).

## Vấn đề mà nó ngăn chặn: state bị nhân bản và lệch nhau

```jsx
// ❌ cùng một dữ liệu lưu ở hai nơi → chúng có thể không khớp nhau
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const [displayName, setDisplayName] = useState("Ann"); // một BẢN SAO của user.name

function rename(newName) {
    setUser({ ...user, name: newName }); // đã cập nhật user...
    // ...nhưng quên cập nhật displayName → giờ chúng lệch nhau! 🐛
  }
}
```

Khi cùng một sự thật nằm ở hai state, mỗi lần cập nhật phải nhớ thay đổi cả hai — và chắc chắn sẽ có lúc bỏ sót một, gây ra bug khi UI hiển thị các giá trị không nhất quán.

## Cách khắc phục: một nguồn, suy ra phần còn lại

```jsx
// ✅ user.name là nguồn duy nhất; displayName là DERIVED, không lưu riêng
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const displayName = user.name.toUpperCase(); // tính khi render — luôn đồng bộ

function rename(newName) {
    setUser({ ...user, name: newName }); // một lần cập nhật, mọi thứ luôn nhất quán
  }
}
```

Lưu giá trị chuẩn (canonical) một lần; tính bất cứ thứ gì có thể suy ra từ nó ngay lúc cần. Không có gì phải đồng bộ cả.

## Nguyên tắc này áp dụng ở đâu

```text
✓ Đừng copy props vào state (prop chính là nguồn)
✓ Đừng lưu các giá trị derived (hãy tính chúng: tổng, danh sách đã lọc, văn bản đã format)
✓ Global store (Redux/Pinia): một store là nguồn cho dữ liệu chia sẻ
✓ Dữ liệu server: cache một lần (React Query) thay vì copy vào nhiều component
✓ URL làm nguồn: filters/page nằm trong URL, đọc từ đó
```

## Tại sao điều này quan trọng

Single source of truth là nguyên tắc nền tảng của việc quản lý state đáng tin cậy — nó loại bỏ cả một lớp bug gây ra bởi dữ liệu trùng lặp bị lệch nhau.

Đó là *lý do* bạn suy ra giá trị thay vì lưu chúng, *lý do* bạn tránh copy props vào state, và *lý do* global store tập trung dữ liệu chia sẻ.

Khi dữ liệu có một nơi ở chính thức duy nhất và mọi thứ đọc từ đó, UI của bạn luôn nhất quán một cách tự nhiên (by construction).