Які основні елементи архітектури NgRx?

Основні елементи архітектури NgRx - це цеглинки, з яких будується керування станом. Кожен відповідає за свою частину:

#Елементи

1. Store (сховище)
   • Це як великий глобальний об'єкт, де лежить увесь стан застосунку.
   • Тільки для читання: напряму змінювати не можна.
   • Компоненти отримують з нього дані через select().
2. Actions (дії)
   • Прості об'єкти з описом того, що сталося.
   • Приклади: loginSuccess, addToCart, loadPosts.
   • Лише через dispatch() можна ініціювати зміну стану.
3. Reducers (редюсери)
   • Чисті функції, які визначають: як змінюється стан за певного action.
   • Отримують поточний стан і action → повертають новий стан.
4. Selectors (селектори)
   • Зручні функції, щоб діставати потрібні частини зі store.
   • Наприклад: selectCurrentUser, selectCartItems.
   • Дають змогу не смикати вручну весь store, а брати лише те, що потрібно.
5. Effects (ефекти)
   • Обробляють побічні дії: запити до API, збереження в localStorage тощо.
   • Слухають actions$, роблять щось і диспатчать нові actions за результатом.

Додатково:

6. Entity Adapter
   • Допомагає зручно працювати з колекціями: додавати, оновлювати, видаляти елементи.
   • Особливо корисний для списків (наприклад, товари, пости).
7. Feature state
   • Поділ store за модулями.
   • Кожен модуль може мати свою частину стану.

NgRx - це не магія. Це просто чітка послідовність: dispatch → effect (якщо потрібно) → reducer → новий стан → шаблон оновився.