如何将值从效果[NGRX]返回到组件?

时间:2018-01-30 11:51:04

标签: angular5 ngrx ngrx-store ngrx-effects

component.ts中的

this.token $ = this.store.dispatch(new GetToken());

auth.effect.ts中的

@Effect()getToken:Observable = this.actions.ofType(authActions.GET_TOKEN).switchMap(()=> this.authService.getToken());

注意 this.authService.getToken()返回令牌

错误效果“AuthEffects.getToken”调度无效操作

1 个答案:

答案 0 :(得分:1)

效果应该与组件没有直接关系。这是一种副作用,在调度GET_TOKEN操作时监听您的商店并触发对服务器的调用,然后根据响应,它应该发送新的GET_TOKEN_FAILGET_TOKEN_SUCCESS收到令牌作为有效载荷:

@Effect()
  refresh$ = this.actions$.pipe(
    ofType(authActions.GET_TOKEN),
    map((action: RefreshToken) => action.payload),
    exhaustMap((refresh_token: string) =>
      this.authService
        .refresh(refresh_token)
        .pipe(
          map(grant => new AccessTokenSuccess(grant)), // <- new token here
          catchError(error => of(new AccesTokenFail(error)))
        )
    )
  );

然后,您的Reducer应在调度GET_TOKEN_SUCCESS时更新存储,以便从操作的有效负载中保存新接收的存储。

您的组件只需要监听一些选择器映射到商店中的该令牌,这样他就可以在您的reducer更新商店后立即了解新值。