CODEWITHSUNDEEP
angular5ngrxngrx-storengrx-effects
Mohamed Abo Elmagd
Mohamed Abo Elmagd

Reputation: 1137

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

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

Upvotes: 1

Views: 2846

Answers (1)

Salem Ouerdani
Salem Ouerdani

Reputation: 7886

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.

Upvotes: 2

Related Questions