Angular NgRx Course

Author: jhades

src/app/app.component.html

@@ -8,12 +8,12 @@
                 <span>Courses</span>
             </a>
 
-            <a mat-list-item routerLink="/login" *ngIf="isLoggedOut$ | async">
+            <a mat-list-item routerLink="/login">
                 <mat-icon>account_circle</mat-icon>
                 <span>Login</span>
             </a>
 
-            <a mat-list-item  (click)="logout()" *ngIf="isLoggedIn$ | async">
+            <a mat-list-item  (click)="logout()">
                 <mat-icon>exit_to_app</mat-icon>
                 <span>Logout</span>
             </a>

src/app/app.component.ts

@@ -2,10 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {select, Store} from "@ngrx/store";
 import {Observable} from "rxjs";
 import {map} from 'rxjs/operators';
-import {isLoggedIn, isLoggedOut} from './auth/auth.selectors';
 import {Router} from '@angular/router';
-import {logout} from './auth/auth.actions';
-import {AppState} from './reducers/reducers';
 
 @Component({
   selector: 'app-root',
@@ -14,34 +11,19 @@ import {AppState} from './reducers/reducers';
 })
 export class AppComponent implements OnInit {
 
-    isLoggedIn$: Observable<boolean>;
 
-    isLoggedOut$: Observable<boolean>;
-
-
-    constructor(private store: Store<AppState>, private router: Router) {
+    constructor(private router: Router) {
 
     }
 
     ngOnInit() {
 
-      this.isLoggedIn$ = this.store
-        .pipe(
-          select(isLoggedIn)
-        );
 
-      this.isLoggedOut$ = this.store
-        .pipe(
-          select(isLoggedOut)
-        );
 
     }
 
     logout() {
 
-      this.store.dispatch(logout());
-
     }
 
-
 }

src/app/app.module.ts

@@ -19,16 +19,13 @@ import {environment} from '../environments/environment';
 import {RouterState, StoreRouterConnectingModule} from '@ngrx/router-store';
 
 import {EffectsModule} from '@ngrx/effects';
-import {AuthGuard} from './auth/auth.guard';
 import {EntityDataModule} from '@ngrx/data';
-import {reducers} from './reducers/reducers';
 
 
 const routes: Routes = [
   {
     path: 'courses',
-    loadChildren: () => import('./courses/courses.module').then(m => m.CoursesModule),
-    canActivate: [AuthGuard],
+    loadChildren: () => import('./courses/courses.module').then(m => m.CoursesModule)
   },
   {
     path: '**',
@@ -52,25 +49,7 @@ const routes: Routes = [
     MatSidenavModule,
     MatListModule,
     MatToolbarModule,
-    AuthModule.forRoot(),
-    StoreModule.forRoot(reducers, {
-      runtimeChecks: {
-        strictStateImmutability: true,
-        strictActionImmutability: true,
-        strictActionSerializability: true,
-        strictStateSerializability: true
-      }
-    }),
-    StoreDevtoolsModule.instrument({
-      maxAge: 25,
-      logOnly: environment.production,
-    }),
-    EffectsModule.forRoot([]),
-    StoreRouterConnectingModule.forRoot({
-      stateKey: 'router',
-      routerState: RouterState.Minimal,
-    }),
-    EntityDataModule.forRoot({})
+    AuthModule.forRoot()
   ],
   bootstrap: [AppComponent]
 })

src/app/auth/action-types.ts

@@ -8,11 +8,7 @@ import {ReactiveFormsModule} from "@angular/forms";
 import {MatButtonModule} from "@angular/material/button";
 import { StoreModule } from '@ngrx/store';
 import {AuthService} from "./auth.service";
-import * as fromAuth from './auth.reducer';
-import {AuthGuard} from './auth.guard';
 import { EffectsModule } from '@ngrx/effects';
-import { AuthEffects } from './auth.effects';
-
 
 @NgModule({
     imports: [
@@ -22,8 +18,6 @@ import { AuthEffects } from './auth.effects';
         MatInputModule,
         MatButtonModule,
         RouterModule.forChild([{path: '', component: LoginComponent}]),
-        StoreModule.forFeature('auth', fromAuth.authReducer),
-        EffectsModule.forFeature([AuthEffects]),
 
     ],
     declarations: [LoginComponent],
@@ -34,8 +28,7 @@ export class AuthModule {
         return {
             ngModule: AuthModule,
             providers: [
-              AuthService,
-              AuthGuard
+              AuthService
             ]
         }
     }

src/app/auth/auth.actions.ts

@@ -7,8 +7,6 @@ import {AuthService} from "../auth.service";
 import {tap} from "rxjs/operators";
 import {noop} from "rxjs";
 import {Router} from "@angular/router";
-import {login} from '../auth.actions';
-import {AppState} from '../../reducers/reducers';
 
 @Component({
   selector: 'login',
@@ -22,8 +20,7 @@ export class LoginComponent implements OnInit {
   constructor(
       private fb:FormBuilder,
       private auth: AuthService,
-      private router:Router,
-      private store: Store<AppState>) {
+      private router:Router) {
 
       this.form = fb.group({
           email: ['test@angular-university.io', [Validators.required]],
@@ -38,25 +35,7 @@ export class LoginComponent implements OnInit {
 
   login() {
 
-    const val = this.form.value;
-
-    this.auth.login(val.email, val.password)
-      .pipe(
-        tap(user => {
-
-          this.store.dispatch(login({user}));
-
-          this.router.navigateByUrl('/courses');
-
-        })
-      )
-      .subscribe(
-        noop,
-        () => alert('Login Failed')
-      );
-
-
   }
 
-
 }
+