javascript - 如何创建嵌套的商店管道？

Question

我正在尝试实现一个用例，其中我有两个商店，我必须从中按顺序获取值。目标是最终使用从商店中提取的这两个值调用 http 服务。

我尝试创建两个单独的可观察对象以分别取回值，然后将它们传递给 httpClient - 但我很好奇我是否应该这样做，或者我是否应该像嵌套管道选择一样尝试以下操作？

function userservice() {
    this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(category => {
        this.otherstore.pipe(
        select(fromRoot.getUsers),
        take(1),
        switchMap(user => {
           return httpClient.get( apistuff with params user and category)
        })
    })
}

我想知道这是否是正确的方法，或者我是否应该查找两个变量 user 和 category 作为 distincy selects() 然后调用 httpclient？

Answer 1

从技术上讲，您的代码很好，但最好避免嵌套，因为它会导致 promise 出现的情况 - 回调 hell 。如果您避免嵌套，那么它会使您的代码更容易阅读/理解。

如果您的内部 observable 依赖于外部 observable，则需要进行嵌套，否则您可以简单地组合这些 observable 以在您的 observable 管道中发出组合值。

在你的例子中 -

如果您的类别和用户是独立的，那么您应该执行以下操作以避免嵌套 -

 function userservice() {

  return combineLatest( //or you can use zip operator as per your requirement
    this.store.pipe(
      select(fromRoot.getCategories),
      take(1)),
    this.otherstore.pipe(
        select(fromRoot.getUsers),
        take(1))
  ).pipe(
    switchMap(([categories, users]) => {
        return httpClient.get( apistuff with params user and category);
    })
  );

如果用户依赖类别那么你可以做下面的[这个例子只是为了展示需要的嵌套；与你的场景无关] -

function userservice() {

  return this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(categories => {
      return this.httpClient.get(/*get users for categories*/)
                 .pipe(
                   switchMap(users => this.httpClient.get( //apistuff with params user and category))
                 );
    })
  )  
}

你可以通过如下所示更改代码来避免嵌套在上面的代码中 -

function userservice() {

  return this.store.pipe(
    select(fromRoot.getCategories),
    take(1),
    switchMap(categories => {
      return zip(this.httpClient.get(/*get users for categories*/), of(categories)); //you can use combineLatest as well as per your need
    }),
    switchMap(([users, categories]) => {
      return httpClient.get( apistuff with params user and category);
    })
  )  
}