如何從 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都會返回一個 stream。 由於我們這里有兩個流，為了使它們成為線性的，我們應該將它們組合起來。 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