web-dev-qa-db-fra.com

A quoi sert pipe dans rxJS

Je pense avoir le concept de base, mais il y a quelques obscurités

Donc, en général, voici comment j'utilise un observable:

observable.subscribe(x => {

})

Si je veux filtrer les données, je peux utiliser ceci:

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

Je peux aussi faire ça:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

Donc mes questions sont:

  1. Quelle est la différence?
  2. S'il n'y a pas de différence, pourquoi la fonction pipe existe?
  3. Pourquoi ces fonctions nécessitent des importations différentes?
angularrxjsrxjs5
59
enno.void

Les opérateurs "pipable" (ancien "lettable") sont la méthode actuelle et recommandée d'utilisation des opérateurs depuis RxJS 5.5.

Je vous recommande fortement de lire la documentation officielle https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

La principale différence est qu’il est plus facile de créer des opérateurs personnalisés et qu’il est préférable de traiter les objets sans modifier un objet global Observable susceptible de provoquer des conflits si deux parties différentes voulaient créer un opérateur du même nom.

L'utilisation d'une instruction import distincte pour chaque opérateur 'rxjs/add/operator/first' était un moyen de créer des ensembles d'applications plus petits. En n'important que les opérateurs dont vous avez besoin au lieu de la totalité de la bibliothèque RxJS, vous pouvez réduire considérablement la taille totale de l'ensemble. Cependant, le compilateur ne peut pas savoir si vous avez importé 'rxjs/add/operator/first' parce que vous en avez vraiment besoin dans votre code ou si vous avez simplement oublié de le supprimer lors du refactoring de votre code. C'est l'un des avantages d'utiliser des opérateurs pouvant être raccordés où les importations non utilisées sont automatiquement ignorées.

51
martin

La méthode du tuya

Tout cela a l'air cool mais c'est toujours très prolixe. Eh bien, grâce à RxJS 5.5, les observables disposent maintenant d’une méthode de canal disponible sur les instances, ce qui vous permet de nettoyer le code ci-dessus en appelant canal avec tous nos opérateurs de fonctions pures:

Qu'est-ce que ça veut dire?

Cela signifie que tous les opérateurs que vous avez précédemment utilisés sur l'instance de observable sont disponibles sous forme de fonctions pures sous rxjs/operators. Il est donc très facile de créer une composition d’opérateurs ou de réutiliser des opérateurs, sans avoir à recourir à toutes sortes de gymnastique de programmation où vous devez créer un observable personnalisé prolongeant Observable, puis écraser l’ascenseur pour créer votre propre objet personnalisé.

const { Observable } = require('rxjs/Rx')
const { filter, map, reduce,  } = require('rxjs/operators')
const { pipe } = require('rxjs/Rx')

const filterOutEvens = filter(x => x % 2)
const doubleBy = x => map(value => value * x);
const sum = reduce((acc, next) => acc + next, 0);
const source$ = Observable.range(0, 10)

source$.pipe(
  filterOutEvens, 
  doubleBy(2), 
  sum)
  .subscribe(console.log); // 50
3
ORBIT

Voici un bon résumé:

Il sépare les opérations de streaming (carte, filtre, réduction ...) de la fonctionnalité principale (abonnement, canalisation). En canalisant les opérations au lieu de les enchaîner, cela ne pollue pas le prototype d'Observable, ce qui facilite les secousses.

Voir https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#why

Les problèmes avec les opérateurs corrigés pour le chaînage sont les suivants:

Toute bibliothèque qui importe un opérateur de correctif augmentera le prototype Observable. pour tous les consommateurs de cette bibliothèque, créant ainsi des dépendances aveugles. Si la bibliothèque supprime leur utilisation, ils cassent inconsciemment tout le monde. Avec les pipeables, vous devez importer les opérateurs dont vous avez besoin dans chaque fichier dans lequel vous les utilisez.

Les opérateurs corrigés directement sur le prototype ne sont pas "agaçables" par des outils tels que le rollup ou le webpack. Les opérateurs pipeables seront comme il s’agit simplement de fonctions extraites directement des modules.

Les opérateurs non utilisés importés dans les applications ne peuvent pas être détectés de manière fiable par aucun type d’outil de construction ou de règle de protection. Cela signifie que vous pouvez importer une analyse, mais ne plus l'utiliser et l'ajouter à votre paquet de sortie. Avec les opérateurs raccordables, si vous ne l'utilisez pas, une règle de la charpie peut le récupérer pour vous.

La composition fonctionnelle est géniale. Construire vos propres opérateurs personnalisés devient beaucoup plus facile, et maintenant ils fonctionnent et ressemblent à tous les autres opérateurs de rxjs. Vous n'avez plus besoin d'étendre Observable ou de passer outre l'ascenseur.

0
Juan Mendes