How to subscribe to action success callback using ngrx and effects

Question

I'm trying to do a simple thing - after some object has been saved (using an http request) I want to return to the list of routes. The problem is this: how to subscribe to an action of success (or maybe a reducer or an effect?)

here is my action 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 use 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)); 

Gearbox:

 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 the 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 the help

Answer 1

You can also subscribe to actions in the components:

 @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 minor changes, since with ngrx 4 there is no longer a Dispatcher , but instead an 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 will give you the last post

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

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

See app example in this example https://github.com/ngrx/example-app

Answer 4

It would be better if you also add the reducer function code and show how the saved mail affects your state, the savePOSTSuccess event.

In general, you can put an “editing” boolean property in your message state.

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

You can then add a selector to this property and show or hide the form according to this property.