NgRX effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

Solution 1:

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

Additional

Still 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

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

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.

So to debug:

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

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

Now we get error

Cannot find name 'SwitchMap'

Followed by

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

Fixing this gives

@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'] })))
)

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

Solution 2:

I had the exact same issue and in my case it was because of wrongly placed braces and a missing import.

Here is what I did to debug and solve it.

Split the inner pipe-able function into individual functions. This is the foremost step for me because of the complex syntax and auto complete braces from vscode, sometimes a brace exists in wrong place and it's not easy to find. This also solves almost all other problems (missing imports, incorrect return types etc) as the code to debug is much smaller and vscode highlights this individual error from the sub function.

This is what I had before

    performLogin$ = createEffect(() => 
       this.actions$.pipe(
           ofType(performLogin),
           mergeMap(() => this.loginService.performLogin().pipe(
               map(() => loginSuccess())
           )))
    );

Changed this to below

 performLogin$ = createEffect(() => 
       this.actions$.pipe(
           ofType(performLogin),
           mergeMap(() => this.performLogin()),
           catchError((error ) => { console.log("HELLO"); return EMPTY})
       )
    );

    performLogin() {
        return this.loginService.performLogin()
        .pipe(map(() => loginSuccess()));
    }

Also a bonus I got from this approach is that the catchError block on the inner pipe does not get triggered (as per effects example it should work). Hence had to include it in the outer pipe-able block. Here the error is caught and works as expected. But still figuring out why it does not work.

Just to sum it up, the login service does the following (throw error or return Observable of true)

//login.service.ts

performLogin() : Observable<boolean> {
        throw "Something went wrong";
        //return of(true);
    }

Hope this helps.

Solution 3:

In case of dealing with this problem and using official ngrx 8 example.

loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
   )
);

Easy and fast solution can be putting "any" type.

loadMovies$: any = createEffect((): any => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
   )
);

Do not forget imports for rxjs operators, observables.

In case of dealing with action payload - props, define an action type.

ofType<MySuperActions>

or

ofType<ReturnType<typeof myAction>>

Solution 4:

Actually you need to treat actions created by createAction as a function and call it to return the action object. Check this desc. So your of(addCommentFailed) should be of(addCommentFailed()).

Solution 5:

I had this issue because of missing import 'of' operator here

// events.effects.ts
...

getEvents$: Observable<Action> = createEffect(
    () => this.actions$.pipe(
      ofType(EventsActions.getEvents),
      switchMap(action =>
        this.eventService.getEvents().pipe(
          map(events => EventsActions.getEventsSuccess({ events })),
          catchError(error => of(EventsActions.getEventsError({ error })))
        )
      )
    )
  );
...

I've fixed it by adding this line of code at the top

// events.effects.ts

import { Observable, of } from 'rxjs';

...