角2 ngrxストアチェック後のhttp要求のみ

Question

myコンポーネントは、apiを呼び出して値を取得するサービスへのサブスクリプションを持っています。 api呼び出しの前に、私のappStoreが無駄な呼び出しを避けるために既にそれらのデータを持っているのかどうかをチェックしたいが、それを動作させる方法を見つけることはできない。

どうすればいいですか？

これは私のコンポーネントである：

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

そして、これは私のサービスです。

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

理由だけで、このようにテストしない：

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

あなたとUSERSTOREを作成することができますプライベート行動の件名を公開し、それを公開して公開すると、それぞれの呼び出しでまずユーザーの件名にデータがあるかどうかを確認しますそれだけでなく、サービスを呼び出す場合。そして、コンポーネントレベルのコールthiusストアではないサービス

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) 

    } 
}