Как извлечь значение из Observable для использования для вызова API службы - PullRequest
Новая
       44

Как извлечь значение из Observable для использования для вызова API службы

0 голосов
/ 27 марта 2019

У меня есть приложение Angular, использующее ngrx-store.У меня есть следующие файлы для моего компонента функции 

<componentname>.actions.ts
<componentname>.effects.ts
<componentname>.model.ts
<componentname>.module.ts
<componentname>.reducer.ts
<componentname>.state.ts
<componentname>.selectors.ts
<componentname>-routing.module.ts

Я новичок в Observables и хранилище NGRX, и мне нужна помощь в получении значения (emailAddress) из хранилища для последующего использования в вызове API службы.В сервисном методе я могу подписаться и зарегистрировать значение в консоли, однако, когда выполняется сервисный вызов, значение остается пустым, поэтому я не могу вернуть данные.

Как я могу подписаться на селектор emailAddress и вызвать сервисAPI в то же время, чтобы убедиться, что значение там.Адрес электронной почты в магазине сохраняется только один раз, когда пользователь входит в систему. Значение никогда не меняется.

Мой компонент 

import { selectStrava } from "@app/strava/strava.selector";
import { selectEmailAddress } from "@app/core/auth/auth.selectors";

@Component({
    selector: "srm-strava",
    templateUrl: "./strava.component.html",
    styleUrls: ["./strava.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class StravaComponent implements OnInit {
    @Input()
    strava$: Observable<Strava>;


    constructor(private stravaStore: Store<IStravaState>) {
        this.strava$ = this.stravaStore.pipe(select(selectStrava));
        }

    ngOnInit() {
        this.stravaStore.dispatch(new GetStravaAuthorization());
    }
}

Мои селекторы компонентов 

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromAppStore from "@app/core/auth/auth.reducer";
import { IStravaState } from './strava.state';

export const selectStravaState = createFeatureSelector<IStravaState>('strava');
export const state = createSelector(selectStravaState, (stravaState: IStravaState) => stravaState);
export const selectStrava = createSelector(state, (stravaState: IStravaState) => stravaState.strava);

Мой метод в моей службе API 

constructor(http: HttpClient, notificationService: NotificationService, appState: Store<AppState>) {
        this.http = http;
        this.notificationService = notificationService;
        this.appState = appState;               
    }

    public getStravaAuthorization(): Observable<Strava> {    
        this.emailAddress$ = this.appState.pipe(select(selectEmailAddress));
        //the following outputs to the console OK
        this.emailAddress$.subscribe(res => { console.log(res) });            
        //the email address is blank on the next call
        let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${this.emailAddress$}`;
        return this.http.get<Strava>(getStravaApi).pipe(
            tap(result => console.log('getStravaAccess: executed with email ')),
            map(result => result));            

    };

Мой эффект заключается в следующем 

@Effect()
    getStravaAuthorization$ = this.actions$.pipe(
        ofType<GetStravaAuthorization>(StravaActionTypes.GetStravaAuthorization), mergeMap(() => this.stravaService.getStravaAuthorization()
            .pipe(map((strava: Strava) => new GetStravaAuthorizationSuccess(strava))))
    );

Селектор адреса электронной почты для извлечения значения из магазина: 

export const selectEmailAddress = createSelector(
    selectAuth, (state: AuthState) => {
        if ((state.userDetails === null || state.userDetails === undefined))
            return "";
        else
            return state.userDetails.email
                ;
    }
);

Мой журнал консоли выглядит следующим образом:

вывод console.log

С кодом, перемещенным из службы в компонент в соответствии с рекомендациями, теперь я получаю сообщение об ошибке this.emailAddress $с указанием «невозможно выбрать перегрузку для« нового »несоответствия типа выражения Параметр emailAddress должен иметь тип, назначаемый на строку, но имеет тип Observable

Обновлен код компонента 

import { Component, ChangeDetectionStrategy, OnInit, Input } from "@angular/core";
import { Observable } from "rxjs";
import { take } from "rxjs/operators";
import { Store, select } from "@ngrx/store";
import { GetStravaAuthorization } from "@app/strava/strava.actions";
import { Strava } from "@app/strava/strava.model";
import { IStravaState } from "@app/strava/strava.state"
import { AuthState } from "@app/core/auth/auth.model.ts";
import { AppState } from "@app/core/core.state.ts"
import { selectStrava } from "@app/strava/strava.selector";
import { selectEmailAddress } from "@app/core/auth/auth.selectors";

@Component({
    selector: "srm-strava",
    templateUrl: "./strava.component.html",
    styleUrls: ["./strava.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class StravaComponent implements OnInit {
    @Input()
    strava$: Observable<Strava>;
    @Input()
    emailAddress$: Observable<string>;

    constructor(private stravaStore: Store<IStravaState>, private appState: Store<AppState>) {
        this.strava$ = this.stravaStore.pipe(select(selectStrava));
    }

    ngOnInit() {
        this.emailAddress$ = this.appState.pipe(select(selectEmailAddress));
        this.stravaStore.dispatch(new GetStravaAuthorization(this.emailAddress$));
    }
}

Код обновления

Мой компонент 

ngOnInit() {
        this.appState
            .pipe(
                select(selectEmailAddress),
                first()
            )
            .subscribe((emailAddress) => {
                this.stravaStore.dispatch(new GetStravaAuthorization(emailAddress)); //dispatch action with the payload containing email address
            });
    }

Мой эффект 

@Effect()

    getStravaAuthorization$ = this.actions$
        .pipe(
            ofType<GetStravaAuthorization>(StravaActionTypes.GetStravaAuthorization),
            mergeMap((action) => {
                // passing the action's payload (email address) below to service

             return this.stravaService.getStravaAuthorization(action.payload);
            },
                map((strava: Strava) => new GetStravaAuthorizationSuccess(strava)))
        );

Мой сервис 

 public getStravaAuthorization(emailAddress): Observable<Strava> {
            let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${emailAddress}`;
            return this.http.get<Strava>(getStravaApi).pipe(
                tap(result => console.log('getStravaAccess: executed with emaiL address ')),
                map(result => result));
        }

Действия 

export class GetStravaAuthorization implements Action {
    readonly type = StravaActionTypes.GetStravaAuthorization;
    constructor(public payload: string) { }
}

export class GetStravaAuthorizationSuccess implements Action {
    readonly type = StravaActionTypes.GetStravaAuthorizationSuccess;
    constructor(public payload: Strava) { }
}

Что еще нужно отметитьАдрес электронной почты не является частью IStraviaState 

import { Strava } from "@app/strava/strava.model";

export interface IStravaState {
    strava: Strava;
}

export const initialStravaState: IStravaState = {
    strava: null
};
export class Strava {
    stravaAuthorization: StravaAuthorization
}

export class StravaAuthorization {
    entityId: string;
    accessToken: string;
    refreshToken: string;
    isAuthorized: boolean;
}

Eошибки, которые я теперь вижу с обновленным кодом

Ошибка компонента

ошибка эффекта

Ответы [ 4 ]

0 голосов
/ 27 марта 2019

Мне удалось решить, обновив компонент следующим образом 

 ngOnInit() {
        this.emailAddress$ = this.authStore.pipe(select(selectEmailAddress));
        this.refreshToken$ = this.stravaStore.pipe(select(selectRefreshToken));        
        this.emailAddress$.pipe(
            skipUntil(this.emailAddress$)).subscribe(res => {
            if (res) {
                this.stravaStore.dispatch(new GetStravaAuthorization(res));
            }
        });               
    }
0 голосов
/ 27 марта 2019

Похоже, вы пытаетесь использовать Observable в качестве строкового значения при построении запроса. 

let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${this.emailAddress$}`;`

Есть несколько способов добиться этого, я поделюсь маршрутом async / await.

Вы можете дождаться результата наблюдаемого, преобразовав его в обещание с помощью метода .toPromise(). 

public async getStravaAuthorization(): Observable<Strava> {
  ...
  const emailAddress = await this.emailAddress$.toPromise();
  ...
}
0 голосов
/ 27 марта 2019

Вы должны выбрать адрес электронной почты из эффекта getStravaAuthorization. Итак, вы отправляете: новый GetStravaAuthorization () из вашего компонента без электронной почты, но эффект получает электронное письмо от вашего селектора, когда оно не равно null, и передает его нашему сервису. 

       @Effect()
        getStravaAuthorization$ = this.actions$.pipe(
            ofType<GetStravaAuthorization>(StravaActionTypes.GetStravaAuthorization),
                 switchMap(() => this.store.pipe(select(selectEmailAddress))), 
                 filter(Boolean), 
                 mergeMap((email: string) => this.stravaService.getStravaAuthorization(email)
                .pipe(map((strava: Strava) => new GetStravaAuthorizationSuccess(strava))))
    );
0 голосов
/ 27 марта 2019

В следующей строке вы передаете this.emailAddress$, предполагая, что это ЗНАЧЕНИЕ адреса электронной почты, в то время как это Observable. Вот почему это не сработает. 

let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${this.emailAddress$}`;

Я настоятельно рекомендую вам передать электронное письмо из вашего компонента , поскольку служба по большей части не должна обращаться к магазину. Если вы все еще хотите подписаться на состояние в вашем сервисе, вы можете сделать что-то вроде этого: 

public getStravaAuthorization(): Observable<Strava> {    
        return this.appState.pipe(
          select(selectEmailAddress),
          first(), // the subscription is immediately ended after retrieval
          mergeMap((emailAddress) => { // getting email address and chaining observables
            let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${emailAddress}`;
            return this.http.get<Strava>(getStravaApi);

          }),
          tap(result => console.log('getStravaAccess: executed with email ')),
          map(result => result)); // you actually don't need this if you're not modifying result
        );
    };

ОТВЕТЬТЕ НА ВАШ ОБНОВЛЕННЫЙ КОМПОНЕНТ.

Пожалуйста, убедитесь, что ваше действие поддерживает параметр с именем payload. То есть что-то вроде: 

export class MyAction {
  readonly type = MY_TYPE;
  constructor(public payload: string) {}
}

КОМПОНЕНТ: 

export class StravaComponent implements OnInit {
    @Input()
    strava$: Observable<Strava>;
    @Input()
    emailAddress$: Observable<string>;

    constructor(private stravaStore: Store<IStravaState>, private appState: Store<AppState>) {
        this.strava$ = this.stravaStore.pipe(select(selectStrava));
    }

    ngOnInit() {
      this.appState
        .pipe(
           select(selectEmailAddress),
           first()
        )
        .subscribe((emailAddress) => {
          this.stravaStore.dispatch(new GetStravaAuthorization(emailAddress)); //dispatch action with the payload containing email address
        });
    }
}

ЭФФЕКТ: 

  @Effect()
    getStravaAuthorization$ = this.actions$
    .pipe(
        ofType<GetStravaAuthorization>(StravaActionTypes.GetStravaAuthorization),
        mergeMap((action) => {
          // passing the action's payload (email address) below to service
          return this.stravaService.getStravaAuthorization(action.payload);
        },
        map((strava: Strava) => new GetStravaAuthorizationSuccess(strava)))
    );

SERVICE: 

public getStravaAuthorization(emailAddress): Observable<Strava> {  
        // assigning the emailAdress to the url's param  
        let getStravaApi = `${AppSettings.CONTACTS_API_HOST}employee/strava?emailaddress=${emailAddress}`;
        return this.http.get<Strava>(getStravaApi).pipe(
            tap(result => console.log('getStravaAccess: executed with email ')),
            map(result => result));            

    };
...