Извлечение данных из хранилища NGRX и запуск нового действия

Question

Хотя я провел много времени в мире AngularJS и немного в мире Angular, я довольно плохо знаком с RXJS и NGRX и столкнулся с некоторыми проблемами. Моя настройка NGRX аналогична настройке, которую команда NGRX рекомендует настроить в своем примере проекта (https://stackblitz.com/run).

Ситуация

У меня есть объект под названием «сайт», который я сохранил в своем магазине NGRX. Когда я попадаю на определенный экран, я пытаюсь получить «Id» сайта «Site» из своего магазина, а затем отправить новое действие NGRX, используя идентификатор сайта в качестве параметра. Для этого я пытаюсь подписаться на сайт $ observable и отправить действие в рамках этой подписки.

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as fromSite from '../../site/store/reducers/site.reducer';
import * as SiteActions from '../../site/store/actions/site.actions';
import { Site } from '../../site/site';

@Component({
  selector: 'app-category-grouping',
  templateUrl: './category-grouping.component.html',
  styleUrls: ['./category-grouping.component.scss']
})
export class CategoryGroupingComponent implements OnInit {
  site$: Observable<any>;
  site: Site;

  constructor(private store: Store<fromSite.State>) {
    this.site$ = this.store.pipe(select(fromSite.getSite));
    this.site$.subscribe(data => {
      if (data && data.site) {
        this.store.dispatch(new SiteActions.GetGroupsAndCategories(data.site.id));
        this.site = data.site;
      }
    });
}

  ngOnInit() {}

}

Проблема

Отправка действия в рамках подписки (когда у меня есть идентификатор сайта) нарушает все! Браузер полностью зависает и должен быть принудительно завершен. Я не получаю никаких ошибок консоли, но, должно быть, я что-то делаю очень неправильно.

Вопрос

Как правильно это сделать? Разве я не должен делать это в рамках подписки? Есть ли лучший способ получить значение из магазина и затем использовать это значение для отправки другого действия?

Answer 1

Похоже, у вас рекурсия: отправка GetGroupsAndCategories выход изменения действия select(fromSite.getSite), site$ испускает новое значение.

Если вы хотите получить некоторые данные перед переходом на экран - используйте resolver

@Injectable()
export class SomethingResolver implements Resolve<Action> {

  constructor (
    private store: Store<State>,
    private action$: Actions
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Action> {
    this.store.dispatch({ type: Actions.FETCH_SOMETHING });
    const responseOK = this.action$.ofType(Actions.RESPONSE_OK);
    const responseError = this.action$.ofType(Actions.RESPONSE_ERROR)
      .do(() => this.router.navigate(['']);
    return Observable.race(responseOk, responseError).take(1);
  }
}