如何从 NGRX 存储中线性获取数据

Question

我很难干净利落地使用 NGRX 的数据访问模式。所以现在我正在从我的 NGRX 存储中提取数据，如下所示：

logBooksAndAuthors() {
    const books$ = this.store.select(store => store.books);
    const authors$ = this.store.select(store => store.authors);

    books$.subscribe((books: Book[]) => {
       authors$.subscribe((authors: Authors[]) => {
            console.log(books);
            console.log(authors);
        });
    });
}

根据业务逻辑，以这种方式从存储中获取数据可能会导致嵌套非常深的回调。理想情况下，我想以更线性的方式重写订阅：

    const books$ = this.store.select(store => store.books);
    const authors$ = this.store.select(store => store.authors);

    const books = books$.subscribe((books: Book[]) => {
        return books;
    });

    const authors = $authors.subscribe((authors: Author[]) => {
        return authors;
    });

    console.log(books); // logs out a subscriber
    console.log(authors); // logs out a subscriber
}

我知道我上面的代码不起作用，因为在这种情况下 books 和 authors 被分配给订阅者，但我想指出我应该如何编写代码。提前谢谢你，如果我能澄清我的问题，请告诉我。

Answer 1

每个 this.store.select 将 return 一个流。由于我们这里有两个流，为了使它们呈线性，我们应该将它们组合起来。 RxJS 有很多组合运算符。

这里是使用 combineLatest

的例子

logBooksAndAuthors() {
  combineLatest([
    this.store.select(store => store.books),
    this.store.select(store => store.authors)
  ]).subscribe(([books, authors]) => {
    console.log(books, authors)
  })  
}

在此处检查适合您情况的其他组合运算符 https://www.learnrxjs.io/learn-rxjs/operators/combination

如何从 NGRX 存储中线性获取数据

How to linearly get data from NGRX store

ngrx

angular