Question

我正在阅读ngrx文档但我无法完全遵循如何使用路由器导航同步我的组件状态。

事件通过事件发送从我的子演示组件传播到链中，当它们到达容器时，它们被分派到商店。我的容器组件在构造函数中订阅了商店，因此我也可以从商店向下迁移链中的更改。

当用户直接使用URL实例化组件或通过router.navigate或[routerLink]导航时，问题出现...在这种情况下，因为来自商店的数据尚未传播到组件，所以空。

为了解决这个问题，我创建了一个类型为ROUTER_NAVIGATION的效果，检查是否正在命中相应的URL，然后将RELOAD分派给我的reducer，它会返回状态的最新副本。但是有一个问题..因为效果在容器构造之前执行（因为它还没有被导航到），所以RELOAD调度永远不会到达它（因为订阅发生在之后）。

另一种方法是什么？

这是我正在做的事情：

在我调度和订阅商店的顶级容器组件中

export class HomeComponent implements OnInit {
   search: Observable<Search>;

   constructor(private store: Store<State>,
          private route: ActivatedRoute, private router: Router) {
    this.search = store.select('app', 'search');

    this.search.subscribe(s => {
       // do whatever
    });

   // Rest of the stuff

我的效果：

    @Effect() navigateToSearch = this.actions.ofType(ROUTER_NAVIGATION)
    .filter((a: RouterNavigationAction) => a.payload.routerState.url.search('search') >= 0 )
    .map((r: RouterNavigationAction) => {
            return {type: SEARCH_RELOAD, payload: {}};
        });

在我的减速机中：

export function appReducer(state: AppState, action: Action): AppState {
switch (action.type) {
  case SEARCH_RELOAD: {
    return {...state };
  }
}

正在击中reducer，当我内省状态时它是正确的，但是组件永远不会收到存储更改事件。我应该将.subcribe移动到我的容器组件中的商店，或许是在postviewinit之后还是有其他更好的方法吗？

编辑 - 我试过这个并且它有效，但想知道是否还有另一种方式：

在构造函数中：

    router.events.filter(evt => evt instanceof NavigationEnd)
  .withLatestFrom(store.select('app', 'search'))
  .subscribe(s => {
    outletBridgeService.emitStateChanged({type: BA_SEARCH_COMPLETE_IN, payload: s[1]});
  });

ngrx：路由器操作和同步状态

0 个答案: