NGRX action is dispatched but effect is not firing

Question

I'm having an issue where my NGRX effect isn't firing. Here are my actions, reducers, effects, and component code.

Here's the snippet of code from my effects, I've replaced the actual name of entities and services with just placeholders.

// entity.effects.ts
createEntity$: Observable<Action> = this.actions$.pipe(
  ofType<CreateEntity>(EntityActionTypes.CreateEntity),
  map(action => {
    console.log("here");
    return action.payload;
  }),
  mergeMap(data => {
    return this.service.createEntity(data).pipe(
      map(data => new CreateEntitySuccess(data)),
      catchError(error => of(new CreateEntityError(error)))
    );
  })
);

entity.actions.ts
import { Action } from "@ngrx/store";

export enum EntityActionTypes {
  CreateEntity = "[Entity API] Create Entity",
  CreateEntitySuccess = "[Entity] Create Entity Success",
  CreateEntityError = "[Entity] Create Entity Error"
}

export class CreateEntity implements Action {
  readonly type = CreateEntityActionTypes.CreateEntity;
  constructor(public payload: any) {}
}

// ... CreateEntitySuccess and CreateEntityError are defined here...

export type EntityActionsUnion =
  | CreateEntity
  | CreateEntitySuccess
  | CreateEntityError;

Essentially, I have a container that on form submit dispatches an the CreateEntity action. However, I don't see the console.log() I've written into the effect. Furthermore, I have another effect for loading making a request for all entities from a REST API on LoadEntities which is working. The effect to create a new entity however is not, I don't even think it's firing.

I am also not receiving any errors. Here is the code that dispatches my action:

import * as EntityActions from '../actions/entity.actions.ts
createBuilding() {
  const data = this.form.value;
  const image = this.fileUploadComponent.file;
  const payload = {
    data,
    image
  };
  this.store.dispatch(new EntityActions.CreateEntity(payload));
}

I have Redux dev-tools and i see the dispatch firing and the new state of loading: true being returned. However, the effect is not firing, nor are my Success or Error dispatches for resolutions firing either. Any idea as to why this is happening?

Have you registered this effect in the EffectsModule in app module? — Gunner
have you decorated your effects method with @Effect()? that's what i usually miss :) — dee zg
@deezg thank you........ i guess after staring at the same code for so long i missed that part. — Daniel Park
@deezg if you submit that as the answer i'll gladly mark it up for you. — Daniel Park

dee zg dee zg · Accepted Answer · 2018-08-21T07:03:16

3

votes

have you decorated your effects method with @Effect()? that's what i usually miss :)

NGRX action is dispatched but effect is not firing

1 Answers