NgRx (c NgRx Data) - Полное Руководство

Познакомьтесь с современной экосистемой NgRx, включая NgRx Store, Effects, Router Store, NgRx Entity, DevTools и Schematics. Одной из наиболее распространенных проблем, с которыми мы столкнемся как веб-разработчики, являются проблемы управления состоянием. Как правило, они появляются в больших приложениях, где у нас есть несколько компонентов, которые должны одновременно отображать и изменять одни и те же общие данные в разных точках дерева компонентов. В этих ситуациях невозможно, чтобы только один компонент загружал и владел ссылкой на данные, поскольку эти данные необходимы в других частях приложения, с которыми компонент не связан напрямую.

Мы хотели бы, чтобы наш уровень представления просто автоматически обновлялся каждый раз, когда общие совместно используемые данные обновляются любым из компонентов, которые его потребляют, без необходимости создавать зависимости между этими компонентами или повторного вызова сервера просто для получения последних данных и обновления.

Помимо проблемы обмена общими редактируемыми данными между компонентами, мы хотим предоставить нашим пользователям наилучшие возможности. Мы хотим, чтобы приложение работало как можно быстрее, сводя к минимуму необходимость постоянно показывать пользователю индикаторы загрузки, особенно если он только для того, чтобы постоянно загружать одни и те же данные с сервера из-за навигации по маршрутизатору.

Это приводит к еще одной проблеме, которую следует рассмотреть: в приложении с большим количеством пользователей мы хотели бы минимизировать количество запросов API, которые приложение делает, чтобы обеспечить более эффективное масштабирование.

Сокращение количества запросов API также важно, если наше приложение построено на платформе Pay As You Go, такой как Firebase или Amazon AWS, где выставление счетов производится за использованную полосу пропускания.

Эти проблемы дизайна являются основополагающими для проектирования пользовательского интерфейса и распространены, но хорошая новость заключается в том, что все эти очень распространенные архитектурные проблемы могут быть решены за один раз с помощью очень элегантного архитектурного решения: централизованного хранилища.

В этом курсе мы подробно рассмотрим наиболее часто используемую реализацию Angular в централизованном дизайне хранилища: мы собираемся охватить экосистему библиотеки Ngrx Angular Reactive Extensions.

Ngrx - это набор связанных библиотек, которые вместе предоставляют полное решение для реализации решения для хранилища в Angular. Мы рассмотрим Ngrx Store, который содержит систему реактивного хранилища, аналогичную Redux, которая является сердцем решения для магазина.

Мы также собираемся подробно рассмотреть эффекты Ngrx, что также является фундаментальной частью архитектуры магазина. Мы расскажем о Ngrx Entity, который является практичным решением для хранения коллекций в хранилище.

Мы также покажем, как пошагово настроить Ngrx DevTools, включая модуль Router Store, и мы создадим хорошую часть нашего решения для хранилища, используя Ngrx Schematics и Angular CLI.

Пройдя этот курс, вы освоитесь с решением централизованного хранилища в целом и с реализацией этой конструкции в Angular Ngrx в частности.

Вы будете чувствовать себя комфортно, проектируя новые функции приложения, используя дизайн хранилища, используя простую методологию, и вы будете знать всестороннюю экосистему библиотеки Ngrx: включая библиотеки Ngrx Store, Effects и Entity.