Angular4 Httpの処理に関するベストプラクティス

Question

C＃とAngular1コードの作成経験はありますが、Angular2 +とRxJsは新しいものです。

私はちょうどAngular4ログインコンポーネントを書いたことがあり、loginメソッドの結果をobservableのマップ関数にキャッシュすることでコードの匂いを書いたように感じます。

私はLoginComponentは上のログインを呼び出しAuthenticationService持っている：私の知る限り承知しているとしてだけですべきことであるが、ので、それはマップ機能の状態を保存するために奇妙な感じ

login(username: string, password: string): Observable<User> { 
return this.http 
    .post('/api/users/login', { username: username, password: password }) 
    .map((response: Response) => { 

    let loginResult = response.json(); 
    this.user = loginResult.user as User 

    localStorage.setItem(tokenStorageName, loginResult.token); 

    return this.user; 
    }) 
    .catch(this.handleError); 

}

を翻訳機能。私はユーザーとトークンをキャッシュして、ログイン結果から戻ってきて、ユーザーデータが必要な場合に別のサービスコールを行う必要はありません。ここで

は、ログインコンポーネントのロジックです：LoginComponentはAuthenticationServiceまたはUserCacheにSETUSERを呼び出すようにするために

login() { 
this.isLoading = true; 
this.authenticationService.login(this.model.username, this.model.password) 
    .subscribe(
    result => { 
    let returnUrl = this.activatedRoute.snapshot.queryParams['returnUrl'] || '/' 
    this.router.navigate([returnUrl]); 
    }, error => { 
    if (error != null && error.code == unauthorizedCode) { 
     this.error = 'Username or password incorrect'; 
    } 
    else { 
     this.error = 'Error logging in'; 
    } 
    this.isLoading = false; 
    }); 

それはまた、右感じることはありません。

誰かが私にベストプラクティスをアドバイスしてくれますか？

Answer 1

：

https://twitter.com/toddmotto/status/865531009638440961

「単一状態ストアは本当に便利になるところです - あなたはあなたを終えることができました（この値で何かする* /） "

Answer 2

のようなものを試してみてください：トッドのモットーは、Twitter経由で良い例を与えた

login(username: string, password: string): Observable<User> { 
    let o = this.http 
     .post('/api/users/login', { username: username, password: password}) 
    //uncomment if you have multiple subscribers, otherwise http request is executed multiple times 
     //.share() 
    ; 

    o.subscribe(
     (response: Response) => { 
      this.user = loginResult.user as User; 
      localStorage.setItem(tokenStorageName, loginResult.token); 
     }, 
     (response: Response) => this.handleError(response) 
    ); 

    return o.map(response: Response => response.json()); 
}