Ngrx Effects 不听动作

Question

我想在我的 Angular 应用 (v7) 中使用 ngrx/efffects 和 ngrx/store。我按照ngrx documentation 中的建议在我的应用程序中配置了一切。在 AppComponent 中调度操作时，reducer 按预期工作，但看起来 效果没有监听任何操作。

测试：

在执行ng serve -o 之后检查控制台。一切都按预期记录，但生效的除外。

请指出我哪里出错了。

Github Repo

效果

@Injectable()
export class AppEffects {
  constructor(
    private actions$: Actions,
    private myService: MyserviceService
  ) {}

  myAction$ = this.actions$.pipe(
    ofType<fromActions.GetItems>(MyActionTypes.GET_ITEMS),
    switchMap(action => {
      console.log('i am in effects', action);
      return this.myService.getItems().pipe(
        map(data => new fromActions.GetItemsSuccess(data)),
        catchError(err => of(new fromActions.GetItemsSuccess(err)))
      );
    })
  );
}

AppModule 中配置的效果

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([AppEffects])
  ],
})

AppComponent 中的调度操作

export class AppComponent implements OnInit {
  constructor(private store: Store<State>) {
    console.log('in component');
  }

  ngOnInit() {
    console.log('dispatched action in AppComponent');
    this.store.dispatch(new fromAction.GetItems());
  }
}

Answer 1

您缺少 @Effect() 装饰器，否则这些可观察对象将不会被注册为商店的副作用。

import { Effect, Actions, ofType } from '@ngrx/effects';

//....

@Injectable()
export class AppEffects {
 //  ....

  @Effect()
  myAction$ = this.actions$.pipe(
    ofType<fromActions.GetItems>(MyActionTypes.GET_ITEMS),
    switchMap(action => {
      console.log('i am in effects', action);
      return this.myService.getItems().pipe(
        map(data => new fromActions.GetItemsSuccess(data)),
        catchError(err => of(new fromActions.GetItemsSuccess(err)))
      );
    })
  );
}