我希望我创建的效果应该通过调度一个动作来触发,但是那没有发生。 该动作已正确调度,但效果似乎是未正确监视此动作。 我创建了这种效果:
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { PoliciesService } from 'app/services/policies';
import * as policiesActions from '../actions/policies.actions';
import { Policy } from 'app/dtos/policy.dto';
import { PoliciesMapper } from 'app/services/policies/policies.mapper';
Injectable();
export class PoliciesEffect {
constructor(
private actions$: Actions,
private policyService: PoliciesService
) { }
@Effect()
getPolicies$: Observable<Action> = this.actions$.pipe(
ofType<policiesActions.GetPoliciesAction>(
policiesActions.ActionPoliciesType.GET_POLICIES
),
mergeMap((actions: policiesActions.GetPoliciesAction) =>
this.policyService.getPolicies().pipe(
map((policies: Policy[]) =>
new policiesActions.GetPoliciesActionSuccess(PoliciesMapper.policiesCollectionToPoliciesModelCollection(policies))
),
catchError(err => of(new policiesActions.GetPoliciesActionFailed(err)))
)
)
);
}
此效果有望在分派Action GetPoliciesAction后触发。 这没有发生,因此我无法执行HTTP请求以从服务器获取数据。
以下是我使用@ ngrx / store创建的操作:
import { Action } from '@ngrx/store';
import { Policy } from 'app/dtos/policy.dto';
import { PolicyModel } from 'app/models/policy.model';
export enum ActionPoliciesType {
GET_POLICIES = '[Policies] Get all policies list',
GET_POLICIES_SUCCESS = '[Policies] Policies received succesfully',
GET_POLICIES_FAILED = '[Policies] Policies reception failed'
}
export class GetPoliciesAction implements Action {
readonly type = ActionPoliciesType.GET_POLICIES;
constructor() { }
}
export class GetPoliciesActionSuccess implements Action {
readonly type = ActionPoliciesType.GET_POLICIES_SUCCESS;
constructor(public payload: PolicyModel[]) { }
}
export class GetPoliciesActionFailed implements Action {
readonly type = ActionPoliciesType.GET_POLICIES_FAILED;
constructor(public payload: string) { }
}
export type PoliciesActions =
GetPoliciesAction |
GetPoliciesActionSuccess |
GetPoliciesActionFailed;
这是我的app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from './material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { FooterComponent } from './components/footer/footer.component';
import { HomeComponent } from './components/home/home.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { StoreModule } from '@ngrx/store';
import { environment } from '../environments/environment';
import { IPoliciesService } from './services/policies/policies.interface';
import { PoliciesService } from './services/policies';
import { reducers } from './redux/reducers/reducers';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule, Actions} from '@ngrx/effects';
import { HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
FooterComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MaterialModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
StoreModule.forRoot(reducers),
StoreDevtoolsModule.instrument(),
EffectsModule.forRoot([]),
HttpClientModule
],
providers: [{
provide: IPoliciesService,
useClass: PoliciesService
}],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json:
"dependencies": {
"@angular/animations": "^7.0.4",
"@angular/cdk": "^7.3.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.3.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@ngrx/effects": "^7.2.0",
"@ngrx/store": "^7.2.0",
"@ngrx/store-devtools": "^7.2.0",
"angularfire2": "^5.1.1",
"concurrently": "^4.1.0",
"core-js": "^2.5.4",
"firebase": "^5.8.1",
"hammerjs": "^2.0.8",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.3",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
答案 0 :(得分:0)
您没有提供您的效果类效果模块。在为EffectsModule导入ngModule时,您要传递一个空数组。您的PoliciesEffects服务应该在该数组中。