Home > database >  Why my action isn't dispatched by effect?
Why my action isn't dispatched by effect?

Time:09-28

I have one component for saving and editing object. The button 'save' calls exactly the same action during saving and editing. While editing everything is ok, but during saving the action isn't dispatched. The app goes into the dispatching line in the component but it's all - the effect isn't called. Anyone has got any idea?

the method in the component - the same method for saving and editing, but saving went to the line with 'dispatch' but it was all, editing calls the action from exactly the same line... This action is dispatched in the redux devtool in both cases.

  save() {
    if (this.formRoot.valid) {
      const formValue = this.formRoot.getRawValue();
      this.deviceFacade.dispatch(DeviceActions.saveDevice({ formValue }));
    } else {
      this.formRoot.markAllAsTouched();
    }
  }

CodePudding user response:

If you can see the action in the devtools it probably means that your effect isn't registered. Verify that the effect class is added to a module with EffectsModule.forRoot([]) or EffectsModule.forFeature([]). If you're using EffectsModule.forFeature, double-check if the Angular module is loaded.

CodePudding user response:

It could be due to the actions having same actionType, consider following:

export const saveDevice = createAction('[DEVICE] Device', props<{payload: DeviceModel}>());
export const updateDevice= createAction('[DEVICE] Device', props<{payload: number}>());
export const deleteDevice= createAction('[DEVICE] Device', props<{payload: number}>());

As you can see from my example code above the string passed in to the createAction function is all the same but they need to be distinct for ngrx to understand which action you are talking about. So in that case you want to change it to following:

export const saveDevice = createAction('[DEVICE] Save Device', props<{payload: DeviceModel}>());
export const updateDevice= createAction('[DEVICE] Update Device', props<{payload: number}>());
export const deleteDevice= createAction('[DEVICE] Delete Device', props<{payload: number}>());

So if you could share your file with actions that would be helpful.

I also noted that you use:

this.deviceFacade.dispatch(DeviceActions.saveDevice({ formValue }));

And that maybe fine, but i usually do:

// Dont know if deviceFacade is alias for the injected Store
this.store.dispatch(saveDevice({ formValue }));

//Or in a older project we did use new :
this.deviceFacade.dispatch(new saveDevice({ formValue }));
  • Related