조치가 전달 될 때 ngrx 라우팅

Question

사용자 상태를 저장하기 위해 ngrx를 사용하고 있습니다. 사용자 상태 란 일부 사용자 속성이있는 IUser 클래스 객체를 의미합니다.

몇 가지 조치 ('USER_LOGIN', 'USER_LOGIN_SUCCESS' and 'USER_LOGJN_FAILED')를 설정했습니다.

현재 USER_LOGIN_SUCCESS이 전달되면 감속기는 새로운 사용자 정보를 내 IStore.user ngrx store 필드에 할당합니다. 이 변경된 경우 : 당신이 볼 수 있듯이 내 변경된 사용자의 상태가 user.id != null 경우

this.user$ = this.store$.select(state => state.user); 
this.userSub = this.user$.subscribe(
    (user: IUser) => { 
     if (user.id != null) 
      this.router.navigate(['/app']); 
    } 
); 

, 나는 단지 확인하고 내 /app 경로로 이동합니다.

mor을 사용하여 우아한 방법으로 할 수 있습니까? 예를 들어

1. IStore.user 필드에 대한 명시적인 가입을 사용하지 않으셨습니까?
2. 조치 ('USER_LOGIN_SUCCESS')가 발송 될 때 경로로 바로 이동할 수 있습니까?
3. 나는이 모든 행동을 하나의 주사 가능한 것으로 집중시킬 수 있습니까?

아이디어가 있으십니까?

Answer 1

예,보다 세련된 방식으로이 작업을 수행 할 수 있습니다.
의 그것

this.userSub = this 
    .user$ 
    .filter((user: IUser) => user.id !== null) 
    .subscribe((user: IUser) => this.router.navigate(['/app'])); 

2) 하나
(A 거기로 구독 하나를 처리하기 위해 피 문 rxjs에서 대신 iffilter를 사용 단계 :

1)에 의해 단계를 검토하자 Ben Lesh의 위대한 기사는 Medium에 관한 것입니다.

구독하기 전에

3), 로직을 처리 할 수 ​​subscribe

사용하십시오 do 또는 map 내부에 논리를 적용하지 마십시오.
- do 당신은 단순히 뭔가를
할 필요가있는 경우 - 당신은 (이하 "왜"에 대한 CF 다음 부분) 결과를

4) 사용 "

this 
    .user$ 
    .filter((user: IUser) => user.id !== null) 
    .takeUntil(this.componentDestroyed$) 
    .do(_ => this.router.navigate(['/app'])) 
    .subscribe(); 

을 반환 할 경우 map을 일부 논리를 재사용하거나 내보내려면 선택자를 클릭하십시오.

코드에 대해 추측을해야한다면, 사용자 $ 현재 사용자입니다. 연결된 사람이 맞습니까? 그리고이 사용자를 다시 찾으려면 앱의 다른 부분에있는 모든 코드를 복사해야 할 수도 있습니다.

"selector"의 좋은 사용 사례입니다.
(이 코드는 여기에 2 개의 함수를 내 보냈으므로이 코드는 AOT 친화적 일 수 있음).

export function _getCurrentUser(store: Store<any>) { 
    return store$ 
    .select(state => state.user) 
    .filter((user: IUser) => user.id !== null); 
} 

다음 구성 요소 : 결국

this 
    .store$ 
    .let(getCurrentUser) 
    .takeUntil(this.componentDestroyed$) 
    .do(_ => this.router.navigate(['/app'])) 
    .subscribe(); 

---

우리는이

user.selector.ts :

export function getCurrentUser(store: Store<any>) { 
    return store$ 
    .select(state => state.user) 
    .filter((user: IUser) => user.id !== null); 
} 

:

private componentDestroyed$: new Subject<void>(); 

ngOnInit() { 
    this 
    .store$ 
    .let(getCurrentUser) 
    .takeUntil(this.componentDestroyed$) 
    .do(_ => this.router.navigate(['/app'])) 
    .subscribe(); 
} 

ngOnDestroyed() { 
    this.componentDestroyed$.next(); 
    this.componentDestroyed$.complete(); 
} 

Answer 2

깔끔하게 할 수있는 한 가지 방법은 다음과 같이 구독에 .skipUntil 연산자를 사용하는 것입니다.

this.user$ = this.store$.select(state => state.user); 
this.user$.skipUntil(user => user.id); 
this.userSub = this.user$.subscribe(
    (user: IUser) => { 
      this.router.navigate(['/app']); 
    } 
); 

그러면 조건부 구독이 필요하지 않습니다.