upgrade to NgRx 8 with factory methods

README.md

@@ -7,7 +7,6 @@ This course repository is updated to Angular v8, and there is a  package-lock.js
 
 ![Angular Ngrx Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png)
 
-
 # Installation pre-requisites
 
 IMPORTANT: Please use NPM 5 or above, to make sure the package-lock.json is used.
@@ -20,14 +19,12 @@ For running this project we need and npm installed on our machine. These are som
 - [Install Node and NPM on Linux](https://www.youtube.com/watch?v=yUdHk-Dk_BY)
 - [Install Node and NPM on Mac](https://www.youtube.com/watch?v=Imj8PgG3bZU)
 
-
 # Installing the Angular CLI
 
 With the following command the angular-cli will be installed globally in your machine:
 
     npm install -g @angular/cli 
 
-
 # How To install this repository
 
 We can install the master branch using the following commands:
@@ -63,8 +60,6 @@ To run the frontend part of our code, we will use the Angular CLI:
 
 The application is visible at port 4200: [http://localhost:4200](http://localhost:4200)
 
-
-
 # Important 
 
 This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

package.json

@@ -25,11 +25,11 @@
     "@angular/platform-browser": "^8.0.0",
     "@angular/platform-browser-dynamic": "^8.0.0",
     "@angular/router": "^8.0.0",
-    "@ngrx/effects": "^7.0.0",
-    "@ngrx/entity": "^7.0.0",
-    "@ngrx/router-store": "^7.0.0",
-    "@ngrx/store": "^7.0.0",
-    "@ngrx/store-devtools": "^7.0.0",
+    "@ngrx/effects": "^8.0.0",
+    "@ngrx/entity": "^8.0.0",
+    "@ngrx/router-store": "^8.0.0",
+    "@ngrx/store": "^8.0.0",
+    "@ngrx/store-devtools": "^8.0.0",
     "body-parser": "^1.18.2",
     "core-js": "^2.4.1",
     "express": "^4.16.2",
@@ -44,7 +44,7 @@
     "@angular/cli": "^8.0.1",
     "@angular/compiler-cli": "^8.0.0",
     "@angular/language-service": "^8.0.0",
-    "@ngrx/schematics": "^7.0.0",
+    "@ngrx/schematics": "^8.0.0",
     "@types/express": "^4.0.39",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",

src/app/app.component.ts

@@ -1,11 +1,10 @@
-import {Component, OnInit} from '@angular/core';
-import {select, Store} from "@ngrx/store";
-import {Observable} from "rxjs";
-import {AppState} from './reducers';
-import {Logout} from './auth/auth.actions';
-import {map} from 'rxjs/operators';
-import {isLoggedIn, isLoggedOut} from './auth/auth.selectors';
-import {Router} from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { AppState } from './reducers';
+import * as authApiActions from './auth/auth.actions';
+import { isLoggedIn, isLoggedOut } from './auth/auth.selectors';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -39,7 +38,7 @@ export class AppComponent implements OnInit {
 
     logout() {
 
-      this.store.dispatch(new Logout());
+      this.store.dispatch(authApiActions.logout());
 
     }
 

src/app/app.module.ts

@@ -2,21 +2,21 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatIconModule} from '@angular/material/icon';
 
-import { MatListModule } from "@angular/material/list";
-import { MatSidenavModule } from "@angular/material/sidenav";
-import { MatToolbarModule } from "@angular/material/toolbar";
-import {HttpClientModule} from "@angular/common/http";
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {HttpClientModule} from '@angular/common/http';
 
-import {RouterModule, Routes} from "@angular/router";
-import {AuthModule} from "./auth/auth.module";
+import {RouterModule, Routes} from '@angular/router';
+import {AuthModule} from './auth/auth.module';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment';
-import {RouterStateSerializer, StoreRouterConnectingModule} from "@ngrx/router-store";
+import {RouterStateSerializer, StoreRouterConnectingModule} from '@ngrx/router-store';
 
 import { EffectsModule } from '@ngrx/effects';
 import { reducers, metaReducers } from './reducers';
@@ -31,7 +31,7 @@ const routes: Routes = [
         canActivate: [AuthGuard],
     },
     {
-        path: "**",
+        path: '**',
         redirectTo: '/'
     }
 ];
@@ -55,7 +55,7 @@ const routes: Routes = [
         StoreModule.forRoot(reducers, { metaReducers }),
         !environment.production ? StoreDevtoolsModule.instrument() : [],
         EffectsModule.forRoot([]),
-        StoreRouterConnectingModule.forRoot({stateKey:'router'})
+        StoreRouterConnectingModule.forRoot({stateKey: 'router'})
     ],
     providers: [
       { provide: RouterStateSerializer, useClass: CustomSerializer }

src/app/auth/auth.actions.ts

@@ -1,30 +1,12 @@
-import { Action } from '@ngrx/store';
-import {User} from '../model/user.model';
 
+import { createAction } from '@ngrx/store';
+import { User } from '../model/user.model';
 
+export const login = createAction(
+  '[Auth/API] Login Success',
+  (user: User) => ({ user })
+);
 
-export enum AuthActionTypes {
-  LoginAction = '[Login] Action',
-  LogoutAction = '[Logout] Action',
-}
-
-
-export class Login implements Action {
-
-  readonly type = AuthActionTypes.LoginAction;
-
-  constructor(public payload: {user: User}) {
-
-  }
-}
-
-
-export class Logout implements Action {
-
-  readonly type = AuthActionTypes.LogoutAction;
-
-
-}
-
-
-export type AuthActions = Login | Logout;
+export const logout = createAction(
+  '[Auth/API] Logout Success'
+);

src/app/auth/auth.effects.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { AuthEffects } from './auth.effects';
 

src/app/auth/auth.effects.ts

@@ -1,49 +1,42 @@
 import { Injectable } from '@angular/core';
-import {Actions, Effect, ofType} from '@ngrx/effects';
-import {AuthActionTypes, Login, Logout} from './auth.actions';
-import {tap} from 'rxjs/operators';
-import {Router} from '@angular/router';
-import {defer, of} from 'rxjs';
-
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import * as authApiActions from './auth.actions';
+import { tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { defer, of } from 'rxjs';
 
 @Injectable()
 export class AuthEffects {
 
-  @Effect({dispatch:false})
-  login$ = this.actions$.pipe(
-    ofType<Login>(AuthActionTypes.LoginAction),
-    tap(action => localStorage.setItem("user", JSON.stringify(action.payload.user)))
+  loginSuccess$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(authApiActions.login),
+      tap(action => localStorage.setItem('user', JSON.stringify(action.user)))
+    ),
+    { dispatch: false }
   );
 
-  @Effect({dispatch:false})
-  logout$ = this.actions$.pipe(
-    ofType<Logout>(AuthActionTypes.LogoutAction),
-    tap(() => {
-
-      localStorage.removeItem("user");
-      this.router.navigateByUrl('/login');
-
-    })
+  logoutSuccess$ = createEffect(() =>
+      this.actions$.pipe(
+        ofType(authApiActions.logout),
+        tap(() => {
+          localStorage.removeItem('user');
+          this.router.navigateByUrl('./login');
+        })
+      ),
+      { dispatch: false }
   );
 
-  @Effect()
-  init$ = defer(() => {
-
-    const userData = localStorage.getItem("user");
+  init$ = createEffect(() => defer(() => {
+    const userData = localStorage.getItem('user');
 
     if (userData) {
-       return of(new Login({user:JSON.parse(userData)}));
-    }
-    else {
-      return <any> of(new Logout());
+      return of(authApiActions.login(JSON.parse(userData)));
+    } else {
+      return of(authApiActions.logout());
     }
+  }));
 
-  });
-
-  constructor(private actions$: Actions, private router:Router) {
-
-
+  constructor(private actions$: Actions, private router: Router) {
   }
-
-
 }

src/app/auth/auth.guard.ts

@@ -1,10 +1,10 @@
-import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
-import {Observable} from 'rxjs';
-import {select, Store} from '@ngrx/store';
-import {AppState} from '../reducers';
-import {isLoggedIn} from './auth.selectors';
-import {tap} from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import { AppState } from '../reducers';
+import { isLoggedIn } from './auth.selectors';
+import { tap } from 'rxjs/operators';
 
 
 

src/app/auth/auth.module.ts

@@ -1,15 +1,15 @@
-import {ModuleWithProviders, NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {LoginComponent} from './login/login.component';
-import {MatCardModule} from "@angular/material/card";
-import { MatInputModule } from "@angular/material/input";
-import {RouterModule} from "@angular/router";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatButtonModule} from "@angular/material/button";
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './login/login.component';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { StoreModule } from '@ngrx/store';
-import {AuthService} from "./auth.service";
+import { AuthService } from './auth.service';
 import * as fromAuth from './auth.reducer';
-import {AuthGuard} from './auth.guard';
+import { AuthGuard } from './auth.guard';
 import { EffectsModule } from '@ngrx/effects';
 import { AuthEffects } from './auth.effects';
 
@@ -37,6 +37,6 @@ export class AuthModule {
               AuthService,
               AuthGuard
             ]
-        }
+        };
     }
 }

src/app/auth/auth.reducer.spec.ts

@@ -1,11 +1,11 @@
-import { authReducer, initialAuthState } from './auth.reducer';
+import { reducer, initialAuthState } from './auth.reducer';
 
 describe('Auth Reducer', () => {
   describe('unknown action', () => {
     it('should return the initial state', () => {
       const action = {} as any;
 
-      const result = authReducer(initialAuthState, action);
+      const result = reducer(initialAuthState, action);
 
       expect(result).toBe(initialAuthState);
     });