NgRx Store Actions TS2339: Property 'foo' does not exist on type 'ActionCreator ...

TS2339: Property 'foo' does not exist on type 'ActionCreator {foo: string } & TypedAction >'

If you have been facing this error in your strongly typed app, while creating effects here is the answer!

Use ActionType<T>

Action:

export const LoadAllFooAction = createAction(FooTypes.LoadAll , props<{ foo: string[] }>());

Effect:

loadFoo$ = createEffect(() => {
        return this.actions$.pipe(
            ofType(FooTypes.LoadAll),
            concatMap((action: ActionType<typeof LoadAllFooAction >) =>
                this.fooLoaderService.get(action.foo).pipe(
                    map((data) => ({ type: FooTypes.LoadAllSuccess, foo: data})),
                    catchError(() => EMPTY),
                ),
            ),
        );
    });