ngrx - comment effectuer une opération une fois qu'une action distribuée a correctement mis à jour le magasin?

Question

J'essaye d'implémenter une action d'annulation dans mon application d'Angular où j'emploie @ngrx/store. Ce que je veux être en mesure de faire est d'envoyer l'action UNDO, puis une fois l'action traitée, les données ont été mises à jour par le réducteur et envoyées dans le magasin, je veux faire quelque chose avec ces données mises à jour.

Voici comment j'essaie de le faire. Fondamentalement, parce que les enregistrements $ proviennent d'un BehaviorSubject, je vais d'abord obtenir une valeur sur subscribe. Ensuite, j'expédie l'action et j'attends que la mise à jour arrive. Il doit y avoir un meilleur moyen, non?

undoRecords() { 
    let count = 1; 
    // The records$ observable comes from the ngrx store 
    let obs = this.records$.take(2).subscribe(records => { 
     if(count == 1) { 
      this.store.dispatch({type: UNDO_RECORDS, payload: undefined}); // this will change the records 
      count++; 
     } 
     else { 
      this.someService.doSomething(records); 
     } 
    }); 
} 

Answer 1

Ce que je fais habituellement est d'avoir trois actions: ACTION, ACTION_SUCCESS, ACTION_ERROR. ACTION déclenche l'action réelle, ainsi que changer le statut en mémoire (inprogress = true) si vous souhaitez suivre la progression. ACTION_SUCCESS, met le statut 'inprogress' à faux.

Et mettre à jour les données réelles.

Vous pouvez surveiller l'état en cours et vous saurez quand la tâche est terminée.

Answer 2

Utilisez le paquetage npm ngrx-undo.

npm install --save ngrx-undo 

dans votre AppModule:

import {handleUndo, configureBufferSize} from 'ngrx-undo'; 

// if you want to update the buffer (which defaults to 100) 
configureBufferSize(150); 

@NgModule({ 
    imports: [ 
     // pass the handleUndo in the metaReducers 
     StoreModule.provideStore(rootReducer, {metaReducers: [handleUndo]}) 
    ] 
}) 
export class AppModule { } 

Pour annuler une action, utilisez simplement le créateur d'action undo.

import {undo} from "ngrx-undo"; 

// create an action 
let action = {type: REMOVE_WINE, payload: {id: wine.id}}; 

// dispatch it 
this.store.dispatch(action); 

// undo the action 
this.store.dispatch(undo(action)); 

Regardez here.