Анонс NGXS 3.5

NGXS v3.5 - долгожданный релиз. Это результат месяцев напряженной работы команды, непоколебимой приверженности обеспечению обратной совместимости библиотеки и постоянного внимания к тому, что улучшит ядро ​​библиотеки без ущерба для простоты, которую она предлагает.

Обзор

• 🚀 Поддержка Angular 8 (официально)
• 🎨 Параметры селектора
• 🔌 Улучшения плагина

Поддержка Angular 8

NGXS 3.4 отлично работает с Angular 8, но теперь, начиная с версии 3.5, мы официально поддерживаем эту последнюю версию Angular. Дорога до этой официальной поддержки была долгой, в основном из-за того, что соответствующее обновление TypeScript вызвало проблемы с обратной совместимостью библиотеки.

Одной из наших основных забот было соблюдение поддержки предыдущих версий Angular. Определения типов, создаваемые TypeScript 3.4 (что является требованием компилятора Angular 8), к сожалению, не были обратно совместимы с предыдущими версиями Typescript. После долгой борьбы с тонкостями TypeScript нам в конечном итоге пришлось изменить наш процесс сборки, чтобы сгенерировать определения типов с использованием TypeScript 3.1, но по-прежнему создавать выходные данные javascript с помощью компилятора Angular 8. Такой подход удовлетворил наше тщательное тестирование, и мы уверены, что полностью поддерживаем эту новую версию Angular.

Другой проблемой, с которой мы столкнулись, была строгость набора текста для этой новой версии TypeScript. В частности, многие стандартные операторы состояния в NGXS используют преимущества определенных аспектов вывода типов в TypeScript для достижения своей магической безопасности типов. В новой версии TypeScript вводится тип unknown, тогда как ранее тип {} допускал более свободный вывод типа. После улучшения многих аспектов типизации операторов нам пришлось отказаться от идеальных типов TypeScript 3.4 для операторов из-за риска нарушения совместимости с предыдущими версиями TypeScript.

Важное примечание
Из-за проблем, указанных выше, у вашего проекта может быть небольшая вероятность возникновения проблем с выводом типа после обновления до TypeScript 3.4, которое поставляется вместе с обновлением Angular. Эти «критические изменения» вызваны изменениями в TypeScript, а не изменениями в NGXS.
Например, если у вас была некоторая неявная типизация для оператора patch, например:

patch({
 users: updateItem(
   user => user.id === 123, 
   patch({ name: ‘Mark’ })
 )
})

TypeScript может жаловаться на вывод типа, и поэтому вам нужно будет более конкретно указать свои типы (что в любом случае является хорошей практикой):

patch({
 users: updateItem<User>(
   user => user.id === 123, 
   patch({ name: ‘Mark’ })
 )
})

Мы уверены, что сделали все возможное со своей стороны, чтобы смягчить боль обновления TypeScript.

Параметры селектора

В NGXS 3.5 мы вводим возможность предоставлять параметры селектора на глобальном уровне, уровне состояния или индивидуальном уровне селектора. Были представлены два варианта:

• supressErrors: это настраивает, должны ли селекторы подавлять внутренние ошибки или нет. По умолчанию: true
• injectContainerState: это настраивает поведение по умолчанию для того, как селекторы, определенные в классе состояний, объединяются с другими селекторами. Если это значение истинно, то состояние контейнера будет введено в качестве первого параметра метода, если оно ложно, то только предоставленные селекторы будут предоставлены в качестве параметров для объединенного селектора. См. Раздел документации о объединении селекторов для получения более подробной информации об этой настройке. По умолчанию: true

Оба эти параметра настроены на изменение своих значений по умолчанию в версии NGXS v4, чтобы сделать отладку селекторов более ясной (supressErrors: false) и оптимизировать запоминание объединенных селекторов (injectContainerState: false).

С помощью этих параметров настройки селектора разработчики смогут:

• Воспользуйтесь преимуществами поведения NGXS v4 до того, как он появится.
• Чтобы смягчить влияние измененных значений по умолчанию в NGXS v4, когда он поступит, верните их к значениям по умолчанию v3, а затем обновите поведение по частям.

Параметры селектора могут быть предоставлены в свойстве selectorOptions глобальных параметров, переданных вызову NgxsModule.forRoot (см. Параметры модуля), или через декоратор @SelectorOptions на уровне класса или метода, чтобы настроить поведение селекторов в определенной области.

См. Раздел Параметры выбора в документации для получения дополнительной информации.

Улучшения и исправления плагина

Плагин маршрутизатора

