ngrx-store intial impression

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "cli": {
     "packageManager": "yarn",
-    "defaultCollection": "@angular-eslint/schematics"
+    "defaultCollection": "@ngrx/schematics"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -39,7 +39,9 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "allowedCommonJsDependencies": ["nestjsx/crud-request"]
+            "allowedCommonJsDependencies": [
+              "nestjsx/crud-request"
+            ]
           },
           "configurations": {
             "production": {
@@ -131,4 +133,4 @@
     }
   },
   "defaultProject": "ngrx-blog-course"
-}
+}

package.json

@@ -23,6 +23,11 @@
     "@angular/platform-browser-dynamic": "~11.2.5",
     "@angular/router": "~11.2.5",
     "@nestjsx/crud-request": "^5.0.0-alpha.3",
+    "@ngrx/effects": "^12.0.0",
+    "@ngrx/entity": "^12.0.0",
+    "@ngrx/router-store": "11.1.1",
+    "@ngrx/store": "11.1.1",
+    "@ngrx/store-devtools": "11.1.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"
@@ -36,6 +41,7 @@
     "@angular-eslint/template-parser": "4.2.0",
     "@angular/cli": "~11.2.4",
     "@angular/compiler-cli": "~11.2.5",
+    "@ngrx/schematics": "^12.0.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.16.1",

src/app/app-routing.module.ts

@@ -8,10 +8,6 @@ const routes: Routes = [
     pathMatch: 'full',
     redirectTo: '/auth/login',
   },
-  {
-    path: 'auth',
-    loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
-  },
   {
     path: 'blogs',
     loadChildren: () =>

src/app/app.component.html

@@ -7,11 +7,13 @@
       <span>Blog App</span>
     </span>
     <span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="1rem">
-      <label class="username">{{authService.getCurrentUser()?.fullName}}</label>
-      <div
-        class="user-avatar"
-        [style.background-image]="authService.getCurrentUser()?.avatar?.base64Url"
-      ></div>
+      <ng-container *ngIf="currentUser$ | async as currentUser">
+        <label class="username">{{ currentUser?.fullName }}</label>
+        <div
+          class="user-avatar"
+          [style.background-image]="currentUser?.avatar?.base64Url"
+        ></div>
+      </ng-container>
     </span>
   </mat-toolbar>
 
@@ -29,22 +31,26 @@
 <ng-template #navbar>
   <div style="width: 250px">
     <mat-nav-list>
-      <a mat-list-item routerLink="/auth/login">
-        <mat-icon matListIcon color="primary">login</mat-icon>
-        <span mat-line>Login</span>
-      </a>
-      <a mat-list-item routerLink="/auth/register">
-        <mat-icon matListIcon color="primary">app_registration</mat-icon>
-        <span mat-line>Register</span>
-      </a>
-      <a mat-list-item routerLink="/auth/login" (click)="logout()">
-        <mat-icon matListIcon color="primary">logout</mat-icon>
-        <span mat-line>Logout</span>
-      </a>
-      <a mat-list-item routerLink="/blogs">
-        <mat-icon matListIcon color="primary">article</mat-icon>
-        <span mat-line>Blogs</span>
-      </a>
+      <ng-container *ngIf="isLoggedOut$ | async">
+        <a mat-list-item routerLink="/auth/login">
+          <mat-icon matListIcon color="primary">login</mat-icon>
+          <span mat-line>Login</span>
+        </a>
+        <a mat-list-item routerLink="/auth/register">
+          <mat-icon matListIcon color="primary">app_registration</mat-icon>
+          <span mat-line>Register</span>
+        </a>
+      </ng-container>
+      <ng-container *ngIf="isLoggedIn$ | async">
+        <a mat-list-item routerLink="/auth/login" (click)="logout()">
+          <mat-icon matListIcon color="primary">logout</mat-icon>
+          <span mat-line>Logout</span>
+        </a>
+        <a mat-list-item routerLink="/blogs">
+          <mat-icon matListIcon color="primary">article</mat-icon>
+          <span mat-line>Blogs</span>
+        </a>
+      </ng-container>
     </mat-nav-list>
   </div>
 </ng-template>

src/app/app.component.ts

@@ -1,22 +1,26 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatDrawer } from '@angular/material/sidenav';
 import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
-import { AuthService } from './core/services';
+import { User } from './auth/models';
+import { AuthActions } from './auth/redux/auth.actions';
+import { AuthSelectors } from './auth/redux/auth.selectors';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
-  constructor(
-    private readonly router: Router,
-    public readonly authService: AuthService
-  ) {}
+  constructor(private readonly router: Router, private readonly store: Store) {}
 
   @ViewChild(MatDrawer) drawer: MatDrawer;
+  currentUser$: Observable<User>;
+  isLoggedIn$: Observable<boolean>;
+  isLoggedOut$: Observable<boolean>;
 
   ngOnInit() {
     this.router.events
@@ -26,13 +30,17 @@ export class AppComponent implements OnInit {
           this.drawer.close();
         }
       });
