Angular6 @ngrx/商店开发工具-效果调用两次
我发出的所有动作都会被调用两次。我已经发现,这是由Angular6 @ngrx/商店开发工具-效果调用两次,angular6,ngrx-store,ngrx-effects,Angular6,Ngrx Store,Ngrx Effects,我发出的所有动作都会被调用两次。我已经发现,这是由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
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
{}
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 {
}
设备效应
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' }))
);
}
)
);
从'/../../custom.action'导入{CustomAction};
从“@angular/core”导入{Injectable,injection};
从'@angular/Http'导入{Http};
从'@ngrx/effects'导入{Actions,Effect,of type};
从“rxjs/Observable”导入{Observable};
从“rxjs/operators”导入{catchError,map,mergeMap};
从“/equipment.action”导入{EquipmentActions};
从'@angular/common/http'导入{HttpClient};
从'@ngrx/store'导入{Action,State};
从“rxjs/internal/observable/of”导入{of};
从“/equipment.service”导入{EquipmentService};
从“../../app.state”导入{IAppState};
从“../../customActionHelper”导入{ofTypeWithPayload};
@可注射()
出口级设备效应{
建造师(
私有http:HttpClient,
私有操作$:操作,
私有只读状态:状态,
@注入('IEquipmentService')
私人设备服务:设备服务
) { }
@效果()
getAllEquipments$:Observable=此.actions$.pipe(
类型(设备动作。加载所有设备),
合并映射(操作=>{
log('here');({type:'LOAD_ALL_devices_SUCCESS',payload:devices}),
catchError(()=>的({type:'LOAD\u ALL\u devices\u FAIL'}))
);
}
)
);
有人有主意吗
谢谢