Как я избавился от государства, наблюдаемых в угловых

Автор оригинала: Alessia Amitrano.

При разработке сложного SPA в угловом углу, использование государственной библиотеки управления делает вещи намного проще.

App Store действует как единый источник правды и содержит все данные, которые являются фундаментальными для правильного функционирования приложения. Благодаря магазине я могу получить доступ или редактировать эти данные из любого смарт-компонента (или контейнера).

Тем не менее, это может быть расстройство иметь дело со всеми подписками в магазин; Много раз я должен иметь дело с несколькими @Select () в одном компоненте, каждый из которых возвращает наблюдаемый свой свойство соответствия в App Store.

А для каждой из этих наблюдаемых, мне нужно создать подписку, которая будет уничтожена в конце жизненного цикла компонентов … Это много кода!

Но что, если бы мы могли избавиться от всех наблюдателей?

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

Предположим, что у нас есть @Select () декоратор, как это:

@Select(ListState.SelectAllItems) listItems: Observable;

Мы можем использовать его сразу с помощью трубы ASYNC ASYNC в нашем HTML:

 

   {{item}}
 

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

(Чтобы узнать о том, как настроить магазин и увидеть приведенные выше примеры в проекте, вы можете прочитать мою статью Как создать простой магазин в угловом углу. )

Представляем @ NGXS-Labs/Select-Snapshot

@ ngxs-labs/select-snapshot – экспериментальная функция для NGXS, разработанных лабораториями NGXS.

Несмотря на то, что он до сих пор не является частью официального пакета NGXS, скорее всего, станет официальной особенностью в ближайшее время. Пакет позволяет заменить декоратор @Select () @selectsnapshot () .

Но в чем разница между ними?

В то время как первое возвращает наблюдаемое, нам нужно подписаться, последний подписывается в магазин для нас и возвращает последнее значение, выделяемое! Чтобы увидеть это в действии, давайте установим пакет:

npm install @ngxs-labs/select-snapshot

А потом давайте включим его в нашу AppModule:

@NgModule({
declarations: [
AppComponent,
ListContainerComponent,
ListItemInputComponent,
ListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgxsModule.forRoot([ListState]),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsSelectSnapshotModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Теперь мы можем заменить @Select () декоратор:

//@Select(ListState.SelectAllItems) listItems: Observable;
@SelectSnapshot(ListState.SelectAllItems) listItems: string[];

И используйте значение, испускаемое из магазина без подписки!

 

   {{item}}
 

Наслаждаться!