web-dev-qa-db-fra.com

comment s'abonner au rappel de réussite de l'action à l'aide de ngrx et des effets

J'essaie de faire une chose simple - après qu'une entité ait été enregistrée (en utilisant la requête http), je veux revenir à la liste des itinéraires. Le problème est: comment souscrire à une action réussie (ou peut être réducteur ou effet?)

voici mon code d'actions:

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

j'utilise des effets:

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

réducteur:

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

dans mon composant, je veux m'abonner au succès de rappel:

   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

  }

Merci pour l'aide

angularngrx
18
happyZZR1400

Vous pouvez également vous abonner aux actions dans les composants:

[...]
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();
    }
}
42
olsn

Basé sur ceci: https://netbasal.com/listening-for-actions-in-ngrx-store-a699206d221 avec quelques petites modifications, car depuis ngrx 4 il n'y a pas de Dispatcher plus, mais à la place 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();
}
26
AJT82

vous devez avoir un sélecteur qui vous donne le dernier message

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

alors vous pouvez vous abonner à this.latestPost$ observable et redirigez vers votre nouvelle route en supposant que vous avez déclaré latestPost$: Observable<Post>; dans votre composant.

pour plus de détails, voir cet exemple d'application https://github.com/ngrx/example-app

2
Kuncevič

Ce sera mieux si vous ajoutez également votre code de fonction de réducteur et montrez comment la publication enregistrée affecte votre état, sur l'action savePOSTSuccess.

En général, vous pouvez mettre une propriété booléenne "d'édition" dans votre état de publication.

Sur le réducteur, vous pouvez définir une valeur d'indicateur à! État d'édition en définissant la propriété sur false.

Ensuite, vous pouvez ajouter un sélecteur sur cette propriété et afficher ou masquer le formulaire en fonction de cette propriété.

1
Ran