Одна из самых больших проблем с приложениями, управляющими данными. Существует множество шаблонов для управления приложениями.
Что такое NgRx?
NgRx — это фреймворк для создания реактивных приложений в angular. NgRx обеспечивает управление состоянием, изоляцию побочных эффектов, генерацию кода и инструменты разработчика, которые расширяют возможности разработчиков.
Основные понятия
Приложения, разработанные с помощью ngrx/store, должны иметь дело с Store, Reducer, State и Action.
Магазин
Просто магазин — это «база данных» приложения. Он содержит состояние приложения. Магазин объединяет все состояние приложения в единую сущность.
Редуктор
Если хранилище является базой данных приложения, редукторами являются таблицы. Редюсеры — это чистые функции, принимающие два аргумента: предыдущее состояние и действие.
Штат
Состояние представляет собой единую неизменяемую структуру данных. Штаты - это то, что составляет магазин.
Действия
Действия — это полезные данные, которые отправляют данные из вашего приложения в хранилище. Действия — это классы, реализующие интерфейс NgRx Action. Действие имеет два свойства.
type: Это строка только для чтения, описывающая, что означает действие.
полезная нагрузка: тип этого свойства зависит от того, какой тип данных это действие должно отправить редюсеру.
Пример NgRx
Отлично... теперь пришло время увидеть NgRx в действии. В моем примере будут храниться данные пользовательского объекта журнала, которые вам нужно получить при запуске приложения.
Вот шаги,
Установите библиотеки NgRx, как показано ниже,
npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store — save
инструменты store-dev для отладки.
Эта файловая структура и вся конфигурация должны существовать в основном модуле вашего приложения. В моем примере я использую структуру папок ниже.
У вас будет основная папка с именем «_store» и другие подпапки.
Как мы упоминали ранее, мы посещаем два основных раздела, посвященных нашему приложению, пользователям и конфигурации. Для обоих из них мы хотим сформировать состояние, а также начальное состояние, и мы также должны сделать то же самое для состояния приложения.
Я создал интерфейс для определения пользователя.
нам нужно создать действия для пользователя.
Так что это может быть честным примером действий, созданных для функции или объекта в нашем приложении.
Отлично, мы уже определили состояние, а также действия… давайте создадим редьюсеры!
Мы посещаем редюсеры, реагирующие на ряд действий, потому что другие посещаемые объекты обрабатываются эффектами, которые мы посещаем, реализуем позже.
Я экспортирую Enum с определением типов действий. Таким образом, мы избегаем использования и повторения строк для использования типов действий, процесс, который может легко привести к ошибкам.
После этого создайте этот const для доступа к сохранению и извлечению userObj.
Чтобы передать пользовательские данные в хранилище,
При извлечении пользовательских данных из хранилища ngRx,
Отлично, поэтому мы создали все предметы, которые нужны нашему магазину, но нам пока не хватает одной вещи. Добавьте эти импорты в app.module.ts.
В этой статье я попытался представить прозрачное и понятное введение в NgRx, предоставив вам все, что вы хотели бы понять, чтобы войти в этот мир.
Мы начали объяснять концепции, понимать, как это работает, зачем это использовать, и в конце концов мы прошли весь базовый пример.