• Добавлено новое действие RouterDataResolved для плагина @ ngxs / router.
  Действие RouterNavigation запускается при каждом изменении маршрута, но, к сожалению, оно срабатывает до того, как маршрутизатор разрешит данные, связанные с маршрутом (в angular, который постоянно запускается). Новое действие RouterDataResolved позволяет нам теперь реагировать на изменения данных маршрута. Он отправляется каждый раз, когда маршрутизатор разрешает данные, относящиеся к маршруту (пока к маршруту подключены резолверы). Это используется внутренне, чтобы гарантировать, что состояние обновляется с учетом последних разрешенных данных, но также может быть подписано из потока Actions для ваших собственных нужд маршрутизации.
• Исправлена ​​проблема с подключаемым модулем маршрутизатора, когда изменение параметров запроса не приводило к отправке действия RouterNavigation.
• Исправлена ​​проблема с подключаемым модулем маршрутизатора при использовании вместе с подключаемым модулем хранилища, когда пользователь не мог перейти по URL-адресу, введенному вручную, поскольку предыдущий URL-адрес в хранилище вызывал бы перенаправление.

Плагин форм

• Добавлен условный отказ в плагине формы NGXS.

Плагин HMR

• Плагин HMR теперь удаляет старые стили после перезагрузки.

Плагин Logger

• Плагин логгера теперь совместим с IE11, поскольку мы удалили неподдерживаемый объект `Object.entries`.

Плагин хранилища

• Исправлена ​​ошибка, из-за которой использование плагина хранилища приводило к нарушению SSR.

Плагин Websocket

• Добавлено новое действие под названием WebSocketConnectionUpdated, которое отправляется только в тех случаях, когда существует существующее соединение, а действие ConnectWebSocket отправляется для открытия нового. Затем старое соединение будет закрыто, действие WebSocketConnectionUpdated будет отправлено и новое соединение будет открыто. В этом случае действие WebSocketDisconnected не будет запущено, потому что плагин не потерял соединение, а просто изменил свое соединение.
• Исправлена ​​проблема, из-за которой отправка действия WebSocketDisconnected приводила к тому, что сокет не мог впоследствии повторно подключаться и получать сообщения.

Другие исправления ошибок

• Исправлена ​​проблема, связанная с тем, что метод жизненного цикла ngxsOnInit не вызывался в корневых состояниях при определенных сценариях.

Новые проекты NGXS Labs

@ ngxs-labs / выберите снимок

Этот плагин предоставляет @SelectSnapshot декоратор, который работает так же, как и стандартный @Select декоратор, с одним основным отличием ... вы можете получить доступ к состоянию, не просматривая наблюдаемое. Он удобно переопределяет метод получения для свойства, который возвращает последний снимок состояния.

Вот простой пример использования этого нового декоратора:

Примечание. при использовании этого подключаемого модуля рекомендуется изменить стратегию выполнения для NGXS на NoopNgxsExecutionStrategy в параметрах корневого модуля. Это сделано для того, чтобы все изменения состояния происходили в пределах угловой зоны и запускали компоненты для обновления с последним значением из этого свойства. См. Документацию здесь для получения дополнительной информации.

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

Полный текст этого плагина можно найти здесь:

И репо находится здесь:

@ ngxs-labs / immer-adapter (пересмотренный подход)

Добавьте декораторы ImmutableSelector, ImmutableContext для более простого и безопасного обновления неизменяемого состояния с помощью Immer.

Когда у вас более глубоко вложенное состояние, становится сложнее управлять аспектами неизменности:

@ngxs-labs/immer-adapter позволяет вам выразить это гораздо яснее, используя мощь прокси Immer:

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

Декоратор @ImmutableSelector позволяет разработчику изменять состояние в селекторе и возвращать измененные данные, не беспокоясь о внесении изменений в базовое неизменяемое состояние. Это особенно полезно, чтобы избежать ошибок, таких как использование метода sort() массива, который может изменить базовый массив.

Репо для этого плагина находится здесь:

Иванов Макс (splincode) написал отличную статью о том, как этот плагин может помочь с неизменяемостью, в третьей части своей серии блогов по этой теме:

Некоторые полезные ссылки

Если вам нужна дополнительная информация об изменениях в этом выпуске, пожалуйста, загляните в наш журнал изменений. Код для NGXS доступен по адресу https://github.com/ngxs/store, а наши документы доступны по адресу http://ngxs.io/. У нас есть процветающее сообщество на нашем слабом канале, так что приходите и присоединяйтесь к нам, чтобы быть в курсе последних событий. Вот ссылка-приглашение на слабину: https://now-examples-slackin-eqzjxuxoem.now.sh/