Шаблон "Фасад" має на меті спростити цей підхід, обгортаючи взаємодії з NgRx в одному місці, дозволяючи компоненту взаємодіяти лише з фасадом.
Фасад дає нам розділення між NGRX та компонентами.
Фасад обгортає магазин (store), і дозволяє компоненту знати лише одну річ — фасад магазину. Це чисто. Ви інжектуєте лише одну річ. Це стає інтерфейсом для компонентів та магазину. Це виглядає значно чистіше, ніж з магазином самостійно.
Шаблон дизайну "Фасад" є потужним інструментом для покращення продуктивності ваших Angular додатків, спрощуючи складні операції.
[
Piyalidas10 - Ngrx Facade Angular - StackBlitz
NGRX з шаблоном фасаду в Angular 18
stackblitz.com
](https://stackblitz.com/github/piyalidas10/NGRX-Facade-Angular?embed=1&file=src%2Fapp%2Fstore%2Ffacade%2Fcommon.facade.ts&source=post_page-----8af13d954adb--------------------------------)
Github : https://github.com/piyalidas10/NGRX-Facade-Angular
Навіщо потрібен шаблон "Фасад"?
Хоча NgRx є потужним інструментом для керування станом, він також може внести значну складність у ваш код. Багатослівність у визначенні та управлінні Actions, Reducers та Selectors часто призводить до повторюваних шаблонів, які можуть перевантажити розробників. У великих проектах ця складність може ускладнити розуміння архітектури і підтримку з часом.
Тут шаблон "Фасад" стає цінним рішенням, спрощуючи управління станом шляхом скорочення кількості шаблонного коду та пропонуючи чистіший спосіб взаємодії з даними.
Що таке шаблон "Фасад"?
Шаблон "Фасад" — це структурний шаблон проектування, що вводить шар абстракції між вашими компонентами та логікою керування станом. Замість того, щоб взаємодіяти безпосередньо з магазином (store), компоненти використовують фасад-сервіс, що інкапсулює всі операції, пов'язані з управлінням станом.
Шаблон "Фасад" є особливо корисним у різних сценаріях, де керування складністю та забезпечення чистої архітектури є ключовими завданнями. Нижче наведено деякі ситуації, де шаблон "Фасад" може бути дуже корисним:
- Спрощення складних підсистем: Використовуйте його, коли ваш додаток має кілька складних підсистем. Фасад приховує ці складнощі, надаючи простий інтерфейс, що робить код клієнта легшим для використання та розуміння.
- Зменшення залежностей: Якщо компоненти тісно пов'язані з кількома сервісами, фасад може розв'язати ці зв'язки, зробивши код більш гнучким і легшим для підтримки.
- Покращення організації коду: У великих проектах фасад централізує взаємодію з підсистемами в єдиному інтерфейсі, що покращує читаність і підтримуваність.
- Покращення тестованості: Фасади спрощують тестування, дозволяючи замокати лише один фасад, а не кілька сервісів, роблячи тести надійнішими та менш складними.
- Інкапсуляція перехресних турбот: Використовуйте фасад для керування такими проблемами, як логування або автентифікація, в одному місці, забезпечуючи консистентність по всіх підсистемах.
- Надання стабільного API: Якщо підсистеми змінюються з часом, фасад пропонує стабільний інтерфейс для клієнтів, захищаючи їх від змін в основі.
В суті, використовуйте шаблон "Фасад" для спрощення складних взаємодій, зменшення зв'язків і покращення підтримуваності та тестованості вашого коду.
Виконуючи роль єдиного входу для управління станом, шаблон "Фасад" спрощує комунікацію між вашими компонентами та магазином (store), забезпечуючи більш злагоджену та підтримувану архітектуру.
Фасади в Angular
В Angular імплементація шаблону "Фасад" включає створення сервісу (фасаду), який взаємодіє з іншими сервісами або логікою керування станом.
Цей фасад-сервіс виступає єдиною точкою контакту для компонентів, надаючи чистий і простий API, який абстрагує складнощі взаємодії з підсистемою.
У наступному прикладі, сервіс CommonFacade абстрагує складнощі взаємодії з магазином (store) NgRx. Він надає методи, такі як loadAll, getGroceries, getBuckets, filterByGroceryType, addToBucket, removeFromBucket, які приховують деталі відправки дій (dispatching actions) і керування станом.
Компоненти, яким потрібно додавати продукти до кошика, можуть зробити це без жодного знання про підсистему магазину або необхідність відправки дій безпосередньо.
Це розділення обов'язків гарантує, що компоненти не лише простіші та більше зосереджені на своїх основних ролях, але й більш підтримувані та менш схильні до помилок, пов'язаних з прямими операціями з управлінням станом. Використовуючи фасад, деталі управління станом приховані, що дозволяє розробникам компонентів працювати з чистішим і простішим API, яке не відкриває складнощі підсистеми NgRx. Цей підхід значно покращує масштабованість і підтримуваність застосунку, дотримуючись принципів хорошої програмної архітектури, ізолюючи бізнес-логіку від UI-компонентів.
Інші приклади використання шаблону "Фасад" в Angular https://blog.bitsrc.io/angular-facade-design-pattern-and-how-it-can-improve-performance-65bc2aabdb26
Перекладено з: Angular : NGRX with Facade Pattern