In the previous article, you were introduced to functional programming and NgRx, the reactive and highly performant Redux state management for Angular apps.

We defined three main building blocks of NgRx: the app state, the actions and the reducers. A project was previously started, creating an instance of each app state for an authentication example. In this article I will add the remaining components to the project as well as an explanation for each one of them. Let’s start by adding an element of NgRx, the effects.

NgRx Effects

NGRX Effects is in charge of listening for the actions dispatched from the NgRx Store, performing some logic in the middle (e.g. a side effect), and finally dispatching a new action.

Effects remove responsibilities from components as external interactions such as network requests, websocket messages and time-based events. By isolating this side effect from the components you achieve more pure components. The components then select a state and dispatch actions.

Adding effects to the project:

Defining The Effects

Since the login call is async, the successes and errors are handled by adding an effect. This way the effect organizes actions. In addition, adding a logout helps by removing the active session data from local storage, making a logout easier. Next, add the file inside the effects folder.

• app/

• store/

• actions/

•      authentication.actions.ts

• 
  

• effects/

•      authentication.effects.ts

• 
  

• reducers/

•      authentication.reducer.ts

• app.state.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

//authentication.effects.ts import { Injectable } from '@angular/core'; import { Action } from '@ngrx/store'; import { Router } from '@angular/router'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { map, switchMap, catchError, tap } from 'rxjs/operators';   import { AuthenticationService } from '../../services/authentication.service'; import {   AuthenticationActionTypes,   Login, LoginSuccess, LoginFailure,Logout } from '../actions/authentication.actions';    @Injectable() export class AuthenticationEffects {     constructor(     private actions: Actions,     private authenticationService: AuthenticationService,     private router: Router,   ) {}     @Effect()   Login: Observable<any> = this.actions     .ofType(AuthenticationActionTypes.LOGIN)     .pipe(       map((action: Login) => action.payload),       switchMap(payload => {         return this.authenticationService.login(payload.email, payload.password)         .pipe(           map((user) => {             console.log(user);             return new LoginSuccess({token: user.token, email: payload.email});           }),           catchError((error) => {             return of(new LoginFailure({ error: error }));           }));     }));      @Effect({ dispatch: false })   LoginSuccess: Observable<any> = this.actions.pipe(     ofType(AuthenticationActionTypes.LOGIN_SUCCESS),     tap((user) => {       //when the user logs in successfully, the token and email are saved to localStorage       localStorage.setItem('token', user.payload.token);       localStorage.setItem('email', user.payload.email);       this.router.navigateByUrl('/');     })   );     @Effect({ dispatch: false })   LoginFailure: Observable<any> = this.actions.pipe(     ofType(AuthenticationActionTypes.LOGIN_FAILURE)   );     @Effect({ dispatch: false })   public Logout: Observable<any> = this.actions.pipe(     ofType(AuthenticationActionTypes.LOGOUT),     tap((user) => {       //when the user log out the token and email are removed from localStorage       localStorage.removeItem('token');       localStorage.removeItem('email');       this.router.navigateByUrl('/login');     })   ); }

Adding The Components

The application will have two pages, the login and the home page. A login is added to allow the user to login. And the home page is set up so that it is only available to logged users. Both components consume the app state and dispatch the corresponding, previously created actions.mThe component files are added inside a newly created components folder.

• app/

• app.module.ts

• app.component.ts

• components/

• home/

• login/

Login

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

//login.component.ts import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs';   import { User } from './../../models/user'; import { AppState, selectAuthenticationState } from './../../store/app.states'; import { Login } from './../../store/actions/authentication.actions';   @Component({   selector: 'app-login',   templateUrl: './login.component.html',   styleUrls: ['./login.component.scss'] }) export class LoginComponent implements OnInit {     user: User = new User();   getState: Observable<any>;   errorMessage: string = null;     constructor(private store: Store<AppState>) {    this.getState = this.store.select(selectAuthenticationState);   }     ngOnInit() {     this.getState.subscribe((state) => {       this.errorMessage = state.errorMessage;     });   }     onSubmit(): void {     const actionPayload = {       email: this.user.email,       password: this.user.password     };     this.store.dispatch(new Login(actionPayload));   }   }

Now add the login form to the template.

login.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<div class="row">   <div class="col-md-4">     <h1>Login</h1>     <hr><br>     <div *ngIf="errorMessage">       <div class="alert alert-danger" role="alert">         {{errorMessage}}       </div>     </div>     <form (ngSubmit)="onSubmit()" ngNativeValidate>       <div class="form-group">         <label for="email">Email</label>         <input           [(ngModel)]="user.email"           name="email"           type="email"           required           class="form-control"           id="email"           placeholder="enter your email">       </div>       <div class="form-group">         <label for="password">Password</label>         <input           [(ngModel)]="user.password"           name="password"           type="password"           required           class="form-control"           id="password"           placeholder="enter a password">       </div>       <button type="submit" class="btn btn-primary">Login</button>     </form>   </div> </div>

