は、ルータのナビゲーションの防止効果の失敗/エラー

Question

の場合、私はngrx効果を使用するように移行していると私は、次の問題があります。dispatch戻りvoidので、私はエラーが私から発生した場合、ルータのナビゲーションを防ぐ方法がわかりませんngrx効果（例えば、this.userAccountService.updateFirstName(...から）。私のコンポーネントクラスから

：私の効果クラスから

updateFirstName() { 
    this.formStatus.submitted = true; 
    if (this.formStatus.form.valid) { 
     //Dispatch from the store 
     this.store.dispatch(new UpdateFirstNameAction(this.formStatus.form.value.firstName)); 
     //Undesired behavior: will navigate even in case of error/failure! 
     this.router.navigate(['/dashboard/useraccount']); 
    } 
    } 

：

@Effect() 
    updateFirstName$: Observable<Action> = this.actions$ 
    .ofType(currentUserAccount.ActionTypes.UPDATE_FIRST_NAME) 
    .map((action: UpdateFirstNameAction) => action.payload) 
    .switchMap(firstName => 
     this.userAccountService 
     .updateFirstName(firstName) 
     .map(() => new UpdateFirstNameSuccessAction(firstName)) 
     //I obviously can't navigate from here 
    ); 

私はそれが良い練習（あるいは可能）であることを確認していないナビゲートするためにルータを使用しますその効果から。

私のエフェクトからエラーが発生した場合のルーターのナビゲーションを防ぐために、誰かがクリーンなソリューションを提案できますか？

Answer 1

@ngrx/router-storeモジュールを使用することをお勧めします。これによりルーティングアクションを作成することができ、それを使用していくつかのオプションがあります。

複数のアクションを1つのエフェクトから出力できます。あなたの成功アクションと（goアクションクリエータで作成した）ルーティングアクション：だからあなたの効果は二つの動作を発するようにconcatMapを使用することができ

import { go } from '@ngrx/router-store'; 
import 'rxjs/add/operator/concatMap'; 

@Effect() 
updateFirstName$: Observable<Action> = this.actions$ 
    .ofType(currentUserAccount.ActionTypes.UPDATE_FIRST_NAME) 
    .map((action: UpdateFirstNameAction) => action.payload) 
    .switchMap(firstName => this.userAccountService 
    .updateFirstName(firstName) 
    .concatMap(() => [ 
     new UpdateFirstNameSuccessAction(firstName), 
     go(['/dashboard/useraccount']) 
    ]) 
); 

はしかし、あなたはまた、唯一の管理別々の効果を使用して検討する必要がありますルーティング：

：

import { go } from '@ngrx/router-store'; 
import 'rxjs/add/operator/mapTo'; 

@Effect() 
updateFirstRouting$: Observable<Action> = this.actions$ 
    .ofType(currentUserAccount.ActionTypes.UPDATE_FIRST_NAME_SUCCESS) 
    .mapTo(go(['/dashboard/useraccount']); 

考慮すべきもう一つは、あなたがこのような何かを行うには、単純なアクション型・ツー・ルートマッピングのテーブルを使用することができるように、単一の効果は、複数のアクションに対応できるということです

いずれのオプションを選択しても、エフェクト内で開始されるナビゲーションのルーティングアクションを使用すると、テストが容易になります。エフェクトが特定のアクションを受け取ったときに、適切なアクションを確実に出すようにエフェクトテストを作成するのは簡単です。テスト効果に関する詳細はhereです。

Answer 2

2つの方法で実行できます。

1. 効果では、SUCCESSアクションをキャッチしてリダイレクトします。

   @Effect（） someeffectの$：観察可能= this.actions $ .ofType（currentUserAccount.ActionTypes.UPDATE_FIRST_NAME_SUCCESS）
   .doという（アクション=>/* * /）action.payload（リダイレクトん）。購読して

2. ：

のは、これはあなたの状態であるとしましょう： { アカウント：{ ユーザ名：ヌル } }

コンポーネント：

var username$ = this.store.select(account => account.username); 

username$.subscribe(user => { 
    // the user have changed due to reducer who is getting the action with new user. 
    // do here redirect... 
});