Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Які основні елементи архітектури NgRx?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Основні елементи архітектури 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 → новий стан → шаблон оновився.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати212 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.