It looks like this:



Home

This page indicates the email of the user logged in and adds a button to log out.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//home.component.ts import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs';   import { User } from './../../models/user'; import { AppState, selectAuthenticationState } from './../../store/app.states'; import { Logout } from './../../store/actions/authentication.actions';   @Component({   selector: 'app-home',   templateUrl: './home.component.html',   styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit {     user:User;   getState: Observable<any>;   isAuthenticated: boolean = false;     constructor(private store: Store<AppState>) {      this.getState = this.store.select(selectAuthenticationState);   }     ngOnInit() {     this.getState.subscribe((state) => {       this.isAuthenticated = state.isAuthenticated;       this.user = state.user;     });   }     logout(): void {     this.store.dispatch(new Logout);   } }




home.component.html

1 2 3 4 5

<h1>Home</h1> <p *ngIf="isAuthenticated">   The user: {{user.email}} is logged in </p> <button class="btn btn-primary" (click)="logout()">Logout</button>




Here’s what it looks like:



Adding The Guard Service for Protected Routes

Since we are going to have a protected route, which is only accessible for users who are logged in, a router guard is created. Basically, it checks if the user is logged in or not by implementing the canActivate method. The file is added inside the services folder.

• app/

• services/

• authentication.services.ts

• authentication-guard.service.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//authentication-guard.service.ts import { Injectable } from '@angular/core'; import { Router, CanActivate } from '@angular/router'; import { AuthenticationService } from './authentication.service';   @Injectable({   providedIn: 'root' }) export class AuthenticationGuardService {   constructor(     public router: Router,     private authenticationService: AuthenticationService   ) {}     canActivate(): boolean {     const isLoggedIn = this.authenticationService.isLoggedIn();     if (!isLoggedIn) {       this.router.navigateByUrl('/login');       return false;     }     return true;   } }

Defining The Routes of The Application

Here you have the configuration of the basic routes of the application. The file is added inside the app folder.

• app/

• app.module.ts

• app.component.ts

• app.routes.ts

1 2 3 4 5 6 7 8 9 10 11 12 13

//app.routes.ts import { Routes, RouterModule } from '@angular/router'; import { AuthenticationGuardService } from './services/authentication-guard.service'; import { LoginComponent } from './components/login/login.component'; import { HomeComponent } from './components/home/home.component';   const routes: Routes = [   { path: '', redirectTo: '/home', pathMatch: 'full'  },   { path: 'login', component: LoginComponent },   { path: 'home', component: HomeComponent, canActivate: [AuthenticationGuardService] } ];   export const Routing = RouterModule.forRoot(routes);

Wrapping Everything Together

To have the application working you need to add all the dependencies to the app.module.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

//app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';   import { FormsModule } from '@angular/forms'; import { EffectsModule } from '@ngrx/effects'; import { StoreModule } from '@ngrx/store';   import { Routing } from './app.routes'; import { AppComponent } from './app.component'; import { LoginComponent } from './components/login/login.component'; import { HomeComponent } from './components/home/home.component';   import { AuthenticationGuardService } from './services/authentication-guard.service'; import { AuthenticationService } from './services/authentication.service';   import { AuthenticationEffects } from './store/effects/authentication.effects'; import { reducers } from './store/app.states';   @NgModule({   declarations: [     AppComponent,     LoginComponent,     HomeComponent   ],   imports: [     BrowserModule,     Routing,     FormsModule,     EffectsModule.forRoot([AuthenticationEffects]),     StoreModule.forRoot(reducers, {})   ],   providers: [     AuthenticationGuardService,     AuthenticationService   ],   bootstrap: [AppComponent] }) export class AppModule { }

Add the router outlet in the app.component.html file.

1	<router-outlet></router-outlet>

Conclusion

Angular’s applications can benefit the use of functional programming and the Redux library NgRx. By delegating the state management to the NgRx Store and adding the side effects to NgRx Effects, you can achieve pure components and gain big performance improvements.

NgRx offers more control of the restrictions by allowing you to regulate the ways the application state can be changed. As a result, debugging the application becomes easier and friendlier because you have more control over the changes, and can keep track of how they happened. The centralized store offers a great place to add a breakpoint because it must be called to change the app state.

Together, the two parts of this article have shown an example of a real world scenario where the state management comes in handy when attempting to store the user tokens. It has also shown how to deal with the required methods such as logins, logouts and handling active users from the application. By using the Angular NgRx extension, a developer can prevent bugs and has more control over the application state.