Ką reiškia "vienas tiesos šaltinis"?

Question

Accepted Answer

**Vienas tiesos šaltinis** reiškia, kad kiekvienas duomenų fragmentas saugomas **tiksliai vienoje vietoje**, ir viskas, kas to reikia, nuskaito iš ten — o ne saugo kelias kopijas, kurios gali išsiskirti.

## Problema, kurią tai išvengia: dubliuota, skirtinga būsena

```jsx
// ❌ the same data stored in two places → they can disagree
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const [displayName, setDisplayName] = useState("Ann"); // a COPY of user.name

function rename(newName) {
    setUser({ ...user, name: newName }); // updated user...
    // ...but forgot to update displayName → now they're out of sync! 🐛
  }
}
```

Kai tas pats faktas gyvena dviejose būsenose, kiekvienas atnaujinimas turi prisiminti pakeitimą abiejose — ir neišvengiamai vienas pamirštamas, sukeldamas klaidas, kuriose UI rodo nenuoseklias reikšmes.

## Sprendimas: vienas šaltinis, išvestis likutis

```jsx
// ✅ user.name is the single source; displayName is DERIVED, not stored
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const displayName = user.name.toUpperCase(); // computed on render — always in sync

function rename(newName) {
    setUser({ ...user, name: newName }); // one update, everything stays consistent
  }
}
```

Saugokite kanoninę reikšmę vieną kartą; apskaičiuokite bet ką, kas iš jos gaunasi, skrendant. Nėra ko laikyti sinchronizuotais.

## Kur taikomas šis principas

```text
✓ Don't copy props into state (the prop is the source)
✓ Don't store derived values (compute them: totals, filtered lists, formatted text)
✓ Global stores (Redux/Pinia): one store is the source for shared data
✓ Server data: cache it once (React Query) rather than copying into many components
✓ URL as source: filters/page in the URL, read from there
```

## Kodėl tai svarbu

Vienas tiesos šaltinis yra patikimo būsenos valdymo pagrindinis principas — jis pašalina visą klaidu klasę, kurią sukelia dubliuoti duomenys, skirtingai besitęsiantys.

Tai *todėl*, kad išvedinate reikšmes vietoje jų saugojimo, *todėl* vengate props kopijų į būseną, ir *todėl* globalios saugyklos centralizuoja bendrą duomenis.

Kai duomenys turi vieną autoritatyvią namus ir viskas nuskaito iš jų, jūsų UI lieka nuoseklus pagal konstravimą.