使用选择器读取应用程序状态

要在 Redux 中读取应用程序状态，我们需要使用 @ngrx 的 Store 类上的 select() 方法。此方法创建并返回一个绑定到应用程序状态中特定属性的 Observable。

例如，您将如何选择 counter 对象：

store.select('counter'); // Returns Observable<Counter>

为了获取计数器的 currentValue，我们可以传入一个字符串数组，其中每个字符串按照指定的顺序从应用程序状态中一次提取一个属性：

store.select(['counter', 'currentValue']); // Returns Observable<number>

虽然 select() 允许传入字符串的几种变体，但它有它的缺点——即在执行代码之前，您实际上不会知道提取是否正常工作。

因此， select() 也允许您使用函数选择值，这使事情更加类型安全，并且您的选择器将更容易被您的 IDE 重构。

store.select(appState => appState.counter.currentValue);

创建 Counter 服务

虽然您可以直接在 Angular 组件中注入 Store 和 select 值，但最好将此功能包装到单独的服务中。这种方法封装了所有的选择逻辑，并消除了在整个应用程序中重复选择路径的任何重复。

让我们通过构建 CounterService 示例将所有内容联系在一起：

app/services/counter.service.ts

import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';
import {AppState} from '../models';
@Injectable()
export class CounterService {
  constructor(private store: Store<AppState>) {}
  getCurrentValue(): Observable<number> {
    return this.store.select(appState => appState.counter.currentValue)
      .filter(Boolean);
  }
}

因为 select() 返回一个 Observable，所以 getCurrentValue() 方法还应用了 filter() 以确保订阅者不会收到任何虚假值。这极大地简化了组件中的代码和模板，因为它们不必在使用该值的任何地方反复考虑虚假情况。