[NgRx 8] Basic of NgRx8

1. First step is creating action creator

Action name should be clear which page, which functionality, what is the action name

"[Load Courses Effect] All Courses Loaded",

"[Courses Resolver] Load All Courses"

Action

import { createAction, props } from "@ngrx/store";
import { Course } from "./model/course";

export const loadAllCourse = createAction(
  "[Courses Resolver] Load All Courses"
);

export const allCoursesLoaded = createAction(
  "[Load Courses Effect] All Courses Loaded",
  props<{ courses: Course[] }>()
);

 

action types:

To make actions easy to work with, can create action types: basic it is just a improt and re-export

// actions-types.ts

import * as CoursesAction from "./cuorses.actions";

export { CoursesAction };

 

Effects:

Using 'createEffect', first param is a function to catch the event stream, second param is the options, can set '{dispatch: false}' which mean no other dispath event for this effect.

import { Injectable } from "@angular/core";
import { Actions, ofType } from "@ngrx/effects";
import { createEffect } from "@ngrx/effects";
import { CoursesAction } from "./actions-types";
import { CoursesHttpService } from "./services/courses-http.service";
import { concatMap, map, tap } from "rxjs/operators";

@Injectable()
export class CoursesEffects {
  constructor(
    private action$: Actions,
    private coursesHttpService: CoursesHttpService
  ) {}

  loadAllCourses$ = createEffect(() =>
    this.action$.pipe(
      ofType(CoursesAction.loadAllCourse),
      concatMap(() => this.coursesHttpService.findAllCourses()),
      map(courses => CoursesAction.allCoursesLoaded({ courses }))
    )
  );
}

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import { Actions, ofType, createEffect } from "@ngrx/effects";
import { AuthActions } from "./action-types";

import { tap } from "rxjs/operators";

@Injectable()
export class AuthEffects {
  constructor(private action$: Actions, private router: Router) {}

