使用 @ngrx/Effect 效果不会被动作触发

Question

我希望我创建的 Effect 应该通过调度一个动作来触发，但它没有发生。动作被正确发送，但效果似乎没有正确观察到这一点。我创建了这个效果：

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

Answer 1

您没有向效果模块提供效果 class。在 EffectsModule 的 ngModule 导入中，您传递了一个空数组。您的 PoliciesEffects 服务应该在该数组中。

使用 @ngrx/Effect 效果不会被动作触发

Using @ngrx/Effect an effect is not being triggered by an Action

angular7