NgRx无需订阅即可获取价值 [英] NgRx Get value without subscribing

问题描述

我正在通过一些 ngrx 教程工作，我认为我的头脑已经开始缠绕它.

我不了解的是如何做像从Store获取值一样简单的事情:

目标:从商店获取价值，而无需subscribe. IE:store.myStoreProperty或store.getValue(<selector>)或?

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

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

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

我可能很难将自己的大脑包在选择器上，但我有点以为这是他们的目的.文档中的示例:

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(因此希望您订阅它). /p>

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

是的，我已经看到了这，但这对我没有帮助.

解决方案

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

   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
  }
 

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

参考stackblitz演示

调用选择器的方式似乎不正确，应该这样导入它们:

import * as fromAuth from '../../auth/state/reducers';
import * as fromData from '../../data/state/reducers';

然后您像这样构建构造函数:

constructor(private store: Store<fromAuth.State & fromData.State>) {

您的选择将可能是这样，

 this.user$ = store.pipe(select(fromAuth.getUser));
let user = this.getValue(store.pipe(select(fromAuth.getUser))); // this would get you the current user value

 

检查退出ngrx示例应用，特别是我要引用的该索引页面，以检出选择器. ngrx tutorials and I think I'm starting to get my brain wrapped around it.

What I don't understand is how to do something as simple as getting a value from the Store:

Goal: Get a value from the store without having to subscribe to it. IE: store.myStoreProperty or store.getValue(<selector>) or ?

From what I understand the only way to grab a value from the store is to do something like this:

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

Question: Is there any possible way to "instantly" get a value from the store without having to subscribe?

I might just be having trouble wrapping my brain around selectors but I kind of thought that was what they were for. Example from the docs:

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
);

In this example, I was thinking that I could just call selectFeature or pass it into this._store.select(selectFeature) to get the actual value, but it returns an observable (and thus wanting you to subscribe to it).

My main use case here is that I want to access current user info throughout the lifecycle of my app. I have an effect that is getting that information from the server, and it all works great. However, I am a little confused on how I can simply just access the value from the store without having to sprinkle .subscribe everywhere.

And yes, I have seen this but it doesn't help me.

解决方案

How about you add your own subscribe function and call that every time?

  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
  }

Do note that you lose the magic of observables, so when the value changes, it won't update you frontend etc... You will just have the value of the moment in time when asked for the value.

refence to stackblitz demo

The way you're calling you selectors seems wrong you should be importing them like this:

import * as fromAuth from '../../auth/state/reducers';
import * as fromData from '../../data/state/reducers';

And you build your constructor like this:

constructor(private store: Store<fromAuth.State & fromData.State>) {

Your select could then be like this,

this.user$ = store.pipe(select(fromAuth.getUser));
let user = this.getValue(store.pipe(select(fromAuth.getUser))); // this would get you the current user value

Check out the ngrx example app specifically this index page I'm referencing to, to check out selectors. Check out this sample on how they use the selectors and import the state

Normally you build containers and components. You build a container responsible for getting the data from the store, which you then pass with the async pipe to the next container or component which is responsible for the display. With ngOnChanges you can detect changes and update the frontend accordingly.

这篇关于NgRx无需订阅即可获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！