如何访问 ngrx/effects 中的解析器数据?(v7)

问题描述

我在组件中有api 调用，这很耗时，所以我实现了

理想状态

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

• 组件中的调度动作(LoadSubTopicDetails)
• effects 将监听 action 并访问相同的 resolver data in effects

问题

我总是在 CustomSerializer 的数据"中得到空的 {}.

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

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

---

实际上如何访问解析器数据?提前致谢.

代码

reducers/index.ts (CustomSerializer)

导出接口 RouterStateUrl {网址:字符串；queryParams:参数；参数:参数；数据:任何；}export const reducers: ActionReducerMap= {routerReducer: fromRouter.routerReducer};@Injectable()导出类 CustomSerializer 实现 fromRouter.RouterStateSerializer{序列化(路由器状态:RouterStateSnapshot):RouterStateUrl {让路由 = routerState.root;而 (route.firstChild) {路线 = 路线.firstChild;}const { url, root: { queryParams } } = routerState;const { 参数，数据 } = 路线；console.log('routerData in CustomSerializer', { url, queryParams, params, data });返回 { url, queryParams, params, data };}}

reducers/router.selector.ts

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

component.ts

//组件的当前状态this.subTopicDetails = this.route.snapshot.data['content'];//新方式(所需状态)，从存储中获取解析器数据"this.store.dispatch(new fromCourse.LoadSubTopicDetails);this.store.select(getSubTopicDetails).subscribe(data => this.subTopicDetails = data);

解决方案

您的效果无法(也不应该)访问解析器.

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

Todd Motto 在 https://toddmotto 上用一些很好的例子很好地解释了这一点.com/preloading-ngrx-store-route-guards.

I have api calls in the component which is time taking, so i have implemented resolver. I want the resolver data to be present in the store, for later use. I have implemented ngrx/store, ngrx/effects and ngrx/router-store.

Current state in component

• getting data directly from resolver data in component (route is of type ActivatedRoute)

Desired state

To keep the resolver data in store, I need to access resolver data in effects. So i can simply dispatch action in component and subscribe the state.

• dispatch action (LoadSubTopicDetails) in component
• effects will listen to the action and access the same resolver data in effects

Problem

I am always getting empty {} in "data" in CustomSerializer.

• using resolver in app-routing.module.ts

• console output when routed to SubTopic/:subTopicId

---

How to access resolver data in effects? Thanks in advance.

---

Code

reducers / 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 };
  }
}

reducers / router.selector.ts

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

component.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);

解决方案

Your Effects can't (and shoudn't) access the resolvers.

The resolvers should check if there is something in the store, and if there isn't it should dispatch an action to retrieve the data.

Todd Motto explains this very well with some good examples at https://toddmotto.com/preloading-ngrx-store-route-guards.

这篇关于如何访问 ngrx/effects 中的解析器数据?(v7)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！