javascriptangularngrxmean-stack

ngrx error "Module '"@ngrx/effects"' has no exported member 'Effect'"


I trying to implement an effect in ngRx. I import ted "Effect" from "@ngrx/effects", but It showing the error "Module '"@ngrx/effects"' has no exported member 'Effect'.ts(2305)"

 import { Actions, ofType, Effect } from "@ngrx/effects";
 import { switchMap } from "rxjs/operators";

 import * as AuthActions from './auth.actions';

 type loginResponse = { token: string, message: string, loggedIn: boolean, time: number };

 export class AuthEffects {
    @Effect
    login = this.actions$.pipe(
        ofType(AuthActions.LOGIN),
        switchMap((authData: AuthActions.Login) => {
            return this.http
                .post<loginResponse>(
                    'http://localhost:3000/user/signup',
                    { 
                       email: authData.payload.email, 
                       password: authData.payload.password 
                    }
                )
        })
    )
    constructor(private actions$: Actions, private http: HttpClient) { }
}

I'm trying to implement a login system using an effect in ngRx. I imported "Effect" from "@ngrx/effects", but It showing the error "Module '"@ngrx/effects"' has no exported member 'Effect'.ts(2305)"


Solution

  • It looks like you are trying to use the @Effect from the @ngrx/effects library, but the error message you shared showing that there is no exported member named Effect in the @ngrx/effects module.

    i think it's because of this error is that you are using an older version of the @ngrx/effects library. In version 8 the Effect decorator was modified to createEffect function.

    it will look something like this:

    import { Actions, ofType, createEffect } from '@ngrx/effects';
    import { switchMap } from 'rxjs/operators';
    import { AuthActions } from './auth.actions';
    
    type loginResponse = { token: string, message: string, loggedIn: boolean, time: number };
    
    export class AuthEffects {
      login$ = createEffect(() =>
        this.actions$.pipe(
          ofType(AuthActions.LOGIN),
          switchMap((authData: AuthActions.Login) => {
            return this.http
              .post<loginResponse>(
                'http://localhost:3000/user/signup',
                { 
                  email: authData.payload.email, 
                  password: authData.payload.password 
                }
              )
          })
        )
      );
    
      constructor(private actions$: Actions, private http: HttpClient) {}
    }