The parameter type x cannot be assigned to the argument type '(x) => ObservableInput<{}>'

Question

The parameter type x cannot be assigned to the argument type '(x) => ObservableInput<{}>'

Looking for some insights on this issue

Currently working with ngrx and attempting to utilize multiple switchMaps to call various action classes.

Defined Actions:

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))
}

Encountering a TypeScript error:

[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'.

Attempted using map instead of a second switchMap but BlogAddedToDBAction is not being executed.

angular typescript rxjs ngrx

Answer 1

Answer №1

When deciding between using switchMap and mergeMap, it's important to consider the behavior you want. switchMap is ideal for emitting an Observable that can be canceled, like an addBlog HTTP request. However, if you need to add a blog before the previous one is finished, mergeMap may be a better choice to avoid canceling the request prematurely. More information on this topic can be found here.

It's important to note that switchMap requires an Observable-compatible value to be emitted, so returning a plain object like BlogAddedToDBAction won't work. Instead, consider using

of(new BlogAddedToDBAction(action))

to create an Observable that emits the object. However, this may not always be the desired outcome.

In your current setup, the Effect is only emitting the CrudSuccessAction, but you may want to emit both actions. In this case, using merge to combine the actions may be a better approach. Here's an example of how you could update your code:

@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())
  });

By using mergeMap with an array, each value within the array will be emitted sequentially. You can test this behavior with a simple example:

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

Answer 2

When deciding between using switchMap and mergeMap, it's important to consider the behavior you want. switchMap is ideal for emitting an Observable that can be canceled, like an addBlog HTTP request. However, if you need to add a blog before the previous one is finished, mergeMap may be a better choice to avoid canceling the request prematurely. More information on this topic can be found here.

It's important to note that switchMap requires an Observable-compatible value to be emitted, so returning a plain object like BlogAddedToDBAction won't work. Instead, consider using

of(new BlogAddedToDBAction(action))

to create an Observable that emits the object. However, this may not always be the desired outcome.

In your current setup, the Effect is only emitting the CrudSuccessAction, but you may want to emit both actions. In this case, using merge to combine the actions may be a better approach. Here's an example of how you could update your code:

@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())
  });

By using mergeMap with an array, each value within the array will be emitted sequentially. You can test this behavior with a simple example:

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

The parameter type x cannot be assigned to the argument type '(x) => ObservableInput<{}>'

Answer №1

Similar questions

Ways to develop a dynamic Promise-returning Function

Problem with connecting Angular data

Ways to verify if MatDialog is shown using a mock during an angular unit test

Tips for resolving conflicts between sequelize and angular within a lerna monorepo using typescript

What could be causing routerLink to malfunction despite correct configuration?

A guide on the correct way to fork an Ionic Stencil Component

Encountering the ExpressionChangedAfterItHasBeenCheckedError message despite updating the property via the @Output event

Tips for typing a narrow JSX.Element

Initializing a component in Angular 2 using third party callbacks

Could the "IonApp" class found in @ionic/angular (Ionic 4) be considered the updated version of the "App" class in ionic-angular (Ionic 3)?

Can the CDK be used to reboot both RDS and EC2 instances simultaneously?

Set the class function to be uninitialized

When you call Subscribe(), you will receive the output "complete: () => void; 'complete' is defined in this context. What exactly does this signify?

Leverage push notifications and utilize multiple service workers with an Angular Ionic 5 progressive web app, designed for optimal performance on Web, Android

Always directing to the initial page upon refreshing the browser in Angular's secondary route

Sharing data between two components in an Angular2-Meteor application

Encountering a JSON error in Ionic 3 due to a circular structure conversion

How to replace/redirect the import statement in TypeScript from { X } to 'Y'

Discovering the highest value within an array of objects

Are there any notable purposes for using the `.d.ts` file extension beyond just improving code readability?