I'm facing an issue with my NgRx effects.
Although the application successfully adds to the store, my effects related to the request are not executing. When adding a new car, it should be added to the store and trigger the effects, but nothing is happening. There are no console logs from my effects, no HTTP errors due to incorrect URLs, basically no feedback at all.
Below is my app code:
Reducer
import { Action } from '@ngrx/store';
import * as CarActions from './car.actions';
import { Car } from 'src/models/car.model';
const initialState: Car = {
brand: '',
model: ''
};
export function carReducer(state: Car[] = [initialState], action: CarActions.Actions) {
switch (action.type) {
case CarActions.ADD_CAR:
return [...state, action.payload];
case CarActions.ADD_CAR_FAIL:
return {
...state,
carError: action.payload,
};
default:
return state;
}
}
State
import { Car } from './../../models/car.model';
export interface AppState {
readonly car: Car;
}
Actions
import { Action } from '@ngrx/store';
import { Car } from './../../models/car.model';
export const ADD_CAR = '[CAR] Add';
export const ADD_CAR_FAIL = '[CAR] Fail';
export class AddCar implements Action {
readonly type = ADD_CAR;
constructor(public payload: Car) {}
}
export class AddCarFail implements Action {
readonly type = ADD_CAR_FAIL;
constructor(public payload: string) {}
}
export type Actions = AddCar | AddCarFail;
Effects
import { Actions, Effect, ofType } from '@ngrx/effects';
import * as CarActions from './car.actions';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { switchMap, catchError, map, tap } from 'rxjs/operators';
import { of } from 'rxjs';
@Injectable()
export class CarEffects {
@Effect()
carAdd = this.actions$.pipe(
ofType(CarActions.ADD_CAR),
switchMap((carData: CarActions.AddCar) => {
console.log('true');
return this.http.post('http://myapi.com/api', { brand: carData.payload.brand, model: carData.payload.model }).pipe(map(resData => {
localStorage.setItem('test', 'asdasdasd');
}),
catchError(errorRes => {
console.log(errorRes);
const errorMessage = 'An unknown error occurred!';
if (!errorRes.error || !errorRes.error.error) {
return of(new CarActions.AddCarFail(errorMessage));
}
console.log(errorRes.error.error.message);
return of(new CarActions.AddCarFail(errorRes.error.error.message));
}));
})
);
constructor(
private actions$: Actions,
private http: HttpClient) { }
}
App.Module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CarComponent } from './car/car.component';
import { StoreModule } from '@ngrx/store';
import { carReducer } from './car/car.reducer';
import { HttpClientModule } from '@angular/common/http';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
declarations: [
AppComponent,
CarComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ car: carReducer }),
HttpClientModule,
StoreDevtoolsModule.instrument({
maxAge: 5
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Do you think my implementation of NgRx in the code is correct?