Разработка приложения с интенсивным использованием данных с помощью Angular NgRX
Почему NgRX?
NgRx — это фреймворк для создания реактивных приложений в Angular. NgRx обеспечивает управление состоянием, что важно для средних и крупных приложений.
Уменьшите количество ненужных внутренних запросов
В приложении с интенсивным использованием данных мы стараемся избегать извлечения одних и тех же данных через HTTP-запросы к серверной части. Например, если мы разрабатываем приложение для отслеживания 10 000 различных курсов криптовалюты в секунду, может быть нецелесообразно продолжать опрос данных, особенно если значения криптовалюты на самом деле не меняются в течение длительного периода времени. Кроме того, если пользователь сейчас проверяет цену Биткойна, а затем быстро проверяет цену Эфириума и проверяет цену Шибы, определенно не очень удобно продолжать показывать значок загрузки каждый раз, когда пользователь быстро переключается между данными, которые были загружены всего за несколько секунд. назад.
База данных на стороне клиента в памяти
В NgRx есть хранилище (база данных на стороне клиента), которое не зависит от жизненных циклов каких-либо компонентов. Хранящиеся данные сохранятся во время навигации и создания экземпляров между различными компонентами, поэтому приложению не нужно каждый раз обращаться к серверной части и снова получать данные. Например, если мы проверим угловое приложение NgRX с помощью Redux DevTools, мы можем легко увидеть все данные хранилища в веб-браузере клиента.
Когда приложение разрастается множеством сервисов и компонентов, магазин становится источником правды.
В каждом компоненте вместо того, чтобы внедрять несколько сервисов в конструктор, мы можем просто внедрить хранилище (источник правды всего), чтобы конструктор каждого компонента выглядел намного чище и проще.
Поток данных NgRX
Чтобы освоить поток данных NgRX, мы можем взглянуть на пример ниже. Из представления пользователь заказывает 100 акций, затем действие (посредник для взаимодействия с магазином) будет отправлено. Чтобы создать действие, требуется описательное имя о том, что делает действие, и дополнительная полезная нагрузка (обычно данные формы). После отправки действия из компонента магазин получает информацию о том, что делать с действием, с помощью редьюсеров. Редукторы берут информацию из полезной нагрузки действия и сохраняют в хранилище. Редукторы возвращают копию состояния с обновленными данными или новое состояние. Теперь, если какой-либо компонент представления хочет отобразить данные после действия покупки 100 акций, он просто использует селектор. strong> для получения обновленных данных из хранилища, что существенно минимизирует вызовы API к серверной части и повышает общую производительность приложения. Кроме того, в связи с этим обновлением нам также необходимо синхронизировать хранилище обновление с сторонней системой (локальное хранилище или серверная часть), и мы называем это побочными эффектами. Внутренние эффекты, когда службы Angular внедряются для взаимодействия с серверной частью, обычно имеют обработчики ошибок для обнаружения ошибок и другого кода ответа сервера API.
Заключение
Я надеюсь, что эта статья окажется полезной и даст читателям общее представление о том, как работает NgRX. Подробное объяснение и практический опыт можно найти по ссылке ниже:
Документы NgRX: https://ngrx.io/docs
Чтобы освоить собеседование по системному проектированию, я настоятельно рекомендую читателям ознакомиться с известным курсом по ссылке ниже:
