Опишите состояние до подключения экрана
Для учебного каталога выделим список записей, признак выполняющейся загрузки, признак успешного завершения и описание ошибки. Начальное состояние содержит пустой список, но ещё не подтверждает, что каталог действительно пуст. После успешного ответа с нулём записей появляется основание показать сообщение об отсутствии элементов. После ошибки показывается другое состояние. Конкретные поля можно организовать иначе; важно, чтобы модель различала нужные пользователю ситуации и не допускала противоречивых сочетаний.
Назовите события отдельно от данных
Действие в NgRx описывает событие. В нашем примере нужны запрос загрузки, успешный ответ и неудачный ответ. При начале запроса приложение отмечает загрузку и убирает прежнее сообщение об ошибке. При успехе сохраняет полученные записи и завершает ожидание. При неудаче завершает ожидание и сохраняет сведения об ошибке. Это решения для данного примера, которые следует выразить явно. Имя события должно помогать понять, что произошло, а не скрывать несколько разных ситуаций за общей командой обновить всё.
Разделите изменение состояния и запрос
Редьюсер вычисляет следующее состояние из текущего состояния и действия как чистая функция. Он не должен выполнять сетевой запрос или изменять прежний объект состояния напрямую. Взаимодействие с внешним сервисом можно вынести в эффект. Получив результат запроса, эффект формирует соответствующее действие, которое обрабатывается редьюсером. Ошибку тоже нужно включить в этот поток. Если она исчезнет без изменения состояния, экран может продолжить показывать ожидание, хотя запрос уже завершился неудачно.
Получайте представление через селекторы
Селекторы выбирают и вычисляют нужные части состояния. Например, отдельный селектор может определять, следует ли показывать сообщение о пустом каталоге: успешная загрузка завершена, ожидания нет, ошибок нет, список пуст. Компонент использует эти сведения для отображения и отправляет действия при пользовательских событиях. Не нужно дублировать один и тот же признак в нескольких местах без ясной причины. Выбор общей системы состояния должен соответствовать масштабу задачи: каждый временный ввод в отдельном поле не обязательно переносить в глобальное хранилище.
Попробуйте на практике
Составьте бумажную схему состояний каталога растений. Не подключайте сервер и не используйте реальные пользовательские данные.
- Опишите начальное состояние и четыре наблюдаемые ситуации: запрос не запускался, идёт загрузка, получен пустой ответ, произошла ошибка.
- Назовите три события: начало запроса, успех и неудача. Укажите, какие поля изменяются после каждого.
- Пройдите последовательность с успешным пустым ответом и отдельно последовательность с ошибкой. Проверьте завершение ожидания в обоих случаях.
- Опишите условие показа пустого каталога и распределите обязанности между компонентом, редьюсером, эффектом и селектором.
Как проверить результат. Схема корректна, если пустой массив не скрывает ошибку или ожидание, оба завершения запроса меняют состояние, а сетевое взаимодействие не помещено в редьюсер.
Частые вопросы
Можно ли хранить только один признак загрузки?
Для простого ожидания он полезен, но сам по себе не различает успешный пустой ответ, ошибку и отсутствие запроса. Набор состояний определяется поведением конкретного интерфейса.
NgRx обязателен для любого проекта Angular?
Нет. Способ управления состоянием выбирают по сложности, совместному использованию данных и требованиям проекта. Важнее ясная модель, чем добавление общей библиотеки ради самого её наличия.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.