Estoy tratando de hacer algo simple: después de que se guardó alguna entidad (usando la solicitud http), quiero volver a la ruta de la lista. El problema es: cómo suscribirse a la acción de éxito (¿o puede ser reductor o efecto?)
aquí está mi código de acciones:
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 }; }estoy usando efectos:
@Effect() savePost$ = this.update$ .ofType(PostActions.SAVE_POST) .map(action => action.payload) .switchMap(post => this.svc.savePost(post)) .map(post => this.postActions.savePOSTSuccess(post));reductor:
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; } } }en mi componente quiero suscribirme a la devolución de llamada exitosa:
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 }Gracias por la ayuda
También puede suscribirse a acciones en componentes:
[...] 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(); } }Basado en esto: https://netbasal.com/listening-for-actions-in-ngrx-store-a699206d2210 con algunas pequeñas modificaciones, ya que desde ngrx 4 ya no hay Dispatcher , sino ActionsSubject :
import { ActionsSubject } from '@ngrx/store'; import { ofType } from "@ngrx/effects"; subsc = new Subscription(); constructor(private actionsSubj: ActionsSubject, ....) { this.subsc = this.actionsSubj.pipe( ofType('SAVE_POST_SUCCESS') ).subscribe(data => { // do something... }); } ngOnDestroy() { this.subsc.unsubscribe(); }Por supuesto. Eso es posible. Considere este ejemplo de escuchar un contacto guardado.
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(); } } Aquí, he creado un ActionsSubject llamado actionsListener$ . En este ejemplo, estoy escuchando ContactActionTypes.SAVE_SUCCESS (una acción que ocurre cuando se guarda un contacto). Describe tu código en la sección de subscribe y no olvides destruir la suscripción.
Editar: Y así es como se ve la Acción:
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;