CODEWITHSUNDEEP
angularngrxngrx-storengrx-effects
Jamie Bohanna
Jamie Bohanna

Reputation: 560

NgRx Action Payload not hitting Effect - No Errors

I've checked every possible answer on SO and just can't seem to get this right.

I'm passing a payload into the action 'GetUser'.

I want this payload to be passed through the effect, and ultimately send via a http request to an API, however it seems my Effect isn't being hit at all. Nothing in console or ngrx dev tools at all.

My code looks fine, I get no compile errors - whats up?

Here's the Effect:

    @Injectable()
    export class LoginEffects {

      env = environment;

      constructor(private actions: Actions, private http: HttpClient, private store: Store<any>) {
      }

      @Effect()
      getUser$: Observable<Action> = this.actions.pipe(
        ofType<GetUser>(LoginActions.GET_USER),
        switchMap((action) => {

          console.warn(action.payload);
          console.warn(action.payload);
          console.warn(action.payload);

          return this.http.post(this.env.urlDefault + '/authenticate', action.payload).pipe(
              map((data) => new LoginActions.GetUserSuccess( data )),
              catchError(error => of(new LoginActions.GetUserFail( error ))));
          }));
    }

Here's the Action:

import { Action } from '@ngrx/store';

export const GET_USER = 'GET_USER';
export const GET_USER_FAIL = 'GET_USER_FAIL';
export const GET_USER_SUCCESS = 'GET_USER_SUCCESS';

export class GetUser implements Action {
  readonly type = GET_USER;

  constructor(public payload: any) {
    console.log('GetUser Action Hit!');
  }
}

export class GetUserFail implements Action {
  readonly type = GET_USER_FAIL;

  constructor(public payload: any) {
    console.log('GetUserFail Action Hit!');
  }
}

export class GetUserSuccess implements Action {
  readonly type = GET_USER_SUCCESS;

  constructor(public payload: object) {
    console.log('GetUserSuccess Action Hit!');
  }
}

export type LoginActions = GetUser | GetUserFail | GetUserSuccess;

Upvotes: 0

Views: 106

Answers (1)

George Chernov
George Chernov

Reputation: 268

Have you registered the effect in the module? Add the following line into your module import section

@NgModule({
  imports: [
    ...
    EffectsModule.forRoot([AppEffects])
  ],
   ...
})

Upvotes: 1

Related Questions