Управління станом — це процес керування станами елементів керування користувача. Це допомагає розробникам створювати великомасштабні додатки з великою кількістю даних, зберігаючи високу продуктивність додатка.
NgRx натхненний Redux і допомагає розробникам спростити стан додатка в об'єктах, забезпечуючи односпрямований потік даних.
Патерн Redux
- Компонент ініціює дію. Дія — це об'єкт з типом і payload.
- Дія потрапляє до редуктора. Редуктор — це чиста функція, яка не залежить від зовнішніх змінних. Він гарантує, що оновлення стану будуть передбачуваними. Редуктор перевіряє тип і payload дії.
- Редуктор повертає дані в сховище/стан, що є новим станом.
- Компонент безпосередньо використовує дані зі сховища.
Живе посилання: https://reduxangular-gtss--4200--c8c182a3.local-credentialless.webcontainer.io/
Джерело коду: https://github.com/piyalidas10/Redux-Angular
Посилання на джерело підручника: https://www.youtube.com/watch?v=PvL7TULFxoE
NGRX
NGRX має два додаткових компоненти: ефекти та селектори, на відміну від дій та редукторів.
- Компонент ініціює дію. Дія — це об'єкт з типом і payload.
- Дія потрапляє до ефектів. В попередньому патерні Redux дії відправлялися безпосередньо до редукторів, що є синхронним. Тепер, якщо ви хочете викликати API, це виконуватиметься всередині ефектів.
- Кожна дія успіху та невдачі надсилається до редуктора. Ми зберігаємо 3 секції (load, success, error) всередині редукторів.
- Редуктор повертає дані в сховище/стан, що є новим станом. Значення стану залежить від того, які дані повертаються з редукторів.
- Замість того, щоб безпосередньо отримувати дані зі сховища, селектори допоможуть вибрати дані відповідно до вимог. Ви можете трансформувати дані. Припустимо, у вас є дані про клієнтів у вашому сховищі, і ви хочете отримати лише імена та ідентифікатори клієнтів замість всіх деталей. Ви можете використати селектор для фільтрації даних про клієнтів. Селектори є MemoizedSelectors, які викликаються лише один раз у всьому додатку.
- Селектори будуть споживатися в компоненті, де ви хочете відобразити відповідь.
Живе посилання: https://reduxangular-gtss--4200--c8c182a3.local-credentialless.webcontainer.io/
Джерело коду: https://github.com/piyalidas10/NGRX-Angular
Посилання на джерело підручника: https://www.youtube.com/watch?v=PvL7TULFxoE
Перекладено з: NGRX in Angular