New version of @ngrx effect is not assignable to type 'Observable<Action>

Question

I update my @ngrx/store to the last version 8.5.2.

I need to get LIST of data from my API.

And now I create action

import { createAction, props } from "@ngrx/store";
import { IListAll } from "./../../list.model";

export const loadLists = createAction("[List] Load Lists");

export const loadListsSuccess = createAction(
  "[List] Load Lists Success",
  props<{ list: IListAll [] }>()
);

export const loadListsFailure = createAction(
  "[List] Load ListFailure",
  props<{ error: any }>()
);

End here is reducer

import { Action, createReducer, on } from "@ngrx/store";
import { IListAll } from "../../list.model";
import * as Listfrom "../actions/list.actions";

export const list= "list";

export interface State {
  listAll: IListAll [] | null;
}

export const initialState: State = {
  listAll: []
};

const listReducer = createReducer(
  initialState,
  on(SiteActions.loadLists, state => ({ ...state }))
);

export function reducer(state: State | undefined, action: Action) {
  return listReducer(state, action);
}

But when I try to set everything in effect

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import * as listActions from "../actions/list.actions";
import { concatMap, switchMap } from "rxjs/operators";
import { ListService } from "./../../list.service";
import { IListAll } from "./../../list.model";
import { ListFeatureKey } from './../reducers/list.reducer';

@Injectable()
export class ListEffects {
  loadLists$ = createEffect(() =>
    this.actions$.pipe(
      ofType(listActions.loadLists), 
      concatMap(() =>
      this.listService.getLists().pipe(
          map((users: SponsorModel[]) => new actions.LoadSponsorsSuccess(users))
        )
      )
  );

  constructor(private actions$: Actions, listService: ListService) {}
}

here is my service

 getLists(): Observable<IListAll[]> {
    return this.httpClient.get<IListAll[]>(
      environment.BASE_URL + this.API_SITE + "all"
    );
  }

I get this error

Type 'Observable' is not assignable to type 'Observable | ((...args: any[]) => Observable)'. Type 'Observable' is not assignable to type 'Observable'. Property 'type' is missing in type '{}' but required in type 'Action'.ts(2322)

I know that effect should always return an Action in last ngrx but I don't know how to do this in thy case

Also, Commenting out createEffect(() => this works, but this is not ok solution.

Before this update, I use the "OLD" @ngrx method for action/reducer and effect and everything works ok, now I want to convert everything on the last version rules...

Answer 1

Issue is within map function:

  map((users: SponsorModel[]) => new actions.LoadSponsorsSuccess(users))

Since version 8, NgRx is using ActionCreators instead of classes. Action creators return functions, not classes, so you don't need to new up instances of actions. Change it to:

  map((users: SponsorModel[]) => actions.LoadSponsorsSuccess(users))

I've written a blog post on how NgRx Action Creators work. It provides information on internal building blocks of action creators.