如何访问 ngrx/effects 中的解析器数据？（v7）

Question

我在组件中有 api 调用，这很耗时，所以我实现了解析器。我希望解析器数据存在于商店中，以供以后使用。我已经实现了 ngrx/store、ngrx/effects 和 ngrx/router-store。

组件中的当前状态

• 直接从组件中的解析器数据获取数据（路由类型为ActivatedRoute）

期望状态

为了保存解析器数据，我需要访问有效的解析器数据。所以我可以简单地在组件中调度操作并订阅状态。

• 组件中的调度操作 (LoadSubTopicDetails)
• 效果将监听操作并访问效果中相同的解析器数据

问题

{}我总是在 CustomSerializer 中的“数据”中变空。

• 在 app-routing.module.ts 中使用解析器

• 路由到 SubTopic/:subTopicId 时的控制台输出

---

如何访问效果中的解析器数据？提前致谢。

---

代码

减速器/index.ts（CustomSerializer）

export interface RouterStateUrl {
  url: string;
  queryParams: Params;
  params: Params;
  data: any;
}

export const reducers: ActionReducerMap<State> = {
  routerReducer: fromRouter.routerReducer
};

@Injectable()
export class CustomSerializer implements fromRouter.RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;
    while (route.firstChild) {
      route = route.firstChild;
    }

    const { url, root: { queryParams } } = routerState;
    const { params, data } = route;
    console.log('routerData in CustomSerializer', { url, queryParams, params, data });

    return { url, queryParams, params, data };
  }
}

减速器 / router.selector.ts

export const getRouterState = createFeatureSelector< RouterReducerState<RouterStateUrl> >('routerReducer');

组件.ts

// current state of component
this.subTopicDetails = this.route.snapshot.data['content'];

// new way (desired state), getting "resolver data" from store
this.store.dispatch(new fromCourse.LoadSubTopicDetails);
this.store.select(getSubTopicDetails)
          .subscribe(data => this.subTopicDetails = data);

Answer 1

您的效果无法（也不应该）访问解析器。

解析器应该检查存储中是否有东西，如果没有，则应该调度一个操作来检索数据。

Todd Motto 通过https://toddmotto.com/preloading-ngrx-store-route-guards上的一些很好的示例很好地解释了这一点。