how to subscribe to action success callback using ngrx and effects

Question

I\'m trying to do simple thing - after some entity saved (using http request) I want to navigate back to list route. The problem is : how to subscribe to success action (or

Answer 1

Angular, Angular... Yet another plugin to be included each time you need something different... :)

But in the given case, seems like it's possible to do that without effects. The same approach as mentioned by @kuncevic-dev

this.store.select(state => state.CompanyLicencesState).pipe(takeUntil(this.destroy)).subscribe((state: CompanyLicences.State) => {
  ...
});
this.store.dispatch(new GetCompanyLicences(filter)).pipe(finalize(() => (this.companyLicencsLoading = false)), takeUntil(this.destroy)).subscribe(() => {
  ...
});

Will do the work.

Answer 2

you need to have a selector that give you the latest post

this.latestPost$ = this.store.select(fromRoot.getPost);

then you can subscribe to this.latestPost$ observable and redirect to your new route assuming you have declared latestPost$: Observable<Post>; in your component.

for more details see this example app https://github.com/ngrx/example-app

Answer 3

You can subscribe to actions in components as well:

[...]
import { Actions } from '@ngrx/effects';
[...]

@Component(...)
class SomeComponent implements OnDestroy {
    destroyed$ = new Subject<boolean>();

    constructor(updates$: Actions) {
        updates$.pipe(
           ofType(PostActions.SAVE_POST_SUCCESS),
           takeUntil(this.destroyed$)
        )
        .subscribe(() => {
           /* hooray, success, show notification alert etc.. */
        });
    }

    ngOnDestroy() {
        this.destroyed$.next(true);
        this.destroyed$.complete();
    }
}

Answer 4

It will be better if you also add your reducer function code and show how the saved post affects your state, on savePOSTSuccess action.

In general, you may put an "editing" boolean property in your post state.

On the reducer, you can set a flag value to !editing state by setting the property to false.

Then, you may add a selector on that property and show or hide the form according to this property.

Answer 5

Based on this:https://netbasal.com/listening-for-actions-in-ngrx-store-a699206d2210 with some small modifications, as since ngrx 4 there is no Dispatcher anymore, but instead ActionsSubject:

import { ActionsSubject } from '@ngrx/store';
import { ofType } from "@ngrx/effects";

subsc = new Subscription();

constructor(private actionsSubj: ActionsSubject, ....) { 
  this.subsc = actionsSubject.pipe(
     ofType('SAVE_POST_SUCCESS')
  ).subscribe(data => {
     // do something...
  });
}

ngOnDestroy() {
  this.subsc.unsubscribe();
}

Answer 6

Sure. That's possible. Please consider this example of listening for a saved contact.

export class PageContactComponent implements OnInit, OnDestroy {

  destroy$ = new Subject<boolean>();
    
  constructor(private actionsListener$: ActionsSubject) {}

  ngOnInit() {
    this.actionsListener$
      .pipe(ofType(ContactActionTypes.SAVE_SUCCESS))
      .pipe(takeUntil(this.destroy$))
      .subscribe((data: any) => {
        // Do your stuff here
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Here, I have created an ActionsSubject named actionsListener$. In this example I am listening to ContactActionTypes.SAVE_SUCCESS (an action that happens when a contact has been saved). Describe your code in the subscribe section and don't forget to destroy the subscription.

Edit: And here is what the Action looks like:

export enum ContactActionTypes {
  SAVE_SUCCESS = "[Contact] Save Success",
}

export class ActionContactSaveSuccess implements Action {
  readonly type = ContactActionTypes.SAVE_SUCCESS;

  constructor(readonly payload: { contact: any }) {}
}

export type ContactActions = ActionContactSaveSuccess;