代码之家 › 专栏 › 技术社区 › morphatic

使用@ngrx/store时,这是访问类内状态变量的正确方法吗?

ngrx-store rxjs typescript angular

2

morphatic · 技术社区 · 8 年前

我有一个服务需要根据存储在 AppState 。这是一个 大大地 我的服务的简化版本:

import { Injectable } from '@angular/core';
import { Store, select } from '@ngrx/store';

interface AppState {
  foo: boolean;
}

@Injectable()
export class FooProvider {

  private isFoo: boolean;

  constructor(private store: Store<AppState>) {
    // is it foo?
    store.pipe(select('foo')).subscribe((foo: boolean) => {
      this.isFoo = foo;
    });
  }

  isItFoo = (): string => this.isFoo ? "it's foo!" : 'nope, not foo';
}

问:这是访问和使用存储在 AppState公司 在类内 在应用程序中使用 @ngrx/store ?

在a中 Component 我想我可以用 foo 变量更简单地使用 async 管道,如:

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

interface AppState {
  foo: boolean;
}

@Component(
  selector: 'foo-component',
  template: `<p>{{ ( foo$ | async ) ? "it's foo!" : "nope, not foo" }}</p>`
)
export class FooComponent {

  private foo$: Observable<boolean>;

  constructor(private store: Store<AppState>) {
    this.foo$ = store.pipe(select('foo'));
  }
}

是否有更好/更容易/更正确的方法来访问类中的状态变量?

1 回复 | 直到 8 年前

1

Estus Flask 8 年前

如中所述 this issue ,ngrx故意取消了获取当前值的功能,因为它被滥用,现在只有通过黑客才能实现:

function getValue(o) {
  let value;
  o.take(1).subcribe(v => {
    value = v;
  });
  return value;
}

观测值的目的是提供数据流。存储值可以更改,如果使用它的服务未重新实例化,它将继续使用旧值。因此,可以预期,一旦有一个流,它就会被转换并与其他流相结合,并且只在使用它的地方订阅(大多数情况下,这将是一个视图,可以用于 async 管道)。

在这种情况下,它将是:

isItFoo$ = store.pipe(
  select('foo'),
  map((foo: boolean) => foo ? "it's foo!" : 'nope, not foo')
);