Question

我正在查看ngrx example app并尝试找出在查找页面上初始化状态的好方法（http://localhost:4200/#/books/find）。

好像我应该能够将它添加到AppComponent

ngOnInit() { 
    this.store.dispatch(new book.Search('Michael Jordan')); 
}

但是这不会填充FindBookPageComponent中的商店似乎它在链条中发生得太早了。想知道是否有人可以解释这一点并提供更好的方式。

注意：将ngOnInit添加到FindBookPageComponent可以正常工作，但每次有人导航时都会调用它。如果有意义，我希望这更像是一个初始状态。

谢谢！

Answer 1

最好把它放在路由器防护装置中=＆gt; canActivate（）

检查商店中是否存在数据;否则调度加载数据

canActivate(): Observable<boolean> {
  return this.checkStore().pipe(
    switchMap(() => of(true)),
    catchError((error) => of(false))
    );
}

checkStore(): Observable<boolean> {
  return this.store.select(fromStore.getDataLoaded).pipe(
    tap(loaded => {
      if (!loaded) {
        this.store.dispatch(new fromStore.LoadDataCollection());
      }
    }),
    filter(loaded => loaded),
    take(1)
    );
}

父组件中服务器的初始状态

1 个答案: