eckig 2 HTTP-Anfrage nur nach ngrx Store-Check

Question

Meine Komponente hat ein Abonnement für einen Dienst, der eine API aufruft, um einige Werte zu erhalten. Vor dem API-Aufruf möchte ich überprüfen, ob mein AppStore bereits diese Daten enthält, um einen nutzlosen Anruf zu vermeiden, aber ich finde keinen Weg, ihn zum Laufen zu bringen.

Wie kann ich es tun?

Dies ist meine Komponente:

import { UserService } from '../../core/user.service'; 
@Component({ 
    ... 
}) 
export class AnagraficaComponent implements OnInit { 
    userData: any; 
    constructor(private userService:UserService) { } 
    ngOnInit() { 
    this.userService.getUserData(1) 
    .subscribe(result => { 
    this.userData = result; 
    }); 
    } 
} 

Und das ist mein Service:

import { CURRENT_USER } from '../app.actions'; 
interface AppStore { 
    currentUser: any; 
} 
@Injectable() 
export class UserService { 
    currentUser: Observable<any>; 
    constructor(private http: Http, private store: Store<AppStore>) { 
    this.currentUser = store.select('currentUser'); 
    } 
    getUserData(id: number): Observable<any> { 
    // TODO: user store 
    // check if there is a current user in store (means is already logged in) 
    // if true return data from store 

    /* 
    return this.currentUser 
    .map(user => { 
     return user; 
    }); 
    */ 
    // else return data from server 
    let currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    headers.append('Authorization', 'Bearer ' + currentUser.token); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get(myGlobals.API_URL + 'user/' + id, options) 
    .map((response: Response) => { 
     // TODO : check response 
     // update store with current user from server 
     // this.store.dispatch({ type: CURRENT_USER, payload: userData }); 
     return response.json().data; 
    }); 
    } 
} 

Answer 1

warum gerade nicht so testen:

import { CURRENT_USER } from '../app.actions'; 
interface AppStore { 
    currentUser: any; 
} 
@Injectable() 
export class UserService { 
    currentUser: Observable<any>; 
    constructor(private http: Http, private store: Store<AppStore>) { 
    this.currentUser = store.select('currentUser'); 
    } 
    getUserData(id: number): Promise<any> { 
    return new Promise<any>((resolve,reject)=>{ 

let currentUser = JSON.parse(localStorage.getItem('currentUser')); 

if(currentUser){ 
resolve(currentUser); 
return; 
}else{ 

let headers = new Headers({ 'Content-Type': 'application/json' }); 
    headers.append('Authorization', 'Bearer ' + currentUser.token); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get(myGlobals.API_URL + 'user/' + id, options) 
    .map((response: Response) => { 
     localStorage.setItem('currentUser', JSON.parse(response.json().data)); 
     // this.store.dispatch({ type: CURRENT_USER, payload: userData }); 
     resolve(response.json().data); 
return ; 
    }); 

} 
}); 



    } 
} 

Answer 2

Sie Users mit einem erstellen Privates Verhalten unterziehen und öffentlich sichtbar machen, dann prüfen Sie bei jedem Gespräch zuerst, ob Sie bereits Daten im Benutzer-Betreff haben wenn nicht nur dann rufen Sie den Dienst an. Und in der Komponentenebene Anruf Thius Speicher nicht der Service

import { UserService } from '../../core/user.service'; 
export class UserStore { 

    private _user: BehaviorSubject<User> = new BehaviorSubject(null); 

    constructor(
     private userService: UserService 
    ) { 
     this.loadInititalData(); 
    } 

    get user() { 
     return this._user.asObservable(); 
    } 

    loadInititalData() { 
     let user: User = this._user.getValue(); 
     if (!user) { // only if value doesn't exist on the client 
     this.userService.get() 
      .subscribe(
      res => { 
       this._user.next(res); 
      }, 
      err => this.handleError(err, "loadinitialdata UserStore") 
      ); 
     } 

    } 

    private handleError(error: any, src: string) { 
     console.log(src + ": " + error) 

    } 
}