У меня проблема с эффектами NgRx.
Приложение корректно добавляет в магазин, к сожалению у меня эффекты с запросом не выполняются, т.е. в момент запуска добавления нового автомобиля добавьте его в магазин и все. Проблема в том, что нет журналов консоли от моих эффектов, нет ошибки http из-за неправильного URL-адреса, вообще ничего.
Мой код приложения:
Редуктор
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;
}
}
Состояние
import { Car } from './../../models/car.model';
export interface AppState {
readonly car: Car;
}
Действия
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;
Последствия
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.info('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.info(errorRes);
const errorMessage = 'An unknown error occurred!';
if (!errorRes.error || !errorRes.error.error) {
return of(new CarActions.AddCarFail(errorMessage));
}
console.info(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 { }
И самое главное, хорошо ли мой код использует NgRx?
@TonyNgo теперь работает нормально :) спасибо за помощь
Вы не добавили эффект в свой модуль
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';
import { EffectsModule } from '@ngrx/effects';
import { CarEffects } from './car/car.effects';
@NgModule({
declarations: [
AppComponent,
CarComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ car: carReducer }),
HttpClientModule,
EffectsModule.forRoot([CarEffects]),
StoreDevtoolsModule.instrument({
maxAge: 5
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Вам нужно импортировать EffectsModule
, чтобы зарегистрировать свои эффекты.
В app.module.ts
вы можете:
import {CarEffects} from 'path/to/careffects';
@NgModule({
declarations: [
AppComponent,
CarComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ car: carReducer }),
HttpClientModule,
StoreDevtoolsModule.instrument({
maxAge: 5
}),
// ADD THIS BELOW !!
EffectsModule.forRoot(
[CarEffects]
)
],
providers: [],
bootstrap: [AppComponent]
})
Вы печатаете определенно быстрее, чем я;)
вернуть this.http.post('myapi.com/api', {марка: carData.payload.brand, модель: carData.payload.model}).pipe(map(resData => { localStorage.setItem('test', 'asdasdasd') ; }) Попробуйте использовать тап вместо карты