+
+    this.currentUser$ = this.store.select(AuthSelectors.currentUser);
+    this.isLoggedIn$ = this.store.select(AuthSelectors.isLoggedIn);
+    this.isLoggedOut$ = this.store.select(AuthSelectors.isLoggedOut);
   }
 
   toggleSidenav() {
     this.drawer.toggle();
   }
 
   logout() {
-    return this.authService.logout().subscribe();
+    this.store.dispatch(AuthActions.logoutRequested());
   }
 }

src/app/app.module.ts

@@ -9,12 +9,22 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  NavigationActionTiming,
+  RouterState,
+  StoreRouterConnectingModule,
+} from '@ngrx/router-store';
+import { Store, StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
+import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { AuthModule } from './auth/auth.module';
 import { AuthInterceptor } from './auth/interceptors';
 import { CoreModule } from './core/core.module';
-import { AuthService } from './core/services';
+import { globalReducers, metaReducers } from './core/redux/reducers';
+import { EffectsModule } from '@ngrx/effects';
 
 @NgModule({
   declarations: [AppComponent],
@@ -23,7 +33,6 @@ import { AuthService } from './core/services';
     BrowserAnimationsModule,
     HttpClientModule,
     FlexLayoutModule,
-    AppRoutingModule,
     MatToolbarModule,
     MatButtonModule,
     MatButtonModule,
@@ -32,14 +41,26 @@ import { AuthService } from './core/services';
     MatListModule,
     MatSnackBarModule,
     CoreModule,
+    AuthModule,
+    AppRoutingModule,
+    StoreModule.forRoot(globalReducers, { metaReducers }),
+    EffectsModule.forRoot(),
+    StoreDevtoolsModule.instrument({
+      maxAge: 25,
+      logOnly: environment.production,
+    }),
+    StoreRouterConnectingModule.forRoot({
+      routerState: RouterState.Minimal,
+      navigationActionTiming: NavigationActionTiming.PostActivation,
+    }),
   ],
   bootstrap: [AppComponent],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,
       useClass: AuthInterceptor,
       multi: true,
-      deps: [AuthService],
+      deps: [Store],
     },
   ],
 })

src/app/auth/auth-routing.module.ts

@@ -4,12 +4,17 @@ import { LoginComponent, RegisterComponent } from './components';
 
 const routes: Routes = [
   {
-    path: 'login',
-    component: LoginComponent,
-  },
-  {
-    path: 'register',
-    component: RegisterComponent,
+    path: 'auth',
+    children: [
+      {
+        path: 'login',
+        component: LoginComponent,
+      },
+      {
+        path: 'register',
+        component: RegisterComponent,
+      },
+    ],
   },
 ];
 

src/app/auth/auth.module.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -9,9 +8,13 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { RouterModule } from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
 
 import { AuthRoutingModule } from './auth-routing.module';
 import { LoginComponent, RegisterComponent } from './components';
+import { AuthEffects } from './redux/auth.effects';
+import { authFeature, authReducer } from './redux/auth.reducer';
 
 @NgModule({
   declarations: [LoginComponent, RegisterComponent],
@@ -26,6 +29,8 @@ import { LoginComponent, RegisterComponent } from './components';
     MatButtonModule,
     MatIconModule,
     ReactiveFormsModule,
+    StoreModule.forFeature(authFeature, authReducer),
+    EffectsModule.forFeature([AuthEffects]),
   ],
 })
 export class AuthModule {}

src/app/auth/components/login/login.component.ts

@@ -1,28 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
-import { AuthService } from '../../../core/services';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+
+import { AuthActions } from '../../redux/auth.actions';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
-  constructor(
-    private readonly authService: AuthService,
-    private readonly router: Router,
-    private readonly matSnackbar: MatSnackBar
-  ) {}
+  constructor(private readonly store: Store) {}
 
   hide = true;
-  formGroup!: FormGroup;
+  formGroup: FormGroup;
 
   ngOnInit() {
     this.formGroup = new FormGroup({
@@ -38,14 +29,7 @@ export class LoginComponent implements OnInit {
   onFormSubmit() {
     if (this.formGroup.valid) {
       const { email, password } = this.formGroup.value;
-      this.authService.login(email, password).subscribe(
-        () => {
-          this.router.navigate(['blogs']);
-        },
-        () => {
-          this.matSnackbar.open('Login Failed!', 'OK');
-        }
-      );
+      this.store.dispatch(AuthActions.loginRequested({ email, password }));
     }
   }
 }

src/app/auth/components/register/register.component.html

@@ -29,7 +29,7 @@ <h2>Register</h2>
           />
           <mat-error *ngIf="formGroup.get('firstName')!.invalid">
             <span *ngIf="formGroup.get('firstName')!.errors?.required">
-              FirstName is required
+              First Name is required
             </span>
           </mat-error>
         </mat-form-field>

src/app/auth/components/register/register.component.ts

@@ -8,8 +8,8 @@ import {
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
-import { AuthService } from '../../../core/services';
 
+import { AuthService } from '../../../core/services';
 import { ConfirmPasswordValidator } from './confirm-password.validator';
 
 @Component({