如何从 RxJS 可观察对象中检索最新状态？

Question

在这个 ngrx example 中，searchQuery$ 是一个 RxJS Observable。我知道当 UI.

上的搜索查询字符串发生变化时，此 Observable 会发出变化

我已经向该控件引入了另一个名为 paging$ 的 Observable 来进行分页。 Observable 发出页码。当页面更改时，我必须再次调用服务器来检索剩余的书籍。

当我在用户单击页面时调用服务器时，我得到了页码，因为它直接来自 UI，而不是 [= 已经发出的搜索字符串11=] 可观察。

如何结合使用 searchQuery$ 和 paging$ 来使用 RxJS 检索搜索字符串和页码？

更新：

事件：

用户在搜索框中键入 an。
显示前 10 本书。
用户现在点击下一页按钮。
应显示接下来的 10 本书（在带有最后一个搜索字符串 an 的 http 请求之后）。

来自 ngrx 示例的代码：

import 'rxjs/add/operator/let';
import 'rxjs/add/operator/take';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

import * as fromRoot from '../reducers';
import * as book from '../actions/book';
import { Book } from '../models/book';

@Component({
  selector: 'bc-find-book-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '
    <bc-book-search [query]="searchQuery$ | async" [searching]="loading$ | async" (search)="search($event)"></bc-book-search>
    <bc-book-preview-list [books]="books$ | async"></bc-book-preview-list>
  '
})
export class FindBookPageComponent {
  searchQuery$: Observable<string>;
  books$: Observable<Book[]>;
  loading$: Observable<boolean>;

  constructor(private store: Store<fromRoot.State>) {
    this.searchQuery$ = store.select(fromRoot.getSearchQuery).take(1);
    this.books$ = store.select(fromRoot.getSearchResults);
    this.loading$ = store.select(fromRoot.getSearchLoading);
  }

  search(query: string) {
    this.store.dispatch(new book.SearchAction(query));
  }
}

Answer 1

您可以使用 combineLatest:

updateBooks$ = Observable.combineLatest(
    this.searchQuery$,
    this.paging$
).do(([searchQuery, paging]: [string, number]) => {
    ...makeServerRequest or dispatch an action here
});

updateBooks$
    // when subscribing in a component directly, don't forget to handle component-destructions: 
    .takeUntil(destroyed$)
    .subscribe();

*如果您的代码与 ngrx 示例相同，则必须从 searchQuery$

上的商店-select 中删除 take(1)

如何从 RxJS 可观察对象中检索最新状态？

How to retrieve the latest state from an RxJS observable?

observable

rxjs

ngrx

angular2-observables