2017-07-31 1 views
0

J'expérimente en créant un effet qui retarde un indicateur de chargement afin qu'il ne clignote pas ou scintille chaque fois que je récupère des données de l'API. C'est probablement un cas de ne pas savoir quoi chercher, car je suis sûr que je ne peux pas être la seule personne qui veut donner à l'API 300-500 ms pour répondre avant de lancer un tel indicateur sur l'écran.Création d'un délai d'indication de chargement avec @ ngrx/effects

@Effect() startDelayTimer: Observable<Action> = this.actions$ 
    .ofType(uiActions.START_LOADING_DELAY_TIMER) 
    .switchMap(action => Observable 
     .timer(300) 
     .mapTo(new uiActions.LoadingDelayTimerCompleteAction)); 

Y a-t-il quelque chose qui va perturber cet effet? J'enregistre toutes mes paires action/état sur la console et START_LOADING_DELAY_TIMER est appelé, mais l'achèvement ne l'est jamais.

Modifier

Cette question a été posée prématurément, parce que le problème que j'avais fini par être sans rapport. Voici la mise en œuvre finale au cas où quelqu'un d'autre trouvailles cette question:

@Effect() startDelayTimer: Observable<Action> = this.actions$ 
    .ofType(uiActions.START_LOADING_DELAY_TIMER) 
    .switchMap(action => Observable 
     .timer(5000) 
     .takeUntil(this.actions$.ofType(uiActions.CANCEL_LOADING_DELAY_TIMER)) 
     .mapTo(new uiActions.LoadingDelayTimerCompleteAction) 
) 
  • Démarrer une minuterie pour retarder l'indicateur de chargement clignote
  • Si un CancelLoadingDelayTimerAction est distribué (probablement de l'achèvement de la récupération de données à partir d'une API) , arrêtez la minuterie et n'affichez pas l'indicateur de chargement.
  • Si le temporisateur se termine avant que CancelLoadingDelayTimerAction soit distribué, affichez l'indicateur de chargement.

Répondre

1

Au lieu de .timer(300), utilisez .delay(300). Ceci devrait régler votre problème.

Le temporisateur émet des nombres sur un intervalle donné, ce qui provoquera probablement un comportement étrange avec vos effets. Le délai limite simplement le flux pour une durée donnée, ce que je pense être ce que vous demandez.

+0

Merci pour votre commentaire. Malheureusement, mes problèmes étaient causés par [un problème complètement indépendant] (https://github.com/ngrx/effects/issues/132) – wolfhoundjesse

+0

En outre, j'utilise 'Observable.timer()' pour faciliter l'annulation. Ce n'est pas évident à partir du code ci-dessus, donc je vais mettre à jour pour en faire une question plus utile pour les autres. – wolfhoundjesse