Блог

Главная - Вопросы по программированию - Как использовать @ngrx/хранить в компоненте?

Как использовать @ngrx/хранить в компоненте?

#javascript #angular #typescript #rxjs #ngrx

Вопрос:

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

Итак, допустим, я хочу получить числовое значение из хранилища, id например. В моем файле ComponentName.component.ts я бы получил доступ к этому значению следующим образом:

 id$ = this.store.select(selectId);

где selectId определяется из другого файла как:

 export const selectData = (state: AppState) => state.data;

export const selectId = createSelector(
  selectData,
  (state: DataState) => state.id,
)

Я могу легко получить доступ id$ к своему HTML-компоненту , выполнив это {{id$ | async}} , но доступ к нему из самого класса компонентов оказался немного сложнее. Для начала, тип переменной Observable<number> вместо просто number , и это затрудняет ее использование в тех случаях, когда она должна иметь number тип, например, при сравнении:

   ngOnInit(): void {
    console.log(this.id$ === 0);
  }

Ошибка машинописного текста, которую я получаю из приведенного выше кода, заключается в:

TS2367: Это условие всегда будет возвращать «false», так как типы «число» и «Наблюдаемый» не пересекаются.

И id$ само ведение журнала консоли подтверждает, что это действительно Observable тип, так что это наводит меня на мысль, что я делаю что-то не так, но я не уверен, что именно. Любая помощь будет признательна!!!

Комментарии:

1. Мне бы не показалось, что ты сделал что-то не так. Вы просто еще не знакомы с работой с наблюдаемыми объектами! 🙂

2. Спасибо @BizzyBob , приятно знать, что в моем коде нет никаких проблем. Ваш комментарий побудил меня взглянуть на документацию для наблюдаемых объектов, и я нашел это rxjs.dev/руководство/наблюдаемые#подписка на наблюдаемые объекты, что именно то, что я искал.

3. Я также не советовал бы вам напрямую использовать такие селекторы в компоненте. Общая схема выглядит так: this.store.pipe(селектор).subscribe(значение);

Ответ №1:

id$ является Observable , и вы можете получить доступ к его значению, подписавшись на него из класса компонента с помощью subscribe функции или из шаблона компонента с помощью async канала.

В Классе Компонентов:

 ngOnInit(): void {
  this.id$.subscribe(id => console.log(id));
}

В Шаблоне Компонента:

 <span>{{ id$ | async }}</span>

Проверьте официальные документы Angular о Observable (ов):

https://angular.io/guide/observables

Метки: