Question

我在效果中分配的所有动作均被调用两次。我已经弄清楚，这是由StoreDevtoolsModule引起的。当我从StoreDevtoolsModule中踢出app.module.ts时，我的动作只会被调用一次=>一切正常。

这是我的设置：

Angular 6.0.1
"@ngrx/effects": "6.0.0-beta.1",
"@ngrx/entity": "5.2.0",
"@ngrx/router-store": "6.0.0-beta.1",
"@ngrx/store": "6.0.0-beta.1",
"@ngrx/store-devtools": "6.0.0-beta.1",

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { StoreModule, Store, combineReducers, ActionReducerMap, MetaReducer } 
from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { EquipmentModule } from './modules/equipment/equipment.module';

const reducers: ActionReducerMap<IAppState> = {
    equipments: EquipmentReducer
};

@NgModule({

    declarations: [
        AppComponent
    ],
    imports     : [
        BrowserModule,
        StoreModule.forRoot(reducers),
        StoreDevtoolsModule.instrument({
            name: 'EQUIPMENT',
            maxAge: 10,
            logOnly: true,
          }),
        EquipmentModule,
        EffectsModule.forRoot([]),
    ]
})
export class AppModule
{}

equipment.module.ts

import { EffectsModule } from '@ngrx/effects';
import { EquipmentEffects } from './equipment.effect';
import { EquipmentMockService } from './equipment.mock';

@NgModule({
  imports: [
    EffectsModule.forFeature([EquipmentEffects])
  ],
  providers: [
    {
      provide: 'IEquipmentService',
      useClass: EquipmentMockService
    },
  ]
})
export class EquipmentModule {
 }

equipment.effect.ts

import { CustomAction } from './../../custom.action';
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { EquipmentActions } from './equipment.action';
import { HttpClient } from '@angular/common/http';
import { Action, State } from '@ngrx/store';
import { of } from 'rxjs/internal/observable/of';
import { EquipmentService } from './equipment.service';
import { IAppState } from '../../app.state';
import { ofTypeWithPayload } from '../../customActionHelper';

@Injectable()
export class EquipmentEffects {
  constructor(
    private http: HttpClient,
    private actions$: Actions,
    private readonly state: State<IAppState>,
    @Inject('IEquipmentService')
    private equipmentService: EquipmentService
  ) { }

  @Effect()
  getAllEquipments$: Observable<Action> = this.actions$.pipe(
    ofType(EquipmentActions.LOAD_ALL_EQUIPMENTS),
    mergeMap(action => {
      console.log('here'); <-- This console.log gets called twice!
      return this.equipmentService.getAllEquipments().pipe(
        map(equipments => ({ type: 'LOAD_ALL_EQUIPMENTS_SUCCESS', payload: equipments })),
        catchError(() => of({ type: 'LOAD_ALL_EQUIPMENTS_FAIL' }))
      );
    }

    )
  );

有人有主意吗？

谢谢

@ ngrx / store-devtools-效果被调用了两次

0 个答案: