Angular: подписка на ngrx store срабатывает несколько раз - PullRequest
Новая
       18

Angular: подписка на ngrx store срабатывает несколько раз

0 голосов
/ 01 октября 2018

У меня есть приложение с настроенным магазином ngrx.Я подписываюсь на него, чтобы получать данные из хранилища в функции, которая срабатывает при нажатии кнопки, я получаю нужные данные, но каждый раз, когда я запускаю функцию, кажется, что она возвращает несколько копий данных, и когда язапустить его снова, он растет в геометрической прогрессии.

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

this.data$ = this.store.pipe(select(selectors.dataSelector));

Тогда моя функция, которая срабатывает при нажатии (в моем html) 

  onClick() {
     this.data$.subscribe(x =>
       console.log(x)
     );
   }

Итак, после одной итерации:

enter image description here

После двух:

enter image description here

После трех:

enter image description here

И так далее.Может кто-то, почему это происходит, или предложить другой способ получения данных из магазина в component.ts?Мне нужно вернуть данные только один раз, иначе производительность сильно пострадает.

Спасибо!

1 Ответ

0 голосов
/ 01 октября 2018

Потому что вы подписываетесь на data$ каждый раз, когда нажимаете.Если вы хотите сделать это onClick, возможно, отмените подписку после console.log(x) или используйте rxjs take(): 

  onClick() {
     this.data$.pipe(take(1)).subscribe(x =>
       console.log(x)
     );
   }

Из документов:

Зачем использовать take

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

https://www.learnrxjs.io/operators/filtering/take.html

Но я бы предложил, чтобы вы подписались на магазин где-то еще, например, в конструкторе вашего компонента: 

constructor(store) {
   store.pipe(select(selectors.dataSelector)).subscribe(x => {
       this.componentX = x;
   });
}

, тогда просто щелкнув мышью, вы увидите такие данные: 

onClick() {
   console.log(this.componentX);
}

Таким образом, вы подписываетесь только один раз, когда компонент инициализируется.

Еще одна вещь о подписках и о том, как предотвратить утечку памяти, - это всегда отписываться, когда компонент уничтожается.

https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/

...