Rxjs 在任何页面上仅从服务加载一个内容一次

我有一个对

/accounts

的调用，我只想在用户登陆的任何页面上立即调用一次。一旦打了这个电话，它要么将用户踢回主页，要么将该信息添加到商店。如果它在商店里，我不想再叫它

目前，我正在尝试使用

take（1）

：

在我们将帐户信息加载到商店后，我看到loadInProgress在之后的任何loadAccounts呼叫中都会被卡住。加载帐户的操作有

@ShowInProgressIndicator（ActionTypes.LoadAccounts）

，加载帐户成功/失败则有

@HideIndicator（ActionTypes.LoadAccounts）

。。。但是使用

take（1）

，我们似乎仍然会触发

show

，但是

hide

从未被触发

我也有点不确定我应该如何从多个页面处理这个问题。。。现在，在任何页面的主页组件上，我都在

ngOnInit

中使用类似的内容：

    this.store.dispatch(new AccountActions.LoadAccounts());

我有一个组件需要在账户呼叫成功后再进行一次呼叫。我是这样做的：

@Effect()
addServiceToWorkspace$: Observable<Action> = this.actions$.pipe(
    ofType(actions.ActionTypes.AddService),
    mergeMap((action: actions.AddService) =>
        this.serviceService.add(action.request).pipe(
            mergeMap(() => [new actions.AddServiceSuccess(action.request.workspaceId), new actions.StopAddingService()]),
            catchError((error) => of(new actions.AddServiceFailure(errorToErrorMessage(error)))),
        ),
    ),
);

@Effect（）
addServiceToWorkspace$：Observable=此.actions$.pipe(
类型（actions.ActionTypes.AddService），
合并映射（（操作：actions.AddService）=>
this.serviceService.add（action.request）.pipe(
mergeMap（（）=>[new actions.AddServiceSuccess（action.request.workspaceId），new actions.StopAddingService（）]），
catchError（（error）=>of（new actions.AddServiceFailure（errorToErrorMessage（error）），
),
),
);

但我注意到这会在我所在的任何页面上被调用，我不知道如何限制它。。。除了可能为每个页面创建几乎重复的

loadAccounts

action/effects之外

---

试图总结…

---

在每次会话中为存储区中的某个项目进行一次服务调用，而不管它们在哪个组件上着陆，这是一种什么样的好方法。。。并让这些组件依赖（等待）这些数据（或者从服务调用以获取数据，或者使用存储中的数据）。。。在不破坏依赖于已达到的

成功

或

失败

操作的情况下？

一个选项是向选择器管道添加

if

。大概是这样的：

this.products$ = this.store.select(getProducts).pipe(
  tap(x => {
    if (x.length === 0) {
      this.store.dispatch(ProductActions.loadProducts());
    }
  })
);

但不确定这种技术是否是“最佳实践”。

看看RxJS#shareReplay操作符。shareReplay（1）之前的所有内容将只运行一次，然后将值兑现并返回。

@Effect()
addServiceToWorkspace$: Observable<Action> = this.actions$.pipe(
    ofType(actions.ActionTypes.AddService),
    mergeMap((action: actions.AddService) =>
        this.serviceService.add(action.request).pipe(
            mergeMap(() => [new actions.AddServiceSuccess(action.request.workspaceId), new actions.StopAddingService()]),
            catchError((error) => of(new actions.AddServiceFailure(errorToErrorMessage(error)))),
        ),
    ),
);

this.products$ = this.store.select(getProducts).pipe(
  tap(x => {
    if (x.length === 0) {
      this.store.dispatch(ProductActions.loadProducts());
    }
  })
);