Je crois que je n'ai pas compris les observables

Bonjour,

J'ai un problème de compréhension des observables ou, du moins j'ai l'impression d'avoir une mauvaise approche.

J'ai souvent tendance à dupliquer des observables mais est ce que c'est une bonne chose. ex :

Code:

---

1 2 3

taille$ = this.monFluxDeTableau$.pipe( map(date => data.length))

---

Ou je devrai plutôt faire cela :

Code:

---

1 2 3 4

let taille:number; this.monFluxDeTableau$.pipe( tap(date =>taille = data.length))

---

Si une fonction d'un service renvoie un observable, est ce que si j'appelle plusieurs fois cette fonction, ce serai le même observable ? dans ce cas je risque d'avoir des problème de multisubscription.

Que se passe-t-il si je souscrit plusieurs fois au même observable ?

Merci d'avance pour vos éclaircissement

Que se passe-t-il si je fais cela

Code:

---

1 2 3 4 5

ngOnInit(): void { this.monFlux$.pipe( switchMap(data => this.service.getNvFlux(data))); }

---

Et qu'ensuite ma variable monFlux$ est utilisé avec le pipe async ?

Merci d'avoir pour vos éclaircissements.

(1)

Code:

---

1 2 3 4 5 6

obs1$ = of(10);   obs1$.subscribe(console.log); // 10 obs1$.subscribe(console.log); // 10 obs1$.subscribe(console.log); // 10

---

donc l'observable est disons "re exécuté" à chaque souscription

(2)
si tu veux conserver la dernière valeur de l'observable sans "re-exécuter" une action il faut utiliser un observable spéciale, les "sujets" : subject
RxJS dispose tout un tas d'observables spéciaux pour manipuler des flux de données.

Code:

---

1 2 3 4 5 6 7 8

subject1$ = new BehaviorSubject<number>(10); // on applique une action juste pour voir si un traitement est effectué ou pas subject1$.pipe(map(v => v*10));   $subject1$.subscribe(console.log); // 100 exécute et le résultat du pipe est mis en mémoire dans le BehaviorSubject, envoi le résultat $subject1$.subscribe(console.log); // 100 envoi la valeur en mémoire $subject1$.subscribe(console.log); // 100 envoi la valeur en mémoire

---

(3)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

this.monFlux$ .pipe( switchMap(data'ici c'est les données qui provient de monFlux$' => this.service.getNvFlux(data)) // on retourne un nouveau observable avec le résultat de : this.service.getNvFlux(data) ); } * SI monFlux$ est un BehaviorSubject alors : this.monFlux$.subscribe(console.log); // exécute le tout this.monFlux$.subscribe(console.log); // valeur en mémoire * SI monFlux$ n'est pas un BehaviorSubject par exemple un simple Subject alors : this.monFlux$.subscribe(console.log); // exécute le tout this.monFlux$.subscribe(console.log); // exécute le tout

---

switchMap récupère les données du 1er observable, on peut s'en servir pour effectuer un traitement et ensuite switchMap renvoi un autre observable avec le résultat du traitement
donc quand on s'abonne, on s'abonne en réalité au 2eme observable du switchMap

conclusion:
comme tu peux le constater les différents "subjects" disposent disons de "pouvoirs" différents, il faut jouer entre eux pour faire ce que l'on souhaite.

Je dirais qu'en général, la plupart du temps on utilise ces sujets : BehaviorSubject, switchMap, CombineLast
et les opérateurs du pipe : map, filter, tap


remarque:
toujours avoir à l'esprit que RxJs permet de gérer des flux de données.
les exemples que j'ai écrit plus haut c'est un flux de données mais juste avec une donnée (il n'y a pas d'autre données qui arrivent par la suite dans le temps)
0 ou 1 donnée est considéré aussi comme un flux !


exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

subject1$ = new BehaviorSubject<number>(10); // on applique une action juste pour voir si un traitement est effectué ou pas subject1$.pipe(map(v => v*10));   $subject1$.subscribe(console.log); // 100 exécute et le résultat du pipe est mis en mémoire dans le BehaviorSubject, envoi le résultat $subject1$.subscribe(console.log); // 100 envoi la valeur en mémoire $subject1$.subscribe(console.log); // 100 envoi la valeur en mémoire   subject1$ .next(5); // donc émission d'une nouvelle valeur dans le temps   $subject1$.subscribe(console.log); // 50 exécute et le résultat du pipe est mis en mémoire dans le BehaviorSubject, envoi le résultat $subject1$.subscribe(console.log); // 50 envoi la valeur en mémoire $subject1$.subscribe(console.log); // 50 envoi la valeur en mémoire

---

remarque 2:
après le but ce n'est pas de souscrire à la chaine au même endroit !
on est dans un composant, on s'abonne à l'observable une fois :
$subject1$.subscribe(console.log);
et à chaque nouvelle donnée qui arrive (flux), on exécute le code à l'intérieur du subscribe


donc on s'abonne à l'observable uniquement dans les composants qui en ont besoin

Merci pour ta réponse,

Pour le point (1) et (2); l'exemple avec of() correspond à un observable synchrone. Mais est ce que le résultat est le même sur un résultat asynchrone, comme une clique de bouton avec fromEvent.

Si je fais :

Code:

---

1 2 3 4 5 6

subject1$ = new BehaviorSubject<number>(10);   get observable1$():Observable<...> { get subject1$.asObservable() }

---

Est ce j'aurai bien chaque observable qui réémet la dernier valeur de subject à chaque subject1$.next ?

Bon du coup je m'apperçoit j'avais bien compris, j'ai cherché mon erreur ailleurs grâce à ta réponse et il semble que ca marcher pas à cause d'un filter [] qui renvoyait rien et qui lançait une erreur sur mon stream sur le map suivant pour donnée manquante, du coup l'observable s'arretait.

Pour la question sur les bonnes pratiques entre tout observable ou non je vais faire un nouveau topic.

Citation:

---

Pour le point (1) et (2); l'exemple avec of() correspond à un observable synchrone. Mais est ce que le résultat est le même sur un résultat asynchrone, comme une clique de bouton avec fromEvent.

---

oui c'est pareil, qu'il envoit une valeur ou differentes valeur dans le temps, cela ne change rien.

Code:

---

1 2 3 4 5

subject1$ = new BehaviorSubject<number>(10); get observable1$():Observable<...> { return subject1$.asObservable() }

---

tous les endroits ou tu t'abonnes à subject1$ recevrons la dernière valeur en temps réel.
et les endroits ou tu viens juste de t'abonner à subject1$ tu recevras la dernière valeur émise (car c'est un BehaviorSubject)


* en Angular, on fait c'est les choses suivantes :

• on crée un service: todo.service dans celui-ci on met todo$ = new BehaviorSubject ...
• tous les composants qui ont besoin de recevoir les valeurs de todo$ :
  
  • demande l'instance du service : todo-service
  • s'abonne à : this.todo-service.todo$.subscribe(v => console.log(v));

ainsi quand n'importe quel composant émet une valeur dans le temps, plus tard ou tout de suite avec : this.todo-service.todo$.next(523); tous les composants qui se sont abonnés reçoivent : 523

et si plus tard, un composant qui n'était pas présent à l'ecran, pour une raison, s'affiche par exemple un changement de page, donc le composant s'initialise (constructor, ngOnInit) et s'abonne à : this.todo-service.todo$.subscribe(v => console.log(v)); recevra donc la dernière valeur : 523