Question

尽管我在AngularJS世界中度过了很多时间，而在Angular世界中度过了一段时间，但我对RXJS和NGRX还是比较陌生，并且遇到了一些问题。我的NGRX设置类似于NGRX小组建议在其示例项目（https://stackblitz.com/run）中进行设置。

情况

我有一个名为“ site”的实体，该实体已存储在NGRX商店中。转到特定屏幕时，我试图从商店中获取“站点”的“ Id”，然后使用“站点ID”作为参数来调度新的NGRX操作。为此，我尝试订阅一个可观察的site $并在该订阅中调度操作。

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() {}

}

问题

在订阅中分派操作（一旦我有了站点ID），一切都会中断！浏览器完全死机，必须强制退出。我没有收到任何控制台错误，但是我必须做错了什么。

问题

这样做的正确方法是什么？我不应该在订阅中这样做吗？是否有更好的方法从商店中获取值，然后使用该值来调度另一个操作？

Answer 1

好像您具有递归：调度GetGroupsAndCategories的{{1}}动作更改输出，select(fromSite.getSite)发出新值。

如果要在导航到屏幕之前获取一些数据，请使用resolver

site$

从NGRX存储中检索数据并触发新操作

1 个答案: