我的NgRx效果不起作用，什么也没发生 [英] My NgRx effects not working, nothing happend

问题描述

我的NgRx效果有问题.

I have problem with my NgRx effects.

应用程序正确地添加到商店中，不幸的是，我没有执行请求的效果，即在启动添加新车时，将其添加到商店中就这样了.问题是我的效果没有控制台日志，没有url错误导致的http错误，一无所有.

The application correctly adds to the store, unfortunately my effects with the request are not performed, i.e. at the time of launching the addition of a new car, add it to the store and that's it. The problem is that there are no console logs from my effects, no http error because of the wrong url, nothing at all.

我的应用代码:

减速器

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.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

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?

And most importantly, does my code use NgRx in a good way?

推荐答案

您没有在模块中添加效果

You did not add Effect to your module

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 { }

这篇关于我的NgRx效果不起作用，什么也没发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！