Angular 从功能模块ngrx更改根状态属性

Angular 从功能模块ngrx更改根状态属性,angular,ngrx,Angular,Ngrx,问题描述 我有一个微调器模块,它根据根状态下的加载属性显示/隐藏。这被放置在AppComponent中 export interface AppState { loading: boolean } 我有多个延迟加载的功能模块,每个模块都通过自己的效果集获取数据。执行此操作时,我希望在效果开始时将AppState.loading更新为true,然后在效果完成时将其设置回false 我该怎么做 解决问题 作为一种解决方法,在触发我的功能动作之前,我将调度根动作中定义的动作(将加载设置为true

问题描述 我有一个微调器模块,它根据根状态下的加载属性显示/隐藏。这被放置在AppComponent中

export interface AppState {
  loading: boolean
}
我有多个延迟加载的功能模块,每个模块都通过自己的效果集获取数据。执行此操作时,我希望在效果开始时将AppState.loading更新为true,然后在效果完成时将其设置回false

我该怎么做

解决问题 作为一种解决方法,在触发我的功能动作之前,我将调度根动作中定义的动作(将加载设置为true),然后功能效果将返回一个动作数组。其中一个操作同样属于根操作(将加载设置为false)

服务.ts

public getMilestonesAction(q: string) {
  this.store.dispatch(AppActions.loadingAction({ loading: true})); // This belongs to root-actions
  return this.store.dispatch(CalendarActions.getEntriesAction({ q })); // This belongs to feature-actions
}
getMilestonesEffect$ = createEffect(() => this.action$
  .pipe(
    ofType(CalendarActions.getEntriesAction),
    mergeMap(action => this.calendarService.getMilestones(action.q)
    .pipe(
      switchMap((data: Milestone[]) => [AppActions.loadingAction({ loading: false }), CalendarActions.getEntriesSuccessAction({ milestones: data })]),
      catchError((error: any) => from([AppActions.loadingAction({ loading: false }), CalendarActions.getEntriesFailureAction( { error: this.getErrorMessage(error) })]))
    ))
  ));
效果。ts

public getMilestonesAction(q: string) {
  this.store.dispatch(AppActions.loadingAction({ loading: true})); // This belongs to root-actions
  return this.store.dispatch(CalendarActions.getEntriesAction({ q })); // This belongs to feature-actions
}
getMilestonesEffect$ = createEffect(() => this.action$
  .pipe(
    ofType(CalendarActions.getEntriesAction),
    mergeMap(action => this.calendarService.getMilestones(action.q)
    .pipe(
      switchMap((data: Milestone[]) => [AppActions.loadingAction({ loading: false }), CalendarActions.getEntriesSuccessAction({ milestones: data })]),
      catchError((error: any) => from([AppActions.loadingAction({ loading: false }), CalendarActions.getEntriesFailureAction( { error: this.getErrorMessage(error) })]))
    ))
  ));

这是解决这个问题的正确方法吗?

这是正确的,你做得对

root
feature
仅允许您为需要它们的模块延迟加载减缩器和效果,但它们都可以完全访问存储并使用所需的操作


Angular建议拥有
核心/功能/共享的
模块组。在这种情况下,加载操作将在
核心
共享
中进行,您觉得更合适。

在共享模块中使用公共状态似乎是一个很好的建议。谢谢你!我会等一段时间,看看是否有人有其他选择。否则我会把你的回答记为答案。