Предотвращение маршрутизатора навигации в случае выхода из строя эффекта/ошибка

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. С его помощью вы можете создавать действия маршрутизации и, используя его, у вас есть несколько вариантов.

Вы можете испустить несколько действий из одного эффекта. Таким образом, ваш эффект может использовать concatMap испускать два действия: ваши действия успеха и действие маршрутизации (созданное с создателем go действия):

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']); 

Другим важным моментом является то, что один эффект может ответить на несколько действий, чтобы вы могли использовать таблицу простых отображений действия типа на маршруте, чтобы сделать что-то вроде этого:

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

simpleRoutes: { [type: string]: string } = { 
    [currentUserAccount.ActionTypes.UPDATE_FIRST_NAME_SUCCESS]: '/dashboard/useraccount' 
}; 

@Effect() 
simpleRouting$: Observable<Action> = this.actions$ 
    .map((action) => this.simpleRoutes[action.type]) 
    .filter(Boolean) 
    .map((route) => go([route])); 

Какой бы вариант вы ни выбрали, использование действий маршрутизации для навигации, инициированное внутри эффектов, делает вещи более легко проверяемыми. Легко написать тесты эффектов, чтобы гарантировать, что, когда эффект получает определенное действие, он испускает соответствующее действие.Более подробная информация о результатах тестирования here.

Answer 2

Вы можете сделать это двумя способами.

1. С помощью эффектов ухватите действие УСПЕХА, а затем перенаправьте.

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