angular - 使用 @ngrx/store 时,在类中访问状态变量的正确方法是这样吗?
我有一个服务需要根据存储在 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';
}
问题:在使用
@ngrx/store的应用程序中,在类中访问和使用存储在AppState中的变量,这种方式是“正确”的吗?
在一个Component中,我相信我可以使用async管道更简单地使用foo变量,如下所示:
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
正如在此问题中解释的那样,获取当前值的功能在 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')
);
