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 may be reducer or effect?)

here is my actions code:

static SAVE_POST = '[POST] Save POST';
savePOST(Post): Action {
    return {
        type: PostActions.SAVE_POST,
        payload: Post
    };
}

static SAVE_POST_SUCCESS = '[POST] Save POST Success';
savePOSTSuccess(Post): Action {
    console.log('action: savePostSuccess')
    return {
        type: PostActions.SAVE_POST_SUCCESS,
        payload:Post
    };
}

i'm using Effects:

   @Effect() savePost$ = this.update$
    .ofType(PostActions.SAVE_POST)
    .map(action => action.payload)
    .switchMap(post => this.svc.savePost(post))
    .map(post => this.postActions.savePOSTSuccess(post));

reducer:

const initialState: PostListState = [];

export default function (state = initialState, action: Action): PostListState {
    switch (action.type) {
        case PostActions.LOAD_POST_SUCCESS: {
            return action.payload;
        }
        case PostActions.SAVE_POST_SUCCESS: {
            console.log('SavePOST SUCCESS',action.payload)
            let index = _.findIndex(state, {_id: action.payload._id});
            if (index >= 0) {
                return [
                    ...state.slice(0, index),
                    action.payload,
                    ...state.slice(index + 1)
                ];
            }
            return state;
        }
        default: {
            return state;
        }
    }
}

in my component i want to subscribe to success callback:

   handlePostUpdated($event) {
     this.post = this.code;
     let _post: Post = Object.assign({}, { _id: this.id, name: this.name, text: this.post });
     this.store.dispatch(this.postActions.savePOST(_post)); //not have "subscribe" method

  }

Thanks for Help

Answer 1

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$
            .ofType(PostActions.SAVE_POST_SUCCESS)
            .takeUntil(this.destroyed$)
            .do(() => /* hooray, success, show notification alert ect.. */)
            .subscribe();
    }

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

Answer 2

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';

subsc = new Subcription();

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

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

Answer 3

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 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.