how to return the value from effect [NGRX] to component?

Question

in component.ts

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

in auth.effect.ts

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

Notice this.authService.getToken() returns the token

Error Effect "AuthEffects.getToken" dispatched an invalid action

Salem Ouerdani Salem Ouerdani · Accepted Answer · 2018-01-30T13:37:34

Effect should have no direct relation to components. It is a side effect listening to your store and triggers a call to server when GET_TOKEN action is dispatched, then depending on the response, it should either dispatch an GET_TOKEN_FAIL or GET_TOKEN_SUCCESS with the newly received token as payload:

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

Then your reducers should update the store when GET_TOKEN_SUCCESS is dispatched to save the newly received one from the action's payload.

Your component just need to be listening to some selector mapping to that token in the store so he can know about the new value as soon as the store is updated by your reducers.

how to return the value from effect [NGRX] to component?

1 Answers