ngrx-angularfire setup issues

Question

I am on Angular 7 and keep getting the following error:

Error:(22, 51) TS2339: Property 'ofType' does not exist on type 'Actions'.

whilst following this tutorial: https://angularfirebase.com/lessons/ngrx-with-firebase-auth-google-oauth-login/.

Has the support for this functionality changed?

  @Effect()
  googleSignIn: Observable<Action> = this.actions.ofType(authActions.GOOGLE_LOGIN)
    .map((action: authActions.GoogleLogin) => action.payload)
    .switchMap(payload => {
      return Observable.fromPromise(this.authService.googleSignIn());
    })
    .catch(err => {
      return Observable.of(new authActions.AuthError({ error: err.message }));
    });

Update

I've updated the code to as follows:

  @Effect()
  googleSignIn: Observable<Action> = this.actions.pipe(
    ofType(authActions.GoogleSignIn),
    map((action: authActions.GoogleSignIn) => action.payload),
    switchMap(payload => {
      return Observable.fromPromise(this.authService.googleSignIn());
    }),
    catchError(err => {
      return Observable.of(new authActions.AuthError({ error: err.message }));
    }),
  );

Which fixed the error above, but now I get this message:

src/app/modules/auth/auth.effects.ts(20,12): error TS2345: Argument of type 'type
of GoogleSignIn' is not assignable to parameter of type 'string | ActionCreator<s
tring, FunctionWithParametersType<any[], object>>'.
  Type 'typeof GoogleSignIn' is not assignable to type 'ActionCreator<string, Fun
ctionWithParametersType<any[], object>>'.
    Type 'typeof GoogleSignIn' is not assignable to type 'FunctionWithParametersT
ype<any[], object>'.
      Type 'typeof GoogleSignIn' provides no match for the signature '(...args: any[]): object'.

Contents of auth.reducer.ts:

import { User } from '../shared/models/user';
import * as authActions from './auth.actions';

const defaultUser = new User(null, 'GUEST');

export type Action = authActions.All;

export function authReducer(state: User = defaultUser, action: Action) {
  switch (action.type) {
    case authActions.GET_USER:
      return { ...state };

    case authActions.AUTHENTICATED:
      return { ...state, ...action.payload };

    case authActions.NOT_AUTHENTICATED:
      return { ...state, ...defaultUser};

    case authActions.GOOGLE_SIGNIN:
      return { ...state, loading: true };

    case authActions.AUTH_ERROR:
      return { ...state, ...action.payload, loading: false };

    case authActions.LOGOUT:
      return { ...state, loading: true };
  }
}

Answer 1

Since RxJs 6.x you should write something like this:

@Effect()
  googleSignIn: Observable<Action> = this.actions.pipe( 
    ofType(authActions.GOOGLE_LOGIN),
    map((action: authActions.GoogleLogin) => action.payload),
    switchMap(payload => {
      return Observable.fromPromise(this.authService.googleSignIn());
    }),
    catchError(err => {
      return Observable.of(new authActions.AuthError({ error: err.message }));
    }),
  );