NgRX 8效果-类型“可观察到的"不可分配给"Observable< Action>"类型 [英] NgRX 8 effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

问题描述

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

While working with NgRX 8 my colleagues and me are frequently facing a weird error message when implementing the effects.

类型'Observable< unknown>'不可分配给类型'Observable< Action> | ((... args:any [])=> Observable< Action>)'

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

它与类型问题有关.消息如此具体，真是令人讨厌，它标志着完整的效果.这种情况经常出现，而且确实很难解决.

It is related to type issues. It is really annoying that the message is so unspecific and it marks the complete effect. This appears frequently and is really hard to resolve.

我们想知道是否可以做一些事情来快速发现问题，或者我们是否能够以某种方式破坏消息的结构.我不是在这里寻找特定的解决方案，而是在寻找一种如何快速确定出问题的方法"的程序.

We are wondering if there is something we can do in order to quickly identify the problems or if we are able to destructure the message in some way. I am not looking for a specific solution here, but more for a "how to quickly determine what's wrong"-procedure.

谢谢和欢呼！

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

It is what we have done so far and also ideas from comments and answers.

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

• In most cases it is probably not an issue with actions
• It can be a wrong destructuring for the switchMap parameter
• One of the RxJS operators is not imported
• Wrong parameters and return value in the service can be the reason
• Inconsistent types in service and action can be the reason as well
• If nothing helps and you are sure, there is nothing wrong: Reload TypeScript

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

We are still hoping for a trick to break down the error message.

推荐答案

快速版本
注释掉createEffect(() =>，
修复您的IDE(VSCode)标记的错误，
重新添加createEffect(() =>.

Quick version
comment out createEffect(() =>,
fix errors that your IDE (VSCode) flags up,
add createEffect(() => back in.

替代-类似于以下内容的重写

Alternative - rewriting like the following also works

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

其他

完成上述操作后没有错误? 类型检查可以正确完成它的工作，并告诉您应该映射到Observable<Action>或添加第二个参数{ dispatch: false }以获得纯粹的副作用(即不分派动作).请参见 NgRx效果文档

No errors after doing the above? Type-checking is doing it's job correctly and telling you that you should be mapping to an Observable<Action> or for a purely side-effect effect adding the second argument { dispatch: false } (i.e. not dispatching an action). See the NgRx Effects Docs

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

Older Answer (using @Effect is unneccessary and is not required)

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

The easiest way I've found to debug is to write in a version 7 manner with the @Effect decorator and once done rewrite using 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(() =>，删除最后一个括号)

which gives the non-helpful error write as (add decorator, delete createEffect(() =>, delete final bracket),

@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项重写.不漂亮，但是可以.

Now rewrite in NgRx 8 terms. Not pretty but works.

这篇关于NgRX 8效果-类型“可观察到的"不可分配给"Observable&lt; Action&gt;"类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！