angular - 如何将 ngrx/store 与 Angular 路由器防护装置连接

Question

我是 ngrx/store 的初学者，这是我使用它的第一个项目。

我已经成功地使用 ngrx/store 设置了我的 Angular 项目，并且我能够在像这样初始化我的主要组件后分派(dispatch)加载操作:

ngOnInit() { this.store.dispatch({type: LOAD_STATISTICS}); }

我已经设置了一个效果来在调度此操作时加载数据:

@Effect()
loadStatistic = this.actions.ofType(LOAD_STATISTICS).switchMap(() => {
    return this.myService.loadStatistics().map(response => {
        return {type: NEW_STATISTICS, payload: response};
    });
});

我的 reducer 是这样的:

reduce(oldstate: Statistics = initialStatistics, action: Action): Statistic {
    switch (action.type) {
        case LOAD_STATISTICS:
            return oldstate;
        case NEW_STATISTICS:
            const newstate = new Statistics(action.payload);

            return newstate;
    ....

虽然这行得通，但我无法理解如何将它与路由器防护一起使用，因为我目前只需要分派(dispatch)一次 LOAD_ACTION。

此外，组件必须分派(dispatch) LOAD 操作以加载初始数据对我来说并不合适。我希望商店本身知道它需要加载数据，而我不必先发送操作。如果是这种情况，我可以删除组件中的 ngOnInit() 方法。

我已经研究过 ngrx-example-app，但我还没有真正理解它是如何工作的。

编辑:

在添加一个返回 ngrx-store observable 的 resolve guard 之后，路由没有被激活。这是解决方案:

   @Injectable()
  export class StatisticsResolver implements Resolve<Statistic> {
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Statistic> {
        // return Observable.of(new Statistic());
        return this.store.select("statistic").map(statistic => {
        console.log("stats", statistic);

        return statistic;
    });
}

这是路线:

const routes: Routes = [
    {path: '', component: TelefonanlageComponent, resolve: {statistic:  TelefonieStatisticResolver}},
];

Answer 1

我不太明白为什么要通过解析器将解析后的数据发送到您的组件。设置 ngrx 存储的重点是拥有单一数据源。所以，您在这里要做的只是确保数据是真实的。休息，组件可以使用选择器从存储中获取数据。

我可以看到您正在从组件的 ngOnInit 方法中调用 LOAD_ACTION。您不能调用一个操作来解析数据，然后在您调用该操作的 Init 上将数据导向组件!这就是您的路由器未加载路由的原因。

不确定你是否理解，但这是有道理的!

简单来说，你做的就是这个。您正在锁一个房间，然后将 key 从门下方的缝隙中插入，然后想知道为什么门打不开。

随身携带 key !

守卫的解析方法应该调用LOAD_ACTION。然后解析应该等待数据加载，然后路由器应该继续到组件。

你是怎么做到的？

其他答案是设置订阅，但问题是你不想在你的守卫中这样做。在守卫中订阅不是好的做法，因为他们随后需要取消订阅，但如果数据未解析，或者守卫返回 false，则路由器永远无法取消订阅，我们就会一团糟。

所以，使用take(n)。此运算符将从订阅中获取 n 值，然后自动终止订阅。

此外，在您的操作中，您将需要 LOAD_STATISTICS_SUCCESS 和 LOAD_STATISTICS_FAIL。因为您的服务方法可能会失败!

在 reducer State 中，您需要一个 loaded 属性，当服务调用成功并且 时该属性变为 true调用 LOAD_STATISTICS_SUCCESS 操作。

在主 reducer 中添加一个选择器，getStatisticsLoaded 然后在您的 gaurd 中，您的设置将如下所示:

resolve(): Observable<boolean> {

this.store.dispatch({type: LOAD_STATISTICS});

return this.store.select(getStatisticsLoaded)
    .filter(loaded => loaded)
    .take(1);

因此，只有当 loaded 属性变为 true 时，filter 才会允许流继续。 take 将获取第一个值并传递。此时解析完成，路由器可以继续。

同样，take 将终止订阅。