Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Єдине джерело істини». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**«Єдине джерело істини»** - це принцип, за яким **усі дані в застосунку зберігаються в одному місці**, і **всі частини інтерфейсу отримують їх з цього єдиного джерела**, а не зберігають власні копії. **Ключове:** усе стан застосунку має бути централізований, щоб не було дублювання і розбіжностей між частинами інтерфейсу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що це значить **«Єдине джерело істини»** - це принцип, за яким **усі дані в застосунку зберігаються в одному місці**, і **всі частини інтерфейсу отримують їх з цього єдиного джерела**, а не зберігають власні копії. > Простіше кажучи: > **увесь стан застосунку має бути централізований**, щоб не було дублювання і розбіжностей між частинами інтерфейсу. --- ## Приклад на React ### Без "єдиного джерела істини" ```javascript function Parent() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(0); return ( <> <Child1 count={count1} setCount={setCount1} /> <Child2 count={count2} setCount={setCount2} /> </> ); } ``` Тут два компоненти керують **окремими станами**, хоча відображають одне й те саме значення. Якщо їх потрібно синхронізувати - почнеться **хаос**: значення можуть розходитися. --- ### З "єдиним джерелом істини" ```javascript function Parent() { const [count, setCount] = useState(0); // ← єдине джерело істини return ( <> <Child1 count={count} setCount={setCount} /> <Child2 count={count} setCount={setCount} /> </> ); } ``` Тепер стан `count` зберігається **в одному місці** - у батька. Обидва дочірні компоненти отримують дані з нього і завжди бачать **актуальне значення**. --- ## Принцип у Redux та інших менеджерах стану Redux буквально побудований на цьому принципі: > Увесь стан застосунку зберігається в **одному store** - це і є "Single Source of Truth". Будь-який компонент отримує дані з цього єдиного сховища, і при зміні store усі, хто підписаний, оновлюються автоматично. ```javascript // Redux store - єдине джерело істини const store = configureStore({ reducer: rootReducer }); ``` --- ## Що буває без SSOT Якщо порушити цей принцип - з'являються: - **розсинхронізації** між компонентами, - **зайві оновлення** інтерфейсу, - **складно налагоджувати** (хто змінив дані?), - **непередбачувана поведінка** застосунку. --- ## Підсумок | Що | Опис | |---|---| | Визначення | Усі дані повинні мати одне достовірне джерело | | Мета | Виключити дублювання і неузгодженість стану | | У React | Зберігаємо стан вище в ієрархії і передаємо вниз через props | | У Redux / Zustand / MobX | Увесь стан в одному сховищі | | Результат | Застосунок передбачуваний, легко тестується і розширюється | --- > **У React це виражається просто:** > Компонент має отримувати дані "згори" (через props або контекст), > а не зберігати власні копії одного й того самого стану.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.