NgRx无需订阅即可获取值

问题描述 投票:1回答:2

[我正在通过一些ngrx教程工作,我认为我开始全神贯注于它。

我不明白如何做像从Store中获取值一样简单的事情:

目标:从存储中获取值,而无需subscribe。IE:store.myStorePropertystore.getValue(<selector>)或?

据我了解,从商店中获取价值的唯一方法是执行以下操作:

  private readonly _store: Store<ApplicationState>;
  // ...
  this._store.select(state => state.currentUser).subscribe(user => {
    if (!user) { return; }
    // ...
  });

问题:是否有任何可能的方法可以立即从商店中获取价值而无需订阅?

我可能很难将大脑包裹在selectors上,但是我有点以为那是他们的目的。来自文档的示例:

import { createSelector } from '@ngrx/store';

export interface FeatureState {
  counter: number;
}

export interface AppState {
  feature: FeatureState;
}

export const selectFeature = (state: AppState) => state.feature;

export const selectFeatureCount = createSelector(
  selectFeature,
  (state: FeatureState) => state.counter
);

在此示例中,我以为我可以直接调用selectFeature或将其传递到this._store.select(selectFeature)以获取实际值,但它返回observable(并希望您订阅它)。

我的主要用例是,我想在应用程序的整个生命周期中访问当前用户信息。我有一个effect,可以从服务器获取该信息,并且一切正常。但是,我对如何仅从store访问值而不必到处撒.subscribe感到有些困惑。

是,我看过this,但对我没有帮助。

angular typescript redux rxjs ngrx
2个回答
0
投票

您可以使用这样的异步管道

export class MyComponent implements OnInit {
    data$: Observable<any>;

    constructor(private store: Store<ApplicationState>) {}

    ngOnInit() {
        this.data$ = this.store.pipe(select(yourSelector));
    }
}

然后您认为

<app-data [data]="data$ | async"></app-data>

0
投票

您如何添加自己的订阅函数并每次调用该函数?

  getValue(obj: Observable<any>){
    let value: any;
    obj.subscribe(v => value = v);
    return value;
  }


  showme(){
    console.log(this.getValue(this.user$));     // single value => works
    console.log(this.getValue(this.projects$)); // array => works
  }

请注意,您失去了可观察对象的魔力,因此,当值更改时,它不会更新您的前端等。。。只有在要求输入值时,您才会拥有当下的值。

refence to stackblitz demo

© www.soinside.com 2019 - 2024. All rights reserved.