x 类型的参数不可分配给 '(x) => ObservableInput<{}> 类型的参数

Question

希望有人能对此有所了解

使用ngrx并尝试使用多个switchMaps来调用一些动作类。

我的行动：

export class BlogAddedAction implements Action {

    readonly type = BLOG_ADDED_ACTION;

    constructor(public payload:any) {

    }

}
export class CrudSucessAction implements Action {

    readonly type = CRUD_SUCCESS_ACTION;

    constructor(public payload:any) {

    }
}

export class BlogAddedToDBAction implements Action {

    readonly type = BLOG_ADDED_TO_DB_ACTION;

    constructor(public payload:any) {

    }
}

effects.ts：

  @Effect() addBlog$: Observable<any> = this.actions$
  .ofType<BlogAddedAction>(BLOG_ADDED_ACTION)
    .switchMap(action =>  {
        console.log(action)
    return this.blogService.addBlog(action.payload.blog)
    })
    .switchMap((action)=>new BlogAddedToDBAction(action))
    .map((action)=>new CrudSucessAction(action))
}

但我收到 Typescript 错误：

[ts]
Argument of type '(action: Blog) => BlogAddedToDBAction' is not 
assignable to parameter of type '(value: Blog, index: number) => ObservableInput<{}>'.Type 'BlogAddedToDBAction' is not assignable to type 'ObservableInput<{}>'.
Type 'BlogAddedToDBAction' is not assignable to type 'ArrayLike<{}>'.Property 'length' is missing in type 'BlogAddedToDBAction'.

尝试使用 map 而不是第二个 switchMap，但 BlogAddedToDBAction 没有被执行。

Answer 1

switchMap 应该在你想要发出一个可以取消的 Observable 时使用——在这种情况下它是 addBlog http 请求。在这种情况下，您很可能需要mergeMap，因为如果您在前一个博客完成添加之前尝试添加博客，它将被取消。见：https://blog.angularindepth.com/switchmap-bugs-b6de69155524

switchMap 需要发出与 Observable 兼容的值，因此您不能返回像 BlogAddedToDBAction 这样的普通对象。相反，您可以使用 of(new BlogAddedToDBAction(action))，因为 of 将创建一个发出该对象的 Observable -- 但是这可能不是您想要的。

Effect 是一个发出动作的单个 Observable 流。您的流仅发出 CrudSuccessAction。

看起来你可能想要同时发出这两个动作。为此，您可以使用merge。然后 Effect Observable 将依次发出每个动作。我会这样写：

@Effect() addBlog$: Observable<any> = this.actions$.pipe(
  ofType<BlogAddedAction>(BLOG_ADDED_ACTION),
  mergeMap(action =>  {
    console.log(action)
    return this.blogService.addBlog(action.payload.blog).pipe(
      mergeMap(action => [new BlogAddedToDBAction(action), new CrudSucessAction(action)]),
      catchError(() => of(new CrudErrorAction())
  });

mergeMap 带有一个数组将发出数组的每个值。您可以使用一个简单的测试来确认这一点：

of(1).pipe(mergeMap(() => [1, 2])).subscribe(console.log); // logs 1, then 2