Angular NgRx Course - 06 NgRx Effects & Selectors

[@vanzinvestor]

6:33 before run npm start you must add this code in customer.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Customer } from './customer.model';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
private customersUrl = 'localhost:3000/customers';
constructor(private http: HttpClient) {}
getCustomers(): Observable {
return this.http.get(this.customersUrl);
}
}

[@shark-p4o]

why use mergeMap over switchMap in the effect ? Because we only need to map the result from the inner observable and not merge also the initial state from the loadCustomers action

[@AngularDeveloper]

Good observation, thanks.

[@amrinderkaur8101]

sir, please mention the code for service file as u didnt write code for the same in the video

[@bernardor7552]

There is a link to the github repo in the description

[@shubhamgupta570]

Sir! Can you please Help?
While practicing this to my angular 9 projects, I have found some issues like
StaticInjectorError(AppModule)[customerEffect -> Actions]:
StaticInjectorError(Platform: core)[customerEffect -> Actions]:
NullInjectorError: No provider for Actions!
Any solution Sir?

[@AngularDeveloper]

It's difficult to know without looking at the context. You might need to import the Effect module in the app.module.ts. something like EffectsModule.forRoot([AppEffect]) in the imports array. Refer the to ngrx.io documenttion for more information about the installation.

[@shyandsy]

there is an error in angular 9 for the customer.effects which said "Type 'Observable' is not assignable to type 'Observable'.
Property 'type' is missing in type '{}' but required in type 'Action'." oadUsers$: Observable = this.actions$.pipe(......

[@rowehnakori]

I resolved changing from mergeMap to switchMap and adding "return" inside switchMap (and to the inner map to), otherwise you are basicly returning nothing from inside the pipe (and so angular protests because the observable is tecnicaly empty). Like this: loadCustomers$: Observable = this.actions.pipe(
ofType(
customerActions.CustomerActionTypes.LOAD_CUSTOMERS
),
switchMap((actions:customerActions.LoadCustomers) => {
return this.customerService.getCustomers().pipe(
map(
(customers: Customer[]) => {
return new customerActions.LoadCustomersSuccess(customers)
}
),
catchError(err => of(new customerActions.LoadCustomersFail(err)))
)
})
)
Hope it helps

[@DavidWallaceCroft]

VS Code popup suggestions keep obscuring the code that you just wrote on previous lines so it is harder for me to follow along.

[@AngularDeveloper]

The git repository has been provided in the description. Thanks

[@devaliero-3d597]

and, in case anyone is not familiar with git, one can checkout to any of the commits in the git and thereby have the exact copy of the codebase for each of the lessons.

[@debiprasadpanda619]

@@devaliero-3d597 It is difficult for the particular tutorial as there are just 2 commits. 1st one is the initial setup of Angular and the 2nd commit is of the final code.

[@devaliero-3d597]

@@debiprasadpanda619 This one github.com/angulardeveloper-io/ngrx-store-app has 10 commits

[@shyandsy]

this is my code repo for this tutorial on angular 9, github.com/shyandsy/angular-9-ngrx-user-mamagement