angular - NgRX 效果 - 类型 'Observable' 不可分配给类型 'Observable'

Question

在使用 NgRX 8 时，我和我的同事在实现效果时经常遇到奇怪的错误消息。

Type 'Observable<unknown>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'

与类型问题有关。消息如此不具体，它标志着完整的效果，真是令人讨厌。这经常出现并且很难解决。

我们想知道我们是否可以做些什么来快速识别问题，或者我们是否能够以某种方式解构消息。我不是在这里寻找特定的解决方案，而是寻找“如何快速确定问题所在”的过程。

谢谢，干杯!

可能性的集合

这是我们到目前为止所做的，也是来自评论和答案的想法。

• 在大多数情况下，这可能不是操作的问题
• switchMap 参数可能是错误的解构
• 未导入 RxJS 运算符之一
• 服务中的错误参数和返回值可能是原因
• 服务和操作类型不一致也可能是原因
• 如果没有任何帮助并且您确定没有问题:重新加载 TypeScript

我们仍然希望有一个技巧来分解错误消息。

Answer 1

快速版
注释掉 createEffect(() => ,
修复您的 IDE (VSCode) 标记的错误，
添加 createEffect(() =>回来。

备选方案 - 像下面这样重写也可以

someEffect$ = createEffect(() => {
  return this.actions$.pipe(
    ...
  )
})

额外的

做了以上操作后还是报错？类型检查正确地完成了它的工作并告诉你应该映射到 Observable<Action>。或者为了纯粹的副作用添加第二个参数 { dispatch: false } (即不发送 Action )。查看NgRx Effects Docs

---

旧答案(使用 @Effect 是不必要的，也不是必需的)

我发现最简单的调试方法是以版本 7 的方式编写 @Effect装饰器，完成后使用 createEffect 重写.

所以调试:

  navigateToDashboard$ = createEffect(() =>
    this.actions$.pipe(
      ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
      map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
      map((team: Team) => team.TeamID),
      SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
    )
  )

给出的无用错误写为(添加装饰器，删除 createEffect(() =>，删除最后一个括号)，

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
)

现在我们得到错误

Cannot find name 'SwitchMap'

紧随其后

Type 'Go' is not assignable to type 'ObservableInput<any>'

解决这个问题

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    switchMap(id => of(new routerActions.Go({ path: ['/team', id, 'populate'] })))
)

现在用 NgRx 8 术语重写。不漂亮但有效。