Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste :
web:javascript:rxjs

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:javascript:rxjs [2019/03/20 02:52] – [bufferCount] sgariepyweb:javascript:rxjs [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 2: Ligne 2:
  
 Référence : [[https://rxjs.dev|rxjs.dev]] Référence : [[https://rxjs.dev|rxjs.dev]]
 +
 +
 +
 +====== Reactive Programming ======
 +
 +  * [[http://reactivex.io|ReactiveX.io]]
 +  * RxJS est la version JavaScript
 +  * Observable Pattern
 +  * Asynchronous programming
 +
 +
 +<code javascript>
 +getDataFromLocalMemory()
 +    .skip(10)
 +    .take(5)
 +    .map({ s -> return s + " transformed" })
 +    .subscribe({ println "onNext => " + it })
 +</code>
 +
  
  
Ligne 14: Ligne 33:
  
 ====== Syntaxe ====== ====== Syntaxe ======
 +
  
 <code javascript> <code javascript>
Ligne 24: Ligne 44:
     );     );
 </code> </code>
 +
 +
 +====== Création d'observables ======
 +
 +
 +===== of =====
 +
 +
 +
 +===== interval =====
 +
 +
 +===== timer =====
 +
 +
 +
 +===== fromEvent =====
 +
 +
 +
 +===== empty =====
  
  
Ligne 67: Ligne 108:
 <newcolumn> <newcolumn>
  
-Résultat: 
  
 <code> <code>
Ligne 82: Ligne 122:
 ==== bufferCount ==== ==== bufferCount ====
  
-''BufferCount'' émet la séquence une fois le ''count'' atteint.  Le deuxième paramètre (optionnel) dit quand repartir une nouvelle séquence.+**BufferCount** émet la séquence une fois le ''bufferSize'' atteint.  Le deuxième paramètre ''startBufferEvery'' (optionnel) dit quand repartir une nouvelle séquence. 
 + 
 + 
 +<WRAP prewrap 600px> 
 +<code javascript> 
 +bufferCount<number>(bufferSize: number, startBufferEvery?: number) 
 +</code> 
 +</WRAP> 
 + 
  
 {{:web:javascript:buffercount.png?600|}} {{:web:javascript:buffercount.png?600|}}
 +
 +
 +<columns 100% 50% ->
 +**Code**
 +<newcolumn>
 +**Résultat**
 +</columns>
  
  
Ligne 98: Ligne 154:
  
 <newcolumn> <newcolumn>
- 
-Résultat: 
  
 <code> <code>
Ligne 122: Ligne 176:
  
 <newcolumn> <newcolumn>
- 
-Résultat: 
  
 <code> <code>
Ligne 134: Ligne 186:
  
 </columns> </columns>
 +
 +
 +
 +
 +====== RxJS spécifique à Angular/ngrx ======
 +
 +Les exemples sont prises dans le contexte d'une application Angular, mais devrait convenir à tout autre contexte Javascript.
 +
 +
 +===== Opérateurs =====
 +
 +
 +==== combineLatest ====
 +
 +<code javascript>
 +observable$.pipe(
 +  combineLatest(anotherObservable$),
 +  map(([obs1Result, obs2Result]) => {
 +    // do something with results.
 +  })
 +).subscribe();
 +</code>
 +
 +Différence avec withLatestFrom:
 +
 +  * ''A.withLatestFrom(B)'': Utiliser cet opérateur pour obtenir la valeur la plus récente de l'observable B quand A émet.  Cela va nous donner les deux valeurs dans un tableau ''[a, b]''.
 +  * ''A.combineLatest(B)'': Utiliser cet opérateur pour obtenir la valeur la plus récente de l'observable A et B chaque fois que A ou B émet.  Cela va nous donner les deux valeurs dans un tableau ''[a, b]''.
 +  * 
 +==== distinct ====
 +
 +Exemple de ''distinct()'' utilisé dans le contexte de NgRx.  Celui-ci permet d'envoyer une seule requête au lieu d'envoyer plusieurs requêtes successives (par exemple par plusieurs clics successifs).
 +
 +La signature du ''dictinct()'' est :
 +  * ''keySelector'': Fonction optionnelle pour dire sur quelle valeur faire un distinct.
 +  * ''flushes'': Observable optionnel qui permet de //flusher// le HashSet interne de l'opérateur. 
 +
 +
 +<code javascript>
 +@Effect()
 +requestNewPassword$: Observable<Action> = this.actions$.pipe(
 +  ofType<RequestResetPassword>(SomeActionTypes.REQUEST_PIZZA_FETCH),
 +  distinct(
 +    () => SomeActionTypes.REQUEST_PIZZA_FETCH,
 +    this.actions$.pipe(
 +      ofType<RequestResetPassword>(
 +        SomeActionTypes.REQUEST_PIZZA_SUCCESS,
 +        SomeActionTypes.REQUEST_PIZZA_ERROR,
 +        SomeActionTypes.REQUEST_PIZZA_RESET_STATE
 +      )
 +    )
 +  ),
 +  mergeMap(action =>
 +    // Call to service for request.
 +  )
 +);
 +</code>
 +
 +==== flatMap ====
 +
 +Permet de faire comme les ''.then()'' avec les promesses, c'est-à-dire faire séquentiellement les opérations.
 +
 +<code javascript>
 +    this.someService.isReady()
 +      .pipe(
 +        takeUntil(this.destroyed$),
 +        filter(isReady => isReady),
 +        flatMap(() => this.catService.getCat(1)),
 +        flatMap(cat => this.foodService.getFood(cat)),
 +        tap(food => (this.food = food))
 +      )
 +      .subscribe();
 +</code>
 +
 +
 +
 +
  
 ====== Sources ====== ====== Sources ======
web/javascript/rxjs.1553046774.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)