Angular 5 ngrx Effect 没有导出成员'ofType'

Posted 2023-03-13

【中文标题】Angular 5 ngrx Effect 没有导出成员\'ofType\'

【英文标题】：Angular 5 ngrx Effect no exported member 'ofType'Angular 5 ngrx Effect 没有导出成员'ofType'

【发布时间】：2018-06-30 06:52:14

【问题描述】：

我正在尝试为我的 ngrx 状态管理器实现效果。目前我正在使用Angular v5.2.1、ngrx v4.1.1 和rxjs v5.5.6。 例如，我尝试了“旧”方法

@Effect() login$: Observable<Action> = this.actions$.ofType('LOGIN')
.mergeMap(action =>
  this.http.post('/auth', action.payload)
    // If successful, dispatch success action with result
    .map(data => ( type: 'LOGIN_SUCCESS', payload: data ))
    // If request fails, dispatch failed action
    .catch(() => of( type: 'LOGIN_FAILED' ))
);

但我收到了一个错误Property 'mergeMap' does not exist on type 'Actions<Action>'。 所以我使用了新的pipe 方法。问题是当我尝试导入 ofType 运算符时

// ...
import  Action  from '@ngrx/store';
import  Effect, Actions, ofType  from '@ngrx/effects';

import  map, mergeMap, catchError  from 'rxjs/operators';
import  of  from 'rxjs/observable/of';

@Injectable()
export class WifiEffects 

  @Effect()
  getWifiData: Observable<Action> = this.actions$.pipe(
    ofType(WifiTypes.getWifiNetworks),
    mergeMap((action: GetWifiNetworks) =>
      this.mapService.getWifiNetworks().pipe(
        map((data: WifiNetworks) => new GetWifiNetworksSucc(data)),
        catchError(() => of(new GetWifiNetworksErr()))
      )),
  );

  constructor (
    private actions$: Actions,
    private mapService: GoogleMapDataService
  ) 

我收到一个错误Module '".../node_modules/@ngrx/effects/effects"' has no exported member 'ofType'. 有什么想法吗？

【问题讨论】：

你有npm install @ngrx/effects --save吗？如果您已经拥有它，请尝试仅导入效果模块：import EffectsModule from '@ngrx/effects';

我在同一条船上 TomP - 尝试学习 ngrx 并不断遇到障碍。示例显示“ofType”应该从“@ngrx/effects”导出，但我也没有看到它。

@Z.Bagley ofci 我将模块导入到 app.module.ts ....

【参考方案1】：

查看@ngrx/effects API，没有迹象表明该库已经实现了ofType 的可出租版本，因此您的第二个实现将无法工作（至少在管道内没有ofType）。

您的第一个实现只是缺少mergeMap 的导入

import 'rxjs/add/observable/mergeMap';

可能还有map 和catch

import 'rxjs/add/observable/map';
import 'rxjs/add/observable/catch';

如果您想将ofType 与pipe 一起使用，这可能会起作用

@Effect()
getWifiData: Observable<Action> = 
  this.actions$.ofType(WifiTypes.getWifiNetworks)
    .pipe(
      mergeMap((action: GetWifiNetworks) =>
      ...

因为ofType() 返回一个已将.pipe 添加到其原型中的Observable。

---

脚注

在查看了 github 上的源代码后（截至 2018 年 1 月 22 日），我在此处 platform/modules/effects/src/index.ts 找到了 lettable ofType 的导出。

但是在使用@ngrx/effects@latest（给我版本 4.1.1）安装时，我在安装的 node_modules 文件夹下看不到这个导出参考。

在我的组件中，我也不能使用import ofType from '@ngrx/effects';。

【讨论】：

我关注了github.com/ngrx/platform/blob/master/example-app/app/auth/…

看起来正在进行中，见顶部brandonroberts chore(Example): Refactor example app to use lettable operators

它不只是在那个示例应用程序中，它遍布整个文档 - github.com/ngrx/platform/blob/master/docs/effects/README.md

很适合在platform/modules/effects/src/index.ts 中导出，顺便说一句...像import map, mergeMap, catchError from 'rxjs/operators'; for rxjs v5.5.x 这样的导入效果很好

确实如此。由于 nightly install 提供了 5.0.0-alpha.0 版本，我想知道 lettable 运算符是否适用于下一个主要版本，不幸的是，文档记录者抢了先机。

【参考方案2】：

文档似乎反映了每晚发布的版本。

https://github.com/ngrx/platform/issues/727

可在此处获取每晚版本：https://github.com/ngrx/effects-builds

【讨论】：

对 npm synatx 进行夜间构建有什么想法吗？还是我们只是下载 zip 并将其停放在 node_modules 中？

根据github.com/ngrx/platform/tree/v4.1.1/docs/effects 应该是：npm install @ngrx/effects --save OR yarn add @ngrx/effects 但是我无法让它与 npm 一起使用。

嗯，所以我刚刚做了yarn add github:ngrx/effects-builds，但尝试导入它仍然没有乐趣。

另外，现在安装的版本是5.0.0-alpha.0，有点吓人。 （并且@ngrx/store 需要相同的版本）。