  login$ = createEffect(
    () =>
      this.action$.pipe(
        ofType(AuthActions.login),
        tap(action => {
          localStorage.setItem("user", JSON.stringify(action.user));
        })
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.action$.pipe(
        ofType(AuthActions.logout),
        tap(action => localStorage.removeItem("user")),
        tap(() => this.router.navigateByUrl("/"))
      ),
    { dispatch: false }
  );
}

 

Register effect:

@NgModule({
  imports: [
    ...
    EffectsModule.forFeature([AuthEffects])
  ],
  ...
})

 

Reducers:

Reducer mainly take care five things:

1. Define state interface

2. Creating adapter

3. Generate intialize state

4. Generate next state for one action

5. Export selector

1. Initial state:

First we need to have the interface defined for the state:

/*
export interface CoursesState {
  entities: { [key: number]: Course };
  ids: number[];
}*/

NgRx provide API to create state interface:

import { EntityState, createEntityAdapter } from "@ngrx/entity";

export interface CoursesState extends EntityState<Course> {
  /**Extend the entity here */
  allCoursesLoaded: boolean;
}

'EntityState' contains 'entities' & 'ids'.

And we can extends interface by providing extra props: for example: 'allCoursesLoaded'.

 

2. Create Adapter:

export const adapter = createEntityAdapter<Course>({
  sortComparer: compareCourses
  // selectId: course => course.id // NgRx use 'id' by default
});

 

3. Generate initial state:

We can use 'adapter' to create initialstate

export const initCoursesState = adapter.getInitialState({
  allCoursesLoaded: false
});

 

4. Create Reducer:

export const coursesReducer = createReducer(
  initCoursesState,
  on(CoursesAction.allCoursesLoaded, (state, action) =>
    adapter.addAll(action.courses, { ...state, allCoursesLoaded: true }) // next state
  )
);

 

5. Export selector:

export const { selectAll } = adapter.getSelectors();

 

Full code:

import { Course, compareCourses } from "../model/course";
import { EntityState, createEntityAdapter } from "@ngrx/entity";
import { createReducer, on } from "@ngrx/store";
import { CoursesAction } from "../actions-types";
/*
export interface CoursesState {
  entities: { [key: number]: Course };
  ids: number[];
}*/

export interface CoursesState extends EntityState<Course> {
  /**Extend the entity here */
  allCoursesLoaded: boolean;
}

export const adapter = createEntityAdapter<Course>({
  sortComparer: compareCourses
  // selectId: course => course.id // NgRx use 'id' by default
});

export const initCoursesState = adapter.getInitialState({
  allCoursesLoaded: false
});

export const coursesReducer = createReducer(
  initCoursesState,
  on(CoursesAction.allCoursesLoaded, (state, action) =>
    adapter.addAll(action.courses, { ...state, allCoursesLoaded: true })
  )
);

export const { selectAll } = adapter.getSelectors();

 

5. Selector:

Selecotor mainly has two API: createFeatureSelector & createSelector:

import { createSelector, createFeatureSelector } from "@ngrx/store";
import * as fromCourses from "./reducers/courses.reducers";

export const selectCoursesState = createFeatureSelector<
  fromCourses.CoursesState
>("courses");

export const selectAllCourses = createSelector(
  selectCoursesState,
  fromCourses.selectAll
);

export const selectAllCoursesLoaded = createSelector(
  selectCoursesState,
  state => state.allCoursesLoaded
);

export const selectBeginnerCourses = createSelector(
  selectAllCourses,
  courses => courses.filter(course => course.category === "BEGINNER")
);

export const selectAdvancedCourses = createSelector(
  selectAllCourses,
  courses => courses.filter(course => course.category === "ADVANCED")
);

export const selectPromoTotal = createSelector(
  selectAllCourses,
  courses => courses.filter(course => course.promo).length
);

 

Component:

import { Component, OnInit } from "@angular/core";
import { compareCourses, Course } from "../model/course";
import { Observable } from "rxjs";
import { defaultDialogConfig } from "../shared/default-dialog-config";
import { EditCourseDialogComponent } from "../edit-course-dialog/edit-course-dialog.component";
import { MatDialog } from "@angular/material";
import { Store, select } from "@ngrx/store";
import { AppState } from "../../reducers";
import * as coursesSelector from "../courses.selectors";

@Component({
  selector: "home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
  promoTotal$: Observable<number>;

  beginnerCourses$: Observable<Course[]>;

  advancedCourses$: Observable<Course[]>;

  constructor(private dialog: MatDialog, private store: Store<AppState>) {}

  ngOnInit() {
    this.reload();
  }

  reload() {
    this.beginnerCourses$ = this.store.pipe(
      select(coursesSelector.selectBeginnerCourses)
    );

    this.advancedCourses$ = this.store.pipe(
      select(coursesSelector.selectAdvancedCourses)
    );

    this.promoTotal$ = this.store.pipe(
      select(coursesSelector.selectPromoTotal)
    );
  }

  onAddCourse() {
    const dialogConfig = defaultDialogConfig();

    dialogConfig.data = {
      dialogTitle: "Create Course",
      mode: "create"
    };

    this.dialog.open(EditCourseDialogComponent, dialogConfig);
  }
}

 

select:

'select' operator can be used in many places, mainly if you want to get piece of data from store, for example, it can be used in resolver as well:

import { Injectable } from "@angular/core";
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { Store, select } from "@ngrx/store";
import { AppState } from "../reducers";
import { CoursesAction } from "./actions-types";
import { tap, first, finalize, filter } from "rxjs/operators";
import { adapter } from "./reducers/courses.reducers";
import { selectAllCoursesLoaded } from "./courses.selectors";

@Injectable()
export class CoursesResolver implements Resolve<any> {
  loading = false;
  constructor(private store: Store<AppState>) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    return this.store.pipe(
      select(selectAllCoursesLoaded),
      tap(courseLoaded => {
        if (!this.loading && !courseLoaded) {
          this.loading = true;
          this.store.dispatch(CoursesAction.loadAllCourse());
        }
      }),
      // this resolve need to complete, so we can use first()
      filter(courseLoaded => courseLoaded),
      first(),
      finalize(() => (this.loading = false))
    );
  }
}