Maîtriser RxJS 6 sans effort

1. Introduction du cours: Salut, Maurice ici. Bienvenue dans cette classe sur le mastering RXJS 6 sans casser une sueur. Alors, qu'allons-nous jeter un oeil dans ce cours ? Eh bien, nous allons commencer par quel problème RxJS essaie de résoudre et ensuite nous allons jeter un oeil à RxJS et programmation réactive et comment cela essaie réellement de résoudre le problème. Nous allons jeter un oeil aux observables, un des principaux blocs de construction de RxJS. Nous allons jeter un oeil à ce qu'ils sont, différentes façons de les créer, créer vos propres observables personnalisés, utiliser des sujets qui sont une façon de créer des observables et nous allons examiner la différence entre chaud et froid observables. Bien sûr, nous allons nous pencher sur les opérateurs. Sans opérateurs, RXJS ne serait pas si utile. Nous allons donc jeter un oeil à l'objectif des opérateurs, comment nous pouvons les visualiser en utilisant RxJS Marbles. Nous allons jeter un oeil à la plupart des opérateurs existants, pas tous, ils sont beaucoup trop nombreux, et nous allons jeter un oeil à la construction d'opérateurs personnalisés pour RxJS. Nous allons jeter un oeil à la gestion des erreurs et à la façon dont vous pourriez potentiellement réessayer des opérations défaillantes et, bien sûr, nous allons jeter un oeil à l'unité de test de vos observables et de vos opérateurs. Enfin, nous allons jeter un oeil à un certain nombre de scénarios différents où RXJS pourrait avoir beaucoup de sens. Des choses comme la récupération périodique d'une requête à partir du Web, gestion des erreurs en cas d'échec d'une requête, réessayer, et des choses comme ça. se voit dans la vidéo suivante. 2. Introduction personnelle: Salut Maurice ici, et bienvenue revenir à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons faire une brève introduction personnelle, que vous sachiez qui je suis. Je m'appelle Maurice de Beijer, et je suis développeur et formateur indépendant de logiciels. Je vis aux Pays-Bas, bel endroit, surtout au printemps, avec beaucoup de belles fleurs comme ces tulipes. Il y a de belles plages, ici Scheveningen, et nous avons notre magnifique moulin à vent, spécialement au coucher du soleil comme celui-ci. Toutes ces photos ont été prises à moins de 20 kilomètres de l'endroit où j'habite. Je suis aussi heureux d'être marié avec une femme et un fils. Je suis développeur de logiciels indépendant et instructeur depuis 1995. En fait, mes jours de développement remontent plus loin que cela, mais c'est à ce moment que je suis devenu indépendant, donc il y a quelque temps. La plupart des professionnels les plus précieux de Microsoft, un MVP, un prix annuel que j'ai reçu 14 fois de suite maintenant. Je publie une Newsletter React si vous êtes intéressé par les développements React. Voir les notes pour un lien. On se voit dans la prochaine vidéo. 3. Le problème: Salut, Maurice ici. Bienvenue à ce cours sur Master RXJS 6 Sans Breaking a Sweat. Quel est le problème avec le code traditionnel ? Plongons dans un code, et jetons un coup d'oeil. J' ai un petit exemple d'application ici avec quelques boutons. La plupart d'entre eux ne font rien encore, seul le bouton Effacer le fait. Jetons un coup d'oeil aux codes. Nous allons faire à peu près la même action avec quelques éléments différents ici. On va commencer par quelques chiffres. Nous allons ajouter un écouteur d'événement au bouton. Ensuite, nous allons transformer les nombres en une forme différente. Nous allons les filtrer, et nous allons mettre les résultats à l'écran. Première règle, utilisez l'opérateur de carte sur un tableau pour passer d'un nombre à un objet avec une propriété x, qui contient le nombre. Ensuite, nous allons utiliser l'opérateur de filtre sur un tableau pour renvoyer uniquement les objets qui ont une valeur x qui est inférieure à sept. Cela devrait retourner un nouveau tableau. On appellera ça des données. Maintenant, mettons ça à l'écran pour que nous puissions voir le résultat. Il y a le tableau d'objets résultant avec une valeur. Assez simple. Faisons la même chose en utilisant un intervalle temporel. Encore une fois, nous allons ajouter un gestionnaire de clics au bouton d'intervalle. Cette fois, je vais en fait utiliser les fonctions de flèche grasse parce qu'elles sont plus courtes. Pas d'avantage technique ici, juste un peu plus court. Nous allons commencer un intervalle fixe, et nous tirons à chaque seconde. À l'intérieur, nous voulons incrémenter un nombre, donc nous devons enregistrer cela en dehors de cette fonction d'intervalle afin que nous puissions l'incrémenter et nous rappeler la valeur. Nous aurons besoin d'un tableau pour pousser les nombres. abord, nous allons créer un nouvel objet avec la propriété x contenant le nombre. Encore une fois, comme avant, nous allons incrémenter le nombre. Bien sûr, nous devons filtrer. Filtrons le nombre étant plus petit que sept. Bien sûr, nous voulons nous assurer que notre intervalle s'arrête sinon, il continuera à fonctionner indéfiniment. Sauvegardons la poignée et utilisons un intervalle clair pour l'arrêter à nouveau. Nous devons toujours afficher les résultats à l'écran. Bien sûr, nous devons toujours pousser l'objet dans le tableau. Maintenant, si je clique sur le bouton Intervalle, nous devrions voir les nombres apparaître un à chaque seconde. Ils sont là. Objets dont les nombres sont inférieurs à sept. Nous atteignons le même objectif, mais la marche est tout à fait différente. Jetons un coup d'oeil à la requête Ajax. Je vais aller à l'URL au point de terminaison de l'API Ajax, et cela va retourner une blague, et nous allons utiliser la longueur de la blague comme numéro. Nous commencerons par la demande de récupération. Récupère l'URL. Ensuite, nous devons résoudre à utiliser un gestionnaire vers le bas qui nous donnera la réponse. Je vais garder les choses simples. Nous allons juste supposer que tout fonctionne et je vais appeler une fonction json sans vérifier. Cela devrait nous donner les données. Les données auront une valeur, qui aura la blague. On va prendre la longueur de la blague. Une fois que nous avons l'objet, nous devons toujours filtrer et le mettre à l'écran s'il passe le filtre. Je vais en fait utiliser une valeur de 75 ici parce que la plupart des blagues seront plus longues que sept caractères, probablement chacun d'entre eux. Voyons si le bouton de demande Ajax fonctionne. Nous voyons une blague de 40 caractères de long et un 73 et un autre 54. Mais parfois, quand je clique sur l'interface utilisateur, il ne se met pas à jour, parce que nous aurons une blague qui fait plus de 75 caractères. Nous avons vu trois styles de codage différents. Nous avons fait une approche fonctionnelle avec le tableau. Nous avons fait une approche asynchrone avec le fetch, et nous avons également fait une autre approche asynchrone en utilisant l'intervalle défini. Ils sont tous très différents, des API complètement différentes. Habituellement, c'est un mélange de codes fonctionnels et de codes impératifs. Mais tout cela est lié aux événements, comme nous attendons notre clic sur le bouton, puis faisons quelque chose, et c'est toutes des API très différentes. Rendez-vous dans la prochaine vidéo lorsque nous verrons comment RxJS simplifiera cela en une seule API. 4. La solution: Salut, Maurice ici. Bienvenue à ce cours pour Master RXJS 6 sans casser la sueur. Dans cette vidéo, nous allons jeter un oeil au code que nous avons fait dans une vidéo précédente, mais ensuite le rendre plus simple et plus concis, en utilisant RXJS. Plongons dans le code. La première chose que nous devons faire est d'installer RXJS, nous allons faire un NPM-installer RXJS. C' est RXJS installé. Redémarrez l'application et commencez à utiliser RXJS. Ici, nous avons l'application. Donc, la première chose que nous devons faire, est d'importer du code de RXJS. Commençons par le tableau. Pour le tableau, nous avons un ensemble statique de données, donc nous devons importer la fonction from à partir de RCS. Cela nous permettra de transformer un tableau statique de données en un observable. Allons et tapons chèvre dans le gestionnaire d'événements. Je commence à travailler sur le charbon de faux dans le tableau de nombres, ce qui tourne qu'il n'a pas réglé observable et ensuite nous obtenons la valeur perdant à la fonction d'abonnement. Abonnons-nous et ajoutons le gestionnaire, qui sera appelé pour nos données. Ici, nous allons juste afficher les données, alors que va-t-il se passer ? Cela va transformer chaque numéro individuel en un événement. Le contenu du texte sur le résultat sera mis à jour dix fois et nous verrons le dernier élément. Là, nous voyons que 10 est affiché. Nous voulons être en mesure de manipuler les données entre la création de votre observable dans l'abonnement. Nous pouvons le faire en appelant la fonction de tuyau et en mettant en pause les opérateurs RxJS dans ce tuyau. Nous allons importer des opérateurs. Le premier opérateur va importer est de mapper parce que nous voulons changer le numéro en un objet avec un X. Nous appelons la carte à l'intérieur de la fonction pipe, et nous prenons le nombre qui entre et nous le transformons en un objet avec une propriété X, comme nous l'avions avant. Nous voyons que nous obtenons un objet avec la valeur perdue de 10. Nous devons toujours transformer cela en un tableau avec toute la valeur et le filtre. Nous allons utiliser le filtre et l'opérateur de scan pour le faire. Nous allons les importer. Retournez au tuyau après le mappage dans le tuyau fera pour filtrer. Tout comme avant nous filtrons sur la propriété x étant plus petite que sept. Ensuite, nous allons utiliser un opérateur d'analyse pour transformer des éléments individuels en une collection d'éléments, va transformer sont les événements séparés en un tableau d'événements. L' analysé obtient deux paramètres, la valeur précédente dans la valeur actuelle émise. Donc, le précédent sera un tableau, donc nous allons juste retourner un nouveau tableau en concaténant la valeur actuelle à lui. Nous allons lui dire de commencer par un tableau vide. Là, nous l'avons. Un tableau avec des nombres de zéro à six, tout plus petit que sept. Faisons la même chose avec l'intervalle, va importer une nouvelle fonction de RxJS pour commencer un intervalle qui est intervalle d'or, facile. Nous allons remplacer le corps du gestionnaire de clic de bouton d'intervalle pour utiliser la fonction d'intervalle de RxJS. Encore une fois déclenchera un événement toutes les secondes. Copions tout le code d'en bas, le tuyau entier avec l'opérateur. Là, nous voyons l'intervalle de tir, en imprimant tous les nombres de zéro à six dans les objets. Maintenant, dans ce cas, l'intervalle ne s'arrête pas encore. Il continue à tirer, mais il n'émettra plus d'événements. On va réparer ça dans une autre vidéo. Allons et faisons la même largeur, la requête AJAX. Nous allons importer les objets AJAX à partir de RXJS/AJAX. Nous allons l'utiliser pour obtenir le Json de l'API Chuck Norris. En utilisant Ajax.getJSON, nous obtenons un observable avec la requête AJAX ou une réponse, je devrais dire, qui viendra dans le code existant. Encore une fois, je vais copier le code que nous avions avant. Maintenant, le résultat est légèrement différent, donc je dois faire une autre fonction de carte, essentiellement mappée liée à deux blagues à dévaluer. Dans ce cas, juste avoir la longueur est assez bon parce que je le mappe déjà à un objet sur la ligne ci-dessous. Changeons la valeur du filtre de 70-75 car il y a très peu de blagues, voire aucune, qui sont moins de sept caractères. Là, nous voyons la requête AJAX travailler. Les trois événements sont faits avec à peu près le même code. Juste à la requête AJAX est légèrement différent en raison des données et de la longueur du filtre. Mais à part ça, c'est identique. Tout est une question de fonctions vraiment, vraiment simples. Mais nous pouvons réellement aller plus loin, car le gestionnaire d'événements sur les boutons peut également être observables. Changeons l'événement de la firme de réglage. Nous pouvons transformer les événements DOM en observable. Nous passons dans le fond, et nous passons dans les événements. Nous sommes intéressés par l'événement click dans ce cas, nous avons un flux observable sur les clics, nous pouvons diriger, c'est un utilisant un autre opérateur pour changer de carte. Nous pouvons réellement transformer cela en un flux d'événements différent. Nous passons d'un flux d'événements à un autre flux d'événements, qui mappent les événements de clic d'origine aux événements AJAX. Il y a un événement AJAX est toujours en cours de déclenchement. Faisons la même chose pour l'intervalle et le bouton tableau de nombres. L' intervalle fonctionne, permet d'effacer, de redémarrer et nous verrons le tableau fonctionne aussi bien. Nous utilisons juste une API pour les événements DOM, pour récupérer des données asynchrones, pour travailler avec un intervalle et travailler avec un tableau statique de données, ce qui je pense est vraiment soigné. Il suffit d'apprendre une API et vous êtes prêt à partir. Nous avons donc vu qu'ArcGIS crée des observables qui produisent des événements au fil du temps. Un événement de clic, des événements de récupération, terminé, un événement d'intervalle, quelque chose comme ça. Les événements peuvent se déclencher aussi souvent qu'ils le souhaitent. Vous pourriez avoir un observable avec zéro événements, vous pourriez en avoir un avec des centaines d'événements. Nous avons vu des opérateurs où nous pouvons manipuler ces événements, chaînes et modifier des événements ou filtrer des événements ou de nouvelles choses avec eux. Vous voyez que ces opérateurs sont très concentrés, ils font une tâche qui le fait bien. Cela signifie que nous avons des fonctions très simples qui sont faciles à tester et faciles à combiner en quelque chose de plus complexe. Nous avons vu que nous pouvons commencer avec une seule chaîne, un événement de clic, puis transformer cela en une série d'autres événements, ce qui est vraiment agréable. se voit dans la vidéo suivante. 5. Tirer le meilleur parti de ce cours: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons brièvement parler de la façon dont vous pouvez tirer le meilleur parti de ce cours. Il y a beaucoup de vidéos, et une façon de commencer est de les regarder du début à la fin. Pas de problème, tu peux le faire si tu veux. Mais si vous êtes plus intéressé par des cas d'utilisation spécifiques pour RXJS, vous pouvez commencer par la section scénario. Là, je décrit plusieurs cas d'utilisation comme une application de recherche incrémentielle ou de dessin, et vous pouvez les regarder et décider des vidéos qui vous intéressent. Ensuite, vous pouvez basculer vers des opérateurs spécifiques. Encore une fois, vous utilisez peut-être déjà RXJS, sorte que vous pourriez être intéressé par des opérateurs spécifiques ou des façons spécifiques de créer des observables. Vous pouvez directement accéder à ces vidéos. De toute façon, vous pouvez obtenir beaucoup d'informations à partir de ces vidéos. Maintenant, je vais écrire beaucoup de codes. Chaque fois que vous voyez ce mec popup, ce n'est pas moi, mais j'utilise cette diapositive, alors je vais écrire beaucoup d'exemples de code. Tout cet exemple de code est sur GitHub. Si vous voulez l'utiliser, et je recommande fortement de le faire, allez sur GitHub et clonez-le à partir de là. Il s'agit du référentiel Explore. Mon nom d'utilisateur GitHub est Mauricedb, et le dépôt est appelé master-rxjs-6-without-breaking-a-sweat. Si vous voulez cloner ceci, faites défiler un peu vers le bas, cliquez sur « Clone or Download ». Si vous êtes un utilisateur Git, suffit de copier l'URL ici. Si ce n'est pas le cas, allez à Télécharger ZIP et téléchargez le code de cette façon. Je vais juste copier l'URL. Dans la fenêtre de la console, je vais le cloner, git cloner et coller dans l'URL et appuyer sur « Entrée ». Cela télécharge rapidement le référentiel complet dans un nouveau dossier. Maintenant, si je cd dans ce dossier, si vous exécutez maintenant npm install, il installera tous les paquets npm requis, sorte que vous pouvez réellement exécuter tout le code. Maintenant, il y a un mauvais avertissement de sécurité là-bas. Ne vous inquiétez pas pour ça. Ce n'est pas de RXJS, c'est en fait les résultats d'un paquet de nombre premier que j'utilise, et cela a une dépendance de cotes qui provoque l'erreur. Si vous n'utilisez pas cela, en utilisant simplement RXJS ou Partial que j'utilise pour compiler et regrouper tout le code, cela va très bien, vous ne verrez pas la même erreur. Nous y sommes. Nous allons jeter un oeil au code dans un instant. Maintenant, si vous rencontrez des problèmes avec le cours ou les exemples, vérifier le code source est à peu près une première. Comparez votre code à mon code et peut-être que vous repérez une différence. Si vous avez besoin d'en savoir plus sur l'un des opérateurs ou des façons de créer des observables, la documentation RxJS est également assez bonne. Ceci est le site web de RxJS, à rxjs.dev. C' est plutôt sympa, et la section de référence est assez bonne. Vous pouvez voir tous les différents opérateurs RXJS et façons de créer des observables ici, ou avec un joli filtre. Le site reactivex.io est également assez soigné. Il contient plus d'informations. Si je vais ici aux opérateurs, vous pouvez voir beaucoup d'informations sur les opérateurs. Une chose qui est vraiment agréable est l'arbre de décision pour décider quel opérateur ou fonction pour créer un nouvel observable que vous voulez réellement. Pas seulement sur RXJS, mais sur toute la famille ReactiveX, mais fortement recommandé. Bien sûr, vous pouvez poser des questions dans la section Q&R et je vais y répondre. Mais peut-être pas seulement moi. Je vous recommande vivement de répondre à nos questions. Ce n'est pas parce que je ne veux pas y répondre, mais penser à une réponse est en fait un excellent outil d'apprentissage. L' une des raisons pour lesquelles j'ai commencé à enseigner le développement logiciel était parce que je voulais en savoir plus à ce sujet. La meilleure façon de vous assurer de connaître plupart des choses sur la technologie si vous pouvez l'expliquer aux autres. Maintenant, je vous recommande fortement de pratiquer tout le code. Regarder des vidéos est soigné, mais le coder est en fait une façon, beaucoup mieux de l'apprendre, alors codez les choses. J' ai créé un petit modèle de démarrage. Si j'ouvre le projet en utilisant Visual Studio Code, mon éditeur de choix, vous pouvez voir beaucoup de dossiers ici pour tous les différents projets. Ce n'est pas encore là, mais je l'ajouterai avant que ce cours ne soit mis en ligne. Il y aura un dossier appelé 000-template. C' est la plaque de la chaudière que j'utilise pour tout ça. Il y a un petit bouton Démarrer. Il y a des choses les plus importantes sur le travail avec partial-js là-dedans. C' est un excellent point de départ. Si vous voulez exécuter ceci, vous avez réellement besoin d'installer Node et NPM. J' ai Node installé. La façon dont je peux vérifier est d'exécuter les nœuds dash version avec un seul V. Ensuite, vous pouvez voir que je suis au nœud 8.12, qui est en fait légèrement obsolète, mais c'est très bien. Ça marchera très bien. Si vous avez besoin d'installer des nœuds, allez sur le site Web Node.js et ici vous pouvez télécharger la dernière version. Je recommande d'utiliser la version LTS, la version de support à long terme, qui est généralement la meilleure. Vous voyez que je suis un peu dépassée, mais ce n'est pas un problème. Maintenant, généralement lorsque vous installez Node, vous obtenez NPM gratuitement. Il y a quelques distributions où vous ne le faites pas, mais normalement cela est inclus. Vous pouvez vérifier en exécutant npm dash version, et vous pouvez voir que je suis à NPM 6.4.1. Les deux sont nécessaires pour faire fonctionner les choses. Vous avez également besoin d'un navigateur. Tous les exemples s'exécutent dans un navigateur. J' utilise Chrome, mais un autre navigateur moderne raisonnable comme Safari, Firefox, Arch, ils vont tous bien fonctionner. C'est vraiment à vous de choisir. Vous aurez besoin d'un éditeur de code. J' utilise Visual Studio Code, mais c'est vraiment à vous de choisir. Vous voulez utiliser Sublime, Notepad plus, Visual Studio, WebStorm, ça n'a vraiment pas d'importance. Visual Studio Code est vraiment génial, il est donc fortement recommandé. Mais tous les autres fonctionneront aussi. Maintenant, tous les échantillons sont dans des dossiers numérotés. Fondamentalement, les 100 dossiers sont l'intro. La série 200 est axée sur la création d'observables. La série 300 est centrée sur les opérateurs et la série 400 est axée sur différents scénarios. Vous pouvez les exécuter tous de la même manière. Fondamentalement, bien d'écrire le numéro pour ce qui vous intéresse. Supposons que nous voulions exécuter la recherche incrémentielle, c'est le dossier 403. Ce que nous faisons, c'est que nous faisons un départ de course npm : 403. Cela démarre un petit serveur web et compile cet exemple et le rend prêt à fonctionner dans le navigateur. Dans le navigateur, vous pouvez l'ouvrir sur localhost port 1234. Nous voyons un paquet partiel de l'application et démarrer un serveur au port localhost 1234. Copions ça. Une fois que c'est fait, nous pouvons aller au navigateur, ouvrir un nouvel onglet, aller au port localhost 1234, et nous voyons l'application. Maintenant, cela va réellement rechercher les utilisateurs de GitHub. Si je recherche Maurice, je vois mon propre utilisateur comme le second, tous les exemples fonctionnent de la même manière. Dans certains cas, vous devrez ouvrir les outils de développement car les instructions console.log sont utilisées pour produire des choses dans les outils de développement, et la plupart des cas, vous verrez beaucoup de sortie dans cet écran normal également. Si vous commencez à éditer des choses, partielle est vraiment sympa. Si vous faites un petit changement, partiel recompilera automatiquement les codes et mettra à jour le navigateur, donc pas besoin d'appuyer sur « F5" dans le navigateur la plupart du temps. D' habitude, ça marche juste. Parfois, si vous avez déjà eu une erreur de syntaxe, partielle peut ne pas être en mesure d'actualiser le navigateur, il peut être cassé. Mais généralement, cela fonctionnera automatiquement. se voit dans la vidéo suivante. 6. Blocs de construction RxJS: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons parler des principaux blocs de construction de RXJS. Ici, nous avons un joli diagramme avec les principaux blocs de construction. J' ai en fait pris cela du site Web ReactiveX, ce qui est assez soigné à jeter un oeil. Voici le site Web de ReactiveX et si vous allez à Docs Observables, vous y trouverez le même diagramme. Ce site est cool car il a beaucoup de documentation, va le visiter à nouveau plus tard. Mais il nous montrera aussi toutes les différentes langues. Il y en a pas mal ici. Mais si vous cliquez sur Autres, vous verrez la liste plus longue. Connaître RXJS se traduira bien dans d'autres langues, ce qui est toujours agréable avec la technologie. Mais plus sur ce diagramme. En haut, vous voyez une chronologie une chronologie observable. Les petites formes qui s'y ajoutent sont des événements émis au fil du temps. La petite ligne à la fin est l'observable étant fermé. Après cela, plus aucun événement ne sera émis. Le flip ici est un opérateur. Les opérateurs ont la chance d'opérer sur tous les événements émis. Dans ce cas, il suffit de les retourner. Un observable est une collection ou zéro ou plusieurs événements au fil du temps. Les observables peuvent être ouverts ou fermés. Tant qu'ils sont ouverts, ils peuvent émettre des événements, mais se demandent de fermer, ils ne peuvent plus le faire, et ils peuvent être proches en raison de la fermeture réussie ou d'une erreur. Ce sont les sites RxJS Marbles, qui est un site vraiment agréable pour voir comment les choses fonctionnent. En fait, clonez-le et je vais l'utiliser pour démo certains des exemples. Ici, nous avons la chronologie. Voici une chronologie vide. Aucun événement n'est émis. Mais à une petite barre verticale à droite, vous pouvez voir où le temps s'arrête et l'observable est proche. Voici un intervalle. Probablement la quintessence observable, il émet un événement de temps en temps, dans ce cas, toutes les 20 millisecondes. Maintenant, la petite ligne à l'avant suggère que c'est la fin la plus proche, mais ce n'est pas le cas, ça continue à durer éternellement. observables ne sont qu'une longue série d'événements au fil du temps. Les observables ne seraient pas très bons si personne ne les observe. Nous avons un observateur et l'observé s'abonne à un observable et est informé de tous les événements émis. Il peut faire ce qu'on veut. Dans l'exemple que je vais faire, je vais juste les afficher. Nous avons aussi des opérateurs. Les opérateurs sont la chose qui rend vraiment RXJS intéressant. Les opérateurs peuvent tout faire. Comme ici, j'ai l'opérateur de filtre qui filtre les anciennes valeurs. Il n'emprunte pas zéro, deux ou quatre parce qu'ils sont égaux, il passe juste un et trois aux cibles observables. Dans ce cas, nous voyons que la source et la cible observables, celle en haut et en bas ont la même durée de vie. Un autre opérateur est prendre trois. Il prend juste les trois premiers événements émis à partir de la source observable émet ceux sur la cible observable et quand il a trouvé trois événements, il se ferme. La source émet 0, 1, 2, 3 et 4, mais sur la cible nous avons seulement 0, 1, 2 et l'observable est fermé. Les opérateurs sont généralement très simples, fonctions pures, ce qui les rend faciles à écrire. Le vrai pouvoir vient de les combiner. Combinez beaucoup d'opérateurs différents pour obtenir l'effet désiré. Lorsque nous souscrivons à un observable, nous obtenons un objet d'abonnement. Parfois, vous n'en avez pas besoin, mais l'abonnement peut être utile si vous voulez vous désabonner à un observable. désinscription empêchera l'observable d'émettre d'autres événements. Plongons dans quelques codes. Maintenant, vous vous demandez peut-être pourquoi je n'utilise pas ces billes Rx, que je viens de montrer pour démontrer le code. La raison en est que c'est basé sur RXJS 5, et vous pouvez voir les codes. Voici la syntaxe RXJS 6, un peu différente. Nous nous concentrons sur RxJS 6. On n'utilisera pas les billes Rx pour démontrer. Je vais juste utiliser un projet personnalisé comme celui-ci. La première chose que nous devons faire est d'importer à partir de RxJS. La chose que nous devons importer dans ce cas est l'intervalle parce que je vais utiliser l'observable par quintessence, émettant un événement toutes les secondes. Nous allons définir la variable de flux pour contenir tous les événements observables et une convention. La convention de dénomination souvent utilisée est de postfixer des variables contenant des flux observables avec un dollar. Vous n'avez pas à le faire, mais ça montre ce que c'est. Stream dollar est notre flux observable émettant un événement toutes les secondes. Nous avons besoin d'un observateur pour écouter ce flux. L' observateur que je vais utiliser est un objet qui a une fonction suivante et cette fonction suivante sera code avec chaque événement émis. Dans ce cas, c'est une fonction normale et E est l'événement émis. Je vais juste l'afficher dans un petit élément div. En utilisant le flux, je peux abonner éventuellement l'observateur et cela me retournera un objet d'abonnement, que je peux utiliser pour me désinscrire plus tard si je le voulais. Si j'appuie sur le bouton de démarrage, il activera l'intervalle observable et là, nous voyons le deuxième tic-passe. Ajoutons un opérateur. Encore une fois, nous utilisons une importation, mais cette fois nous utilisons une importation des opérateurs RxJS. Les opérateurs sont importés à partir d'une partie légèrement différente du paquet. Nous allons importer le filtre et l'opérateur de prise pour obtenir le même effet que celui que j'ai eu dans le diagramme de marbre Rx. La grande différence avec RxJS 6 est l'opérateur de tuyau utilisé pour les filtres avec RxJS 5 qui n'existaient pas encore. J' utilise le tuyau et spécifie le premier opérateur là, le filtre. Avec RxJS 6, vous utilisez la fonction pipe pour passer les opérateurs. Dans ce cas, je vais passer l' opérateur de filtre et filtrer toutes les valeurs paires. Maintenant, si j'appuie sur start, je vais voir 0, 2, 4, etc. Je peux combiner les opérateurs spécifiés pour prendre l'opérateur que je veux seulement prendre les trois premières valeurs. Si j'appuie sur Start, je vais voir 0, 2, 4. Mais alors l'opérateur démarre alors et il est le plus proche du flux et aucune valeur ne sera émise. Plutôt belle façon. Maintenant, l'ordre des opérateurs est important. Ils fonctionnent sur le flux dans l'ordre où ils sont définis. Si je mets une prise en premier, il va prendre le flux original émettant 0, 1, 2, 3, 4 et etc. Il ne va prendre que trois valeurs de leur 0, 1, 2. Celui est déposé par le filtre pair et nous ne voyons que zéro et deux. Maintenant, désactivons de prendre un moment pour qu'il continue à émettre des valeurs, et nous pouvons voir l'effet de la désinscription. Nous utiliserons l'abonnement et après cinq secondes, j'appellerai la fonction de désabonnement doit arrêter l'abonnement. Maintenant, quand j'appuie sur Démarrer, nous verrons 0, 2 et 4 événements et plus parce que nous avons désabonné. Les principaux blocs de construction de RXJS, observables, observateurs, abonnements, opérateurs, et la fonction de tuyau pour transmettre les opérateurs. se voit dans la vidéo suivante. 7. Observables utilisant le(): Salut, Maurice ici. Bienvenue à ce cours sur Mastering RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à la fonction de pour créer de nouveaux observables avec un ensemble fixe de valeurs. Of () est vraiment simple, il prend un certain nombre de valeurs, zéro ou plus, et il va créer un observable et émettre immédiatement toutes ces valeurs sur l'observable. Ensuite, il fermera automatiquement l'observable. Jetons un coup d'oeil au code. RxJS diagramme de billes pour un observable qui émet juste un. Vous pouvez voir qu'il émet la valeur un et il se ferme immédiatement. Pour ce faire, nous devons importer hors de RXJS, sorte que cela créera un nouvel observable. Nous allons définir une nouvelle variable de chaîne et l'assigner au résultat du classement de avec les valeurs 1, 2, 4. Ensuite, je vais m'y abonner, je vais juste utiliser une fonction simple. Je vais vous expliquer plus sur les différentes façons de m'abonner dans une autre vidéo. Définissons simplement le contenu du texte des éléments de résultat. Si je clique sur Démarrer, nous voyons la valeur quatre, en fait toutes les valeurs ont été émises, mais c'est difficile à voir car elles sont émises immédiatement, donc nous ne voyons que la dernière. Maintenant, ajoutons le console.log afin que nous puissions voir que toutes les valeurs ont été émises. Ils sont là, ils apparaissent dans le journal, et si je clique à nouveau, ils sont imprimés la deuxième fois. Maintenant, nous allons imprimer juste avant de nous abonner et juste après nous nous abonner. Nous pouvons voir que c'est tout ce que vous voyez même synchrone. Nous écrivons comme du code asynchrone, mais il s'exécute vraiment de façon synchrone en ce moment. Voir nous obtenons avant de nous abonner et après souscrire et entre nous arrivons aux valeurs émises. Le of () est une fonction vraiment simple pour créer des observables. Il synchrone, il émet juste toutes les valeurs et il se ferme. Rendez-vous dans la prochaine vidéo, lorsque nous examinerons d'autres façons de créer des observables. 8. Observations utilisant EMPT, NE et throwError(): Salut. Ici Maurice. Bienvenue à ce cours sur Master RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons brièvement jeter un oeil à trois façons spéciales de créer des observables. Vous n'allez pas utiliser cela dans le code de production beaucoup. Ils sont principalement utilisés pour les tests et d'autres cas spéciaux. Le premier est la fonction rationnelle Empty. Il crée un observable, qui est vide. Il n'émet jamais rien, et il se ferme immédiatement. Si vous créez un observable en utilisant la fonction of sans paramètre, c'est en fait la même chose que d'utiliser vide. Si nous regardons le site Web de ReactiveX, nous pouvons voir vide. Il crée juste un observable. Nous pouvons voir la ligne horizontale vide avec la petite ligne verticale à droite. Il se ferme immédiatement, rien ne se passe jamais là. Le prochain à jeter un oeil est Jamais. C' est encore plus simple. Il ouvre un observable. Il n'émet jamais rien, mais il ne se ferme pas, il ne fait même pas ça. À cet égard, c'est encore plus simple. Ça ne ressemble jamais à ça. Nous avons vu une chronologie horizontale vide, mais pas même la ligne de fermeture à la fin. La dernière façon de créer un observable que je veux rapidement jeter un oeil est ThrowError. Les deux premiers étaient en fait des constantes. ThrowError est spécial qu'il crée une chaîne observable et qu'il émet une erreur tout de suite. L' erreur de chaîne s'enferme. Aucun événement n'est vraiment émis sur le flux non plus. On dirait ça. Nous avons vu une chronologie vide, mais au lieu de la petite ligne verticale pour indiquer qu'elle se ferme, nous voyons à travers, c'est l'indication qu'elle se ferme avec une erreur, mais pas d'autres événements, rien. Le vide et ne sont jamais en fait des constantes. Ils sont aussi des fonctions là pour les créer, mais ils sont obsolètes. En règle générale, vous utilisez la constante pour créer une nouvelle chaîne. Le ThrowError est une fonction. Il faut des objets d'erreur, tous les trois créent juste un observable vide. Le vide dans le ThrowError le ferme immédiatement. Le premier succès, l'erreur de perte, et puis ne fait jamais rien. Ceux-ci sont utiles pour tester les opérateurs et d'autres choses, et dans certains cas, pour combiner des chaînes. Rendez-vous dans la prochaine vidéo lorsque je vais utiliser ces opérateurs pour vous montrer comment configurer abonnements et voir les différents événements comme la fermeture, erreur et l'émission se produisent. On se voit là-bas. 9. Créer des abonnements: Bienvenue à ce cours sur, Maîtriser RxJS6 Sans Briser Une Sueur. Dans cette vidéo, nous allons examiner de plus près les abonnements. En utilisant la fonction d'abonnement, nous avons mis en place un abonnement, mais c'est en fait une fonction surchargée et nous allons examiner différentes façons de lui transmettre des paramètres. Il est également important de se rendre compte que l'abonnement active généralement un observable. La plupart des observables ne font rien tant que vous n'avez pas appelé subscribe, et comme nous l'avons vu avant qu'ils ne retournent un objet d'abonnement. Les problèmes d'abonnement se désabonnent lorsque nous ne sommes plus intéressés par l'abonnement. En plus d'utiliser subscribe, il existe une autre façon d'obtenir toutes les valeurs d'un observable. Vous pouvez utiliser la fonction ForEach. Il va essentiellement s'abonner sous le capot et boucle sur tous les éléments, mais jetons un oeil au code. Ici, nous avons quelques flux observables différents. Le flux de données avec les nombres 1-4, un flux vide, un flux jamais et un flux d'erreur. Avec le flux de données, toutes les valeurs sont omises comme avant, et nous ne voyons que la dernière. Mais si nous utilisons une chaîne vide, rien n'est soumis du tout, nous ne voyons rien. Mettons à jour à l'abonnement un peu. Il s'avère que cette variante de l'abonnement prend un certain nombre de rappels différents. Le premier est pour le moment où une valeur est soumise. La deuxième fonction de rappel est utilisée lorsqu'une erreur est détectée. Rappelez-vous que l'erreur ferme également la chaîne. Imprimons le fait qu'une erreur s'est produite, et le troisième rappel est pour lorsque la chaîne observable se ferme. Ne passera pas de données, mais nous pouvons imprimer le fait que l'observable a terminé, et maintenant si nous utilisons pour vider observable, nous pouvons voir que nous sommes terminés. Si nous utilisons des données, les valeurs sont émises, mais nous ne les voyons plus, c'est terminé. Mais ajoutons un console.log afin que nous puissions réellement voir les valeurs émises. Maintenant, nous voyons les valeurs 1-4 émises dans la console à droite. Complete ne s'affiche que dans l'interface utilisateur. Si nous utilisons l'observable vide, nous ne faisons que terminer, et avec le jamais observable, rien ne se passe du tout. Ce n'est pas terminé. Il n'émet jamais. Mais avec l'erreur observable, nous pouvons voir que le message d'erreur est imprimé. Quelque chose de mauvais arrive. Maintenant, afin de montrer qu'un observable ne fait généralement rien, s'il n'y a pas d'abonnement, je vais importer l'opérateur de robinet. L' opérateur tap est utile pour le débogage. Vous pouvez diriger tous les événements par tap et faire quelque chose comme dans ce cas, il suffit de les imprimer dans le console.log. Est destiné aux effets secondaires, pas pour les opérateurs normaux ou définit un filtre ou une carte ou quelque chose comme ça. Je vais juste imprimer tap avec la valeur réelle, et si j'appuie sur start, nous nous abonnons et nous voyons taper 1 et puis la valeur réelle un émise, et la même chose pour les autres valeurs dans le flux terminé, mais nous allons commenter à l'abonnement. Maintenant, si je clique sur Démarrer, nous créons toujours les données observables. On appelle toujours l'opérateur de robinet sauf qu'il n'est jamais exécuté. Il n'est exécuté qu'avec un abonnement, mais c'est une façon de créer un abonnement, mais il y en a une autre. Nous pouvons également utiliser l'opérateur ForEach, pour imprimer toutes les valeurs. L' objectif de dépôt en arrière est appelé pour chaque valeur émise et il renvoie une promesse, et dans ce cas, je ne vais gérer qu'un cas de succès. Lorsque la promesse se résout, l'observable est terminé, et là nous voyons exactement le même comportement sauf cette fois tout est imprimé sur la console. En plus d'utiliser la fonction d'abonnement avec trois fonctions comme paramètres. Nous pouvons également passer dans un objet observateur, but s'abonner avec l'observateur. Si je clique sur Démarrer, nous voyons toujours les sorties de robinet, sorte que l'abonnement a été activé. Non seulement observer pour l'objet, nous pouvons ajouter trois fonctions, ensuite appelé chaque fois que la valeur de temps a été émise erreur, qui est appelé chaque fois qu'une erreur se produit et se termine, qui est appelé lorsque l'observable se termine et c'est fait. Là, nous avons toujours le même comportement. Peu importe laquelle des deux méthodes d'abonnement devrait préférer, mais dans la plupart des cas, vous devriez toujours fournir des rappels pour les deux valeurs émises, des erreurs se produisant et assez souvent pour terminé aussi, mais faites veillez à toujours inclure le rappel d'erreur. Des erreurs peuvent se produire et vous devez en être conscient. Importons simplement la fonction de création d'intervalle. Pour créer un observable basé sur le temps émettra un événement toutes les secondes. Le non après cinq secondes, nous appelons le nouvel abonnement fonctionnel de désabonnement pour se désabonner de l'intervalle. Là, nous voyons la seconde, il s'arrête, mais après quatre, il s'arrête. Notez que nous n'obtenons pas un rappel complet, nous nous désabonnons. Ce n'était pas le flux d'événements se terminant, pas d'erreur, pas d'achèvement. Si nous faisons de même avec l'opérateur de prise, nous prenons simplement les trois premiers événements. Maintenant, les choses sont un peu différentes, mais seront conduites dans l'intervalle par l'opérateur de prise, en prenant les trois premiers événements et nous voyons 0, 1, 2 et puis il se termine réellement. Maintenant, c'est la fin observable avant de nous désabonner, donc nous obtenons le rappel complet. utilisation d'abonnement est le moyen préféré d'obtenir toutes les valeurs préférées à la surutilisation de ForEach vous donne plus de contrôle, plus de flexibilité, utilise trois fonctions différentes là-bas. Le suivant, l'erreur, et le complet aussi, si vous avez besoin à qui vérifie les signaux lorsque le flux est fermé de manière réussie. se voit dans la vidéo suivante. 10. Observables de l'événement DOM: Salut, je suis Reece. Bienvenue à ce cours sur la maîtrise de RXJS 6 Sans Breaking A Sweat. Donc, dans cette vidéo, nous allons jeter un bref coup d'oeil sur la façon de créer un observable événement forum. En utilisant des événements de forum, vous pouvez créer un observable à partir de n'importe quel événement DOM ou tout événement standard associé comme Node.js. EventEmitter, il existe également une ancienne fonction rationnelle de modèle de ventilation pour d'autres événements génériques qui ne sont pas encore pris en charge. Jetons un coup d'oeil au code. La première chose que nous devons faire est d'importer de l'événement et d'ignorer les lignes de code ci-dessous, il y a juste à propos de la mise à l'échelle avec un écran DPI élevé que j'ai. Donc, en utilisant FromEvent, je peux spécifier quels éléments de domaine, dans ce cas pour démarrer le bouton, quel événement je suis intéressé, l'événement click, puis je peux m'y abonner. Donc, dans ce cas, je vais juste fermer l'élément de résultat aux dettes de chaîne, « J'ai été cliqué ». Il est là, « on m'a cliqué ». Donc, en utilisant l'événement de formulaire, vous n'avez pas besoin de sélectionner un seul élément de domaine à la fois, vous pouvez sélectionner une collection entière. En utilisant le sélecteur de requête tout ce que j'ai sélectionné tous les boutons et en utilisant ce sélecteur, je peux simplement créer un observable pour tous d'entre eux. Je vais essentiellement définir les éléments de résultats le texte du bouton afin que nous puissions voir qu'il passe entre le début et l'arrêt. La zone bleue sur l'écran était de la toile. Alors jouons un peu avec la toile. Encore une fois, je vais utiliser des événements de formulaire, ce cas, je vais m'abonner à la toile et je vais m'abonner aux événements de déplacement de la souris. Je vais essentiellement dessiner sur la toile comment ma souris se déplace. C' est pour ça que j'avais besoin de la chèvre en bas. Donc, je mets un abonnement, je reçois l'arc d'événement. De l'arc d'événement, je peux obtenir x et les décalages y sur les éléments. Ensuite, en utilisant le contexte de toile, je peux remplir un petit rectangle de deux par deux pixels où la souris est. Mais maintenant, si je déplace la souris sur la toile, vous pouvez voir des points en train de dessiner. Si je bouge lentement, ils sont proches les uns des autres, mais si je bouge trop vite, vous voyez qu'il y a en fait quelques lacunes parce que chaque pixel n'est pas un événement. Le FromEvent rend vraiment facile de fermer les gestionnaires d' événements et de créer des observables basés sur ces événements, au moins pour la plupart des événements. Occasionnellement, vous devrez utiliser deux le modèle FromeVent. Alors on se voit dans la prochaine vidéo. 11. Observables basés au Timer et d'intervalles: Salut. Ici Maurice. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un bref regard sur les observables temporels, la minuterie et l'intervalle. La minuterie est une fonction de création très simple. Il crée un observable qui attend la quantité de temps spécifique, puis émet, et éventuellement émet plusieurs fois en fonction du second paramètre. L' intervalle commence juste à émettre et continue à émettre, vraiment simple. On l'a déjà vu plusieurs fois. Jetons un coup d'oeil au code. Je vais seulement utiliser le minuteur ici parce que nous avons déjà utilisé l'intervalle plusieurs fois. Nous importons minuterie de RXJS, puis en utilisant minuterie, nous spécifions le temps d'attente. Une seconde ici. Après une seconde, nous mettons à jour les éléments de résultat avec les événements. Si je clique sur « Démarrer », nous voyons après une seconde, zéro nu et rien d'autre. Avec le premier paramètre delay, nous obtenons simplement les événements uniques. Si nous ajoutons le deuxième paramètre, il déterminera réellement l'intervalle pour chaque événement après le délai initial. Maintenant, il a attendu cinq secondes puis déclenché un événement toutes les secondes. Une bonne chose avec le minuteur est que nous n'avons pas seulement à spécifier le nombre de millisecondes à attendre, mais nous pouvons également spécifier des dates, des objets avec l'heure exacte à laquelle il devrait commencer. Créons l'heure de début avec l'heure de la date actuelle et ajoutez-lui cinq secondes, puis dites-lui de commencer à ce moment précis. Encore une fois, si je clique sur « Démarrer », il attend cinq secondes, puis recommence à émettre. Mais maintenant, parce que c'était exactement l'heure de départ, nous déterminons. Le minuteur est vraiment utile, il attend et puis, soit émet une fois ou en fonction du second paramètre, commence à émettre après chaque intervalle et l'intervalle commence à émettre tout de suite comme nous l'avons vu auparavant. Les deux sont vraiment bons pour planifier le travail récurrent. se voit dans la vidéo suivante. 12. Utiliser des iterables et des promesses: Salut, Maurice ici. Bienvenue à ce cours sur Master RRXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à la fonction from () pour créer de nouveaux observables. From () est très polyvalent, il prendra essentiellement tout ce qui est soit un abonnement ou une promesse, ou quelque chose que vous pouvez boucler comme un tableau ou un itérable et créer un nouvel observable basé sur cela. Très similaire à la of () quand il s'agit de [inaudible] et ensemble de valeurs sauf avec of () doivent être des valeurs connues. Ici, c'est juste un tableau. Si vous utilisez un tableau ou un itérable, il soumettra toutes les valeurs de manière synchrone. Bien sûr, avec une promesse, il ne peut pas faire ça. Jetons un coup d'oeil. Nous devons d'abord importer à partir de () à partir de RXDS, puis nous allons utiliser à partir de () avec elle, un tableau de nombres 1, 2, 3 et nous allons juste les imprimer sur la console lorsque nous nous abonnons. Lorsque je clique sur le bouton Démarrer, nous voyons les numéros 1, 2 et 3 apparaissent dans la fenêtre de la console. Agréable et simple. On peut travailler avec tout ce qu'on peut faire. J' utilise un sélecteur de requête pour sélectionner tous les LiElements ci-dessus. Surdosage en boucle en utilisant le from () pour créer un observable. Un observable des éléments DOM. Nous nous abonnons et dans l'abonnement, je vais définir le contenu textuel des LiElements à utiliser from (). Lorsque j'appuie sur le bouton de démarrage, les cinq LiElements sont mis à jour. Nous pouvons également utiliser from () avec des promesses, ce qui peut être vraiment pratique si vous avez une API basée sur des promesses comme fetch ou autre chose. Dans ce cas, je vais juste créer une promesse et après deux secondes la résoudre avec la valeur 42. Donc, en utilisant from (), je transforme la promesse en un observable et je m'y abonne. Lorsque la promesse sera résolue, l'abonnement sera appelé et nous définirons les éléments de résultats sur la valeur en cours de résolution, 42 dans ce cas. Les lis sont tous mis à jour à nouveau et nous voyons la valeur 42 apparaître. Dans tous ces cas, l'observable se ferme dès qu'il sait que c'est fait soit avec un nombre fixe de valeurs ou lorsque la promesse est résolue. Utiliser from () est très simple et utile pour les collections ou lors de l'utilisation de promesses. Lors de l'utilisation de collections, il émet de manière synchrone toutes les valeurs, et avec une promesse, il émet quand la promesse est résolue, et dans tous les cas, il est fermé immédiatement après. se voit dans la vidéo suivante. 13. Observables des demandes AJAX: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à faire des requêtes Ajax. Si nous voulons faire une requête Ajax, nous devons importer Ajax à partir de rxjs/ajax. Pas de rxjs lui-même, mais le sous-paquet appelé Ajax. Une chose Ajax que nous récupérons est à la fois un objet et une fonction. Vous pouvez l'utiliser comme une fonction pour faire votre demande, mais il y a un certain nombre de fonctions utilitaires à partir de là pour rendre la vie à la plupart des demandes plus facile. Habituellement, je fais juste avec ajax.getJson ou un ajax.put ou un ajax.post. Tout est basé sur l'objet XMLHttpRequest. Cela fonctionne dans les anciens navigateurs. Faisons une simple requête de récupération. abord, nous allons importer Ajax à partir de rxjs/ajax. D' abord, je vais utiliser ajax comme fonction. Nous devons spécifier un objet en tant que paramètre, et cet objet peut avoir un certain nombre de paramètres différents. Si vous allez à la documentation RxJS, vous recherchez Ajax, vous verrez la requête Ajax. Ici vous pouvez voir la liste des paramètres que vous pouvez spécifier. Dans ce cas, je vais garder les choses simples. Je vais juste spécifier l'URL. Mais vous pouvez voir que vous avez un peu de contrôle. J' ai l'URL ici à une API en ligne qui renvoie des blagues Chuck Norris. Lorsque l'appel Ajax est terminé, il renvoie un observable et qui émettra une fois la requête ajax terminée. Dans ce cas, l'événement passé est XMLHttpRequest. Il a un objet de réponse, et en dessous de la réponse se trouve à la réponse réelle, dans ce cas, il y a une valeur qui a une blague. Il y a une blague de Chuck Norris et une autre. Ce n'est pas difficile, mais dans la plupart des cas, vous devrez spécifier un peu plus. Si je sais que je vais juste demander des données JSON, j'utiliserai la fonction utilitaire GetJSON, il suffit de la passer à l'URL et éventuellement à certains en-têtes, allez vous abonner dessus et cela vous retournera à charge utile JSON réelle lorsque le la réponse est terminée. Bien que encore une fois, je vais évaluer .blague de la charge utile et afficher cela. Là, nous voyons une autre blague. Faire des requêtes AJAX en utilisant RXJS est vraiment simple. Tout est basé sur l'objet XMLHttpRequest donc il fonctionnera avec les anciens navigateurs, et parce qu'il renvoie un observable, vous pouvez simplement le traiter comme n'importe quel autre observable. se voit dans la vidéo suivante. 14. Créer des observables personnalisés: Salut Maurice ici. Bienvenue à ce cours sur master RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à la création d'observables clients. La première règle des observables personnalisés est de ne pas les créer. Si vous voulez créer un nouvel observable, voyez si vous pouvez commencer par un observable existant, c'est toujours la meilleure option. Ici, sur le site Web de ReactiveX, si vous allez sur les opérateurs et que vous faites défiler un peu vers le bas, vous verrez cette option à propos d'un arbre de décision pour utiliser les opérateurs. Eh bien, il a aussi cet arbre de décision sur l'utilisation des fonctions pour créer de nouveaux observables, et nous allons créer une petite horloge, chaque seconde que nous voulons émettre à l'heure actuelle. C' est comme un intervalle. Nous voulions l'intervalle sauf que nous ne voulons pas les nombres de l'intervalle, nous voulons l'heure actuelle. C' est comme utiliser un opérateur de mappage de largeur d'intervalle combiné avec le nombre actuel, à l'heure actuelle. Mais si vous ne trouvez aucune fonction de création existante qui fonctionnera à travers observable.create vous permettra de créer une nouvelle observable. Vous obtiendrez l'objet abonné, il a une prochaine fonction complète et une fonction d'erreur que vous pouvez appeler pour émettre une valeur. Jetons un coup d'oeil au code. Faisons d'abord la chose simple et commençons par un intervalle. Je vais d'abord créer une nouvelle fonction, ce qui va créer un nouvel observable pour moi. Parce que je voulais basé sur le temps, je vais l'appeler temps et passer le nombre de millisecondes entre l'émission de l'heure actuelle. Parce que c'est vraiment comme l'intervalle, je vais commencer par l'intervalle et je vais le mapper à l'heure actuelle. Si l'intervalle et la carte importants, puis je crée un nouvel intervalle spécifiant le nombre de millisecondes, alors je vais utiliser la fonction de tuyau pour exécuter un filtre de carte Trudeau, ignoré le nombre d'origine, et travaillé sur une nouvelle date à chaîne d'heure locale. Je peux utiliser cette fonction de création de temps comme n'importe quelle autre, il suffit de l'appeler avec le nombre de millisecondes, il retourne un observable, donc nous y souscrivons, et chaque fois qu'il émet un événement, nous mettons à jour nos éléments de résultats. Là, nous voyons notre petite horloge qui tourne. Agréable et simple et émis pour être vraiment l'approche préférée. Mais regardons une approche différente, s'il n'y a pas de norme observable, vous pouvez vraiment les utiliser. Dans ce cas, nous allons importer l'observable de rxjs et utiliser observable.create pour créer un nouvel observable complètement vide. Nous sommes mis en pause un objet à l'abonné qui devra ensuite, erreur, et la fonction complète. Ces gars vont seulement utiliser à côté pour émettre des valeurs. Parce que nous vraiment pas de fin en temps, et nous ne allons pas supposer grandir et l'erreur. Juste pour montrer que nous pouvons émettre des valeurs, j'émets la chaîne bonjour, et elle apparaît. Nous voulons émettre en fonction du temps donc créons un intervalle défini, et chaque fois que les millisecondes émettent l'heure actuelle. Là, nous voyons nos clients temps observables émettant des valeurs temporelles. Super. Maintenant, nous n'avons pas encore tout à fait fini, parce que nous commençons un intervalle défini et il continuera à fonctionner pour toujours. Ajoutons un console.log dans l'intervalle afin que nous puissions réellement voir quand il s'exécute. allons capturer l'abonnement lorsque nous nous abonnons, afin que nous puissions nous désabonner après cinq secondes. Si j'appuie sur le bouton de démarrage maintenant, l'heure commencera à fonctionner, mais l'élément cessera de se mettre à jour après cinq secondes parce que nous avons annulé notre abonnement, mais la sortie de la console continue toujours à venir. Nous devons nous assurer d'arrêter cet intervalle. La façon dont vous effectuez des actions de nettoyage lorsque l'utilisateur désabonne d'un observable est de renvoyer la fonction de nettoyage. À partir de l'observable.create, la fonction qui crée l'observable retournera une fonction de nettoyage. Nous allons enregistrer pour gérer à partir de l'intervalle défini et en clair dans plein [inaudible] à la poignée qui l'arrêtera. Maintenant, lorsque je clique sur « Démarrer », nous voyons le temps qui s'écoule, mais après cinq secondes lorsque nous désabonnons à la fois l'interface utilisateur et la console arrêtent la mise à jour, parce que nous avons arrêté l'intervalle. Créer des observables clients est vraiment facile, bien que vous devriez l'éviter. Si vous n'êtes pas obligé, si vous pouvez utiliser l'un des observables standard et simplement utiliser un opérateur, c'est la meilleure approche. Vous obtenez l'abonné, vous pouvez émettre des chaussures de valeur et ensuite vous pouvez compléter l'observable, ou il peut émettre une erreur si vous le souhaitez. Dans l'ensemble, très facile à utiliser. se voit dans la vidéo suivante. 15. Sujets: Salut, Maurice ici, bienvenue à ce cours sur la maîtrise de RxJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil sur des sujets et quelques types de sujets particuliers. Les sujets sont une autre façon de créer des observables, mais ils sont spéciaux car ils sont tous les deux utilisables en tant qu'abonné, en tant qu'observable. Vous les utilisez généralement pour certains cas spéciaux, mais l'un d'entre eux est multi-casting trop d'observables. Vous pouvez vous abonner plusieurs fois au même sujet. C' est une classe de cas spéciale et vous ne devriez pas vraiment les utiliser beaucoup. Si vous voulez créer un nouveau observable, préférez utiliser observable.Créer ou encore mieux, l' une des normes, fonctions de création observables. Il existe trois types particuliers de sujets. Nous avons le sujet de la classe de base, que nous pouvons utiliser, mais nous avons aussi un AsyncSubject, qui n'émet qu'une fois terminé. Nous avons un sujet de comportement, qui prend une valeur initiale et chaque fois que vous vous abonnez, il émettra la valeur perdue émise, ou si rien n'est émis encore la valeur initiale. Nous avons l'objet de remplacement, qui émettra à nouveau toutes les valeurs précédemment émises. Ou si vous spécifiez la taille de tampon optionnelle, il émettra tellement d'événements n'a pas nécessairement besoin d'être tous. Jetons un coup d'oeil au code. Commençons par importer le sujet de rxjs. Notre sujet est une classe, donc vous venez d'en créer un nouveau en utilisant le nouvel opérateur. Si vous avez un sujet, vous pouvez vous abonner pour configurer un abonnement. Dans ce cas, je vais juste imprimer toutes les valeurs sur la console. Ensuite, nous pouvons émettre quelques valeurs. Emettre deux contraintes rxjs est cool. Quand nous lançons ceci, nous pouvons voir que j'ai déménagé ici dans la fenêtre de la console, tout comme vous attendez d'un observable. Maintenant, si je passe à l'abonnement un peu, donc après le 'est', nous allons d'abord émettre rxjs puis 'is', puis nous abonner et ensuite émettre cool, nous ne voyons que les événements émis après notre inscription. On ne voit que cool dans la console. Maintenant, nous allons utiliser les sujets de comportement au lieu des sujets standard cela prend une valeur initiale qui dira début. Lorsque vous vous abonnez, vous obtiendrez également la dernière valeur émise. Même si nous nous sommes abonnés après avoir émis 'is', vous voyez toujours est cool d'être émis. Si je passe à l'abonnement en haut, nous voyons également la valeur de début initiale être émise. Si je passe à l'abonnement jusqu'à la fin, nous ne voyons que la toute dernière chose émise. Cool. Essayons les sujets de remplacement. Première règle, ne transmettant aucune valeur et nous émettrons toute la valeur avant de nous abonner. Pourtant, tout apparaît dans la console. Avec le sujet de remplacement par défaut, il mettra en mémoire tampon tous les événements émis et les nouveaux abonnements recevront tous. Mais nous pouvons spécifier la taille du tampon. Dans ce cas, seulement deux, les deux dernières valeurs étant émises. Les sujets sont vraiment utiles si vous avez besoin d'observables multi-diffusion. Ou vous êtes allé envelopper votre propre manteau à l'intérieur d'un observable.Créer. Mais ils sont une odeur [inaudible] alors ne les utilisez pas trop. La plupart des gens pensent que vous ne devriez jamais les utiliser du tout. se voit dans la vidéo suivante. 16. Observations chaudes et à froid: Salut, Maurice ici. Bienvenue à ce cours sur Mastering RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil aux observables chauds et froids. La plupart des observables vont être froids. Le froid observable ne commence à émettre des données que lorsqu'il y a un abonnement. S' il n'y a pas d'abonnement, rien n'est émis. Habituellement, chaque abonnement aura sa propre source d'événements. Si vous avez deux abonnés à un observable, ils obtiendront leur ensemble unique d'événements. La plupart des observables dans RXJS 6 sont froids, ils ne font rien jusqu'à ce que vous vous abonniez réellement à eux, ce qui est parfaitement bien. l'autre côté, il y a aussi des observables chauds. Les observables à chaud commencent à émettre des valeurs même s'il n'y a pas d'abonnements, ils ne s'en soucient pas. Ils commencent juste à effacer les données. Habituellement, si cela se produit, et que vous avez plusieurs abonnements, ils partagent le même flux de données. Différentes façons de créer des abonnements à chaud, mais généralement cela se fait en utilisant un sujet, mais pas nécessairement, cela dépend vraiment de l'endroit où la source des données est créée. Jetons un coup d'oeil à ce comportement dans le code. Ici, j'ai deux gestionnaires de boutons. Je crée d'abord un observable froid, puis dans l'événement click, je m'y abonne. Ci-dessous, je crée le hot observable, et encore une fois, dans l'événement click, je m'y abonne. Ils sont tous deux créés lorsque la page se charge et ils ne sont tous deux abonnés que lorsque leur bouton respectif est cliqué. Rafraîchissons la page pour nous assurer que nous commençons par une diapositive propre. Attendez un peu, puis cliquez sur Démarrer à froid. Vous voyez que nous obtenons des valeurs émises, mais cela a commencé avec la valeur 0. Actualisons à nouveau la page et essayons avec hot. Vous voyez qu'après une brève pause, nous avons commencé avec la valeur 46. Nous n'avons pas commencé à 0, nous sommes entrés au milieu d' un flux de nombres et avons commencé à les recevoir. À quoi ressemble le code ? Pour un observable froid, vous voyez que l'observable est créé en utilisant observable.create. A l'intérieur, nous commençons un intervalle et nous commençons à émettre des valeurs. Pour le hot observable, nous créons un sujet et commençons immédiatement à émettre des valeurs, qu'il y ait ou non des abonnements. Nous n'arrêtons pas non plus d'envoyer des valeurs si quelqu'un se désabonne. La plupart des observables sont froids et c'est parfaitement bien. Ils n'ont pas besoin de faire quoi que ce soit jusqu'à ce que vous demandiez des données. Certains observables sont chauds, émettent toujours des valeurs. Des exemples typiques d'un observable chaud seraient quelque chose comme un trader boursier. Si vous écoutez ou non, des actions sont négociées, actions d'achat et de vente sont émises. Si plusieurs personnes écoutent, elles peuvent écouter le même flux. Avec un froid observable, si personne ne prêtait attention, aucune vente ne serait faite. se voit dans la vidéo suivante. 17. Trouver le bon opérateur: Bonjour Morris ici. Bienvenue à ce cours sur la maîtrise des arcs ES6 sans casser une sueur. Dans cette vidéo, nous allons brièvement jeter un coup d'oeil à trouver des opérateurs à utiliser, car il y en a beaucoup et trouver les bons peut être peu difficile. Nous avons les sites Web de RxJS et il y a beaucoup de documentation sur les opérateurs là-bas. Allons-y un moment. Ici, nous avons à RxJS sites Web et référence à toutes les fonctions là-bas. Il y en a beaucoup. Si je fais défiler vers le bas jusqu'aux opérateurs, il y a une liste assez importante. Maintenant, si vous savez quels opérateurs qui sont intéressés par, par exemple, arrêtez. Vous pouvez juste le trouver ici et y aller. Mais si vous ne savez pas vraiment quel opérateur utiliser, vous avez un problème et quel opérateur dois-je résoudre. Ce site est difficile à utiliser. Dans ce cas, le site ReactiveX est beaucoup plus facile. Ils ont en fait ces tableaux de décision pour trouver le bon opérateur, pas tous les opérateurs sont là, mais beaucoup le sont. Il est divisé de telle sorte que vous pouvez réellement passer par. C' est ce que je veux résoudre. Quel opérateur utiliserais-je ? Si nous ouvrons ceci, vous pouvez voir qu'il est divisé en différentes sections, classant un nouvel observable, qui ne concerne pas les opérateurs, mais beaucoup d'autres choses. Supposons que je veux émettre des éléments d'un observable après les avoir transformés. Eh bien, un à la fois, utilisez la fonction de carte. Un observable à l'époque, utilisez concat map. Vous pouvez voir qu'il y a une belle décision. Je veux seulement réémettre certains articles, ce qui arrive assez souvent. Vous pouvez utiliser pour filtrer ou rapidement, prendre ou perdre, ou sauter certains, etc. Il est beaucoup plus facile de trouver des opérateurs de cette façon, donc je l'utilise assez souvent. Gardez simplement à l'esprit que certains opérateurs sont nommés différemment. Si nous cherchons des erreurs, comme j'ai un observable et je veux récupérer gracieusement d'une notification que nous pouvons utiliser pour attraper l'opérateur. On devrait attraper l'erreur. Si je fais défiler un peu vers le bas, je verrai des implémentations pour différentes langues donc nous verrons Catcherror pour RXJS. Mais si nous allons chercher RxJS catch, nous voyons qu'il s'appelle en fait Catcherror. La raison en est que catch est un mot-clé réservé et qu'il s'agit d'une fonction autonome, donc il ne peut pas être nommé d'après un mot-clé réservé. Rendez-vous dans la prochaine vidéo lorsque nous commencerons à utiliser différents opérateurs. 18. L'opérateur de tap: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à l'opérateur Tap. L' opérateur de robinet est destiné aux effets secondaires. Utilisez-le pour le débogage, ce que je fais souvent, ou d'autres effets secondaires, il faut un abonnement tout comme la fonction d'abonnement, donc soit trois fonctions pour la prochaine erreur incomplète, soit un objet avec trois fonctions. Contrairement à subscribe, il n'active pas réellement l'observable. Ici, sur le site Web de RxJS, vous pouvez voir que nous avons la documentation pour le haut avec les trois paramètres qu'il faut. Non ReactiveX site Web, nous pouvons le trouver aussi, sauf qu'il s'appelle « Do here ». La raison en est la mort dans la plupart des implémentations Rx, réactif X doux avec toutes nos différentes langues utilise pour faire opérateur. RxJS varie de celui avec le nombre d'opérateurs en raison de restrictions. Avec la plupart des autres implémentations ReactiveX, les opérateurs sont des fonctions uniquement des objets observables. Cela était vrai aussi pour RXJS. Dans ce cas, Do and catch par exemple était bien mais il y a des mots-clés réservés, eh bien, vous pouvez les utiliser comme une fonction sur un objet. Vous ne pouvez pas les utiliser comme mots-clés autonomes. Avec RXJS 6, nous allons des opérateurs capables et ils devaient être des fonctions autonomes afin qu'ils n'aient pas renommé certains d'entre eux, et Do a été renommé pour taper et attraper a été renommé pour attraper l'erreur. C' est pourquoi il y a de légères différences dans le nommage. site Web ReactiveX plus ancien est génial parce que la documentation est beaucoup plus complète et il y a de beaux diagrammes sur la façon dont cela fonctionne. Jetons un coup d'oeil à quelques codes, nous avons un simple minuteur ici, il est allé pendant deux secondes et puis émet mais aussi avant de commencer la minuterie, nous désactivons le bouton et quand il se déclenche, nous le réactivons. Le bouton est désactivé et réactivé lorsque le minuteur se déclenche. En fait, ça aurait dû être fait quand c'est terminé, mais ça m'a dit des feux une fois, pas beaucoup de différence. Importons le robinet et nous allons utiliser la fonction de tuyau pour taper opérateur dans l'observable. Comme subscribe, qui peut utiliser une fonction simple, tombe dans la fonction et imprime l'élément courant émis sur la console. Ouvrez la fenêtre de la console, Démarrer, et après deux secondes, nous voyons l'élément en cours d'émission. Très souvent en fait raccourcir ce que je viens appeler Tap and Push en référence à l'avocat va bloquer, ce qui va réellement sortir exactement la même chose. Juste une syntaxe légèrement plus courte. Là, on le voit. Maintenant, dans ce cas, j'ai en fait les effets secondaires dans la fonction d'abonnement pour réactiver le bouton. C' est là que l'opérateur de robinet entre en jeu. Je vais utiliser pour terminer un retour en arrière dans l'opérateur de robinet et réactiver le bouton là-dedans. Maintenant, mon abonnement est seulement intéressé par la valeur et les effets secondaires comme réactiver le bouton ou délégué à l'opérateur tap. Cela fonctionne dans ce cas, il semble en fait un peu funky parce que je ne passe pas deux fois pour les deux premiers paramètres donc dans ce cas, passer un objet avec le rappel complet a plus de sens. Changeons la syntaxe, il se comporte toujours exactement de la même manière lorsque je clique sur « Démarrer », désactivé, et ensuite émet il est activé. Tap est un opérateur vraiment utile, je l'utilise pour le débogage, mais c'est utile pour d'autres effets secondaires comme la désactivation, activation des boutons aussi bien. se voit dans la vidéo suivante. 19. L'opérateur de carte: Salut, Maurice ici. Nous reviendrons sur ce cours, pour maîtriser RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à l'opérateur de carte. L' opérateur Map est vraiment utile. Il prend les objets d'une entrée et la transforme en certains objets de sortie. Fondamentalement, l'entrée va à la sortie d'une forme différente. Dans certains cas, tout ce que vous voulez faire est d'extraire une seule valeur de l'objet d'entrée. Dans ce cas, l'opérateur de bloc est une autre alternative. Mais dans cette vidéo, je vais juste utiliser « Transform ». Jetons un coup d'oeil au code. Ici, j'ai un exemple de toile que nous avons utilisé il y a longtemps, quand nous avons regardé obtenir des flux observables à partir d'événements DOM. Ça marche très bien. Mais je ne me suis pas abonné, j'utilise en fait les événements de la souris d'origine, tout ce qui est là, donc nous obtenons beaucoup plus de données que nous n'avons réellement besoin. J' utilise également ces objets contextuels globaux. Importons l'opérateur Map pour corriger cela. Nous allons diriger les événements vers l'opérateur de carte et nous allons extraire les valeurs dont nous avons besoin. Dans ce cas, les OffsetX et OffSety. L' abonné ne reçoit plus pour terminer les arcs d'événement, il reçoit juste pour se positionner maintenant. Mettons à jour le code et abonnons-nous pour refléter cela, utilisez la position X dans la position Y. Notre crayon fonctionne toujours et nous pouvons dessiner dessus. Super. Nous utilisons toujours ces objets contextuels de la portée externe. allons capturer cela aussi dans la carte, parce que nous allons récupérer cela à partir de eventact.targets.getcontext 2D. Maintenant, nous ne sommes plus dépendants de cette variable de contexte de la portée externe. Nous publions juste tout ce dont l'abonné a réellement besoin. Super. L'opérateur de carte est très populaire. Il est beaucoup utilisé. C' est vraiment génial de transformer un objet d'une forme à une autre, ou d'ailleurs, il n'a pas besoin d'être un objet, tout va faire. se voit dans la vidéo suivante. 20. L'opérateur de filtre: Salut. Ici Maurice. Bienvenue à ce cours sur Master en RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à un opérateur très populaire, le filtre. Comme son nom l'indique, le filtre sélectionnera simplement les éléments à parceler. Il obtient chaque élément émis par la source observable et seulement au milieu des choses passant le filtre sur la cible observable. est important de noter que le filtre n'affecte pas la fermeture de observable. Contrairement à d'autres opérateurs de filtrage liés comme take and first, qui le fera. Ici, nous pouvons voir le diagramme de marbre Rx pour filtre. Nous voyons le flux observable en entrée avec les valeurs 2, 30, 22, 5, etc. Nous ne voyons que les valeurs supérieures à 10 émises sur la sortie observable. Jetons un coup d'oeil à un code. J' ai un petit minuteur ici et ça va émettre un nouveau numéro toutes les demi-secondes. Je dois taper opérateur pour l'imprimer sur la console et je vais les afficher dans l'interface utilisateur que nous voyons les valeurs 1, 2, 3, etc., apparaissant. Filtrons ceci à n'utiliser que des nombres premiers. Tout d'abord, nous importons l'opérateur de filtre. En avant, nous allons à la fonction pour filtrer les premiers. Ensuite, dans la fonction pipe, nous ajoutons le filtre et pour chaque valeur émise, nous testons sa primauté. Je fais cela après avoir utilisé l'opérateur de robinet. Mais lorsque je clique sur « Démarrer », nous verrons tous les nombres émis dans la console, mais seulement les nombres premiers dans l'interface utilisateur elle-même. Pas d'ordre est important si je déplace le filtre d'abord et appuyez sur, deuxième opérateur, puis je vais d'abord filtrer puis imprimer sur la console. Maintenant, je vais seulement voir les nombres premiers dans la console. Filtres et autre opérateur très peuplier pour un certain nombre de filtres comme opérateur pour des cas d'utilisation très distincts. se voit dans la vidéo suivante. 21. Les opérateurs prennent et les opérateurs les derniers opérateurs: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RxJS6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à prendre opérateur et la prise connexe perdu. L' opérateur de prise vous permettra de prendre le premier nombre x d'éléments émis à un observable, prendre dernier est deux opposés. Il vous donnera le dernier nombre x de valeurs émises son propre observable. Donc prendre est différent du filtre, le filtre ne change pas lorsque l'observable a été fermé. Take fermera l'observable dès que le nombre de valeurs exige à notre front. Ici, nous voyons le diagramme de billes rx pour prendre. Donc, entrée observable émet un, deux, trois et quatre. On ne prend que les deux premiers. Il nous reste donc un et deux. Prends perdu avec un. Encore une fois, l'entrée émet un, deux, trois et quatre. Take lost émet seulement quatre, mais notez qu'il n'émet que lorsque l'entrée observable est fermée. Ce n'est qu'alors qu'il sait ce qui est vraiment le dernier article émis ? Jetons un coup d'oeil à un code. Ici, j'ai un bouton avec un intervalle qui émet une valeur toutes les demi-secondes. Nous allons imprimer dans le journal de la console. Nous allons l'afficher dans l'interface utilisateur et l'interface utilisateur, nous allons également afficher le fait que l'observable a été terminé. Maintenant, l'observable continue juste à émettre des valeurs parce que nous ne nous sommes jamais arrêtés. Prenons les cinq premières valeurs. Nous allons importer pour prendre opérateur, et puis je vais diriger l'observable vrai pour prendre opérateur. Il affichera cinq pour prendre les cinq premiers éléments. Là, nous voyons les éléments apparaissant et l'observable étant complet. Changeons ça pour prendre perdu. Nous prendrons les cinq derniers éléments. Lorsque je clique sur Démarrer, vous voyez des numéros émis par l'opérateur de robinet, qui est avant de prendre perdu, mais rien n'apparaît dans l'interface utilisateur. C' est parce que pour entrer observable ne se ferme jamais. Donc prendre perdu ne sait pas quand émettre des valeurs. Utilisons cet opérateur pour prendre les 10 premières valeurs émises, qui se rapprochent de l'observable par la suite. Ensuite, nous allons utiliser prendre la dernière pour prendre les cinq dernières valeurs de celles-ci. Nous pouvons voir dans le journal de la console que 10 valeurs ont été émises, mais dans l'interface utilisateur, nous avons seulement vu terminé. C' est parce que prendre les dernières émissions à la fin. Mais quand nous passons à l'opérateur de robinet comme dernier opérateur, nous pouvons réellement voir ce qui était émis dans la console. Cliquez à nouveau sur Démarrer. Il émet des valeurs. Prenez des pertes, les capturer, et maintenant il émet les cinq valeurs perdues. Donc prendre et prendre perdu sont assez utiles pour capturer un sous-ensemble des éléments émis. Le premier ou le dernier. Si vous voulez juste très premier, ou des résultats très perdus sur le premier et le dernier opérateur, qui sont utiles. Ils prennent également un prédicat et la valeur par défaut au cas où rien n'est émis au moment où l'observable se ferme. Les capacités qui prennent et prennent perdu n'ont pas. Alors on se voit dans la prochaine vidéo. 22. L'opérateur prise et prises de: Salut Marie part. Nous reviendrons à ce cours sur la maîtrise des arcs ES6 sans casser une sueur. Donc, dans cette vidéo, nous allons jeter un oeil à un autre opérateur pour filtrer les données de l'opérateur TakeWhile. Le TakeWhile est comme l'opérateur de filtre et l'opérateur de prise combinés. Il prend le premier nombre d'éléments émis sur observable, mais au nombre d'éléments émis. Cela dépend des prédicats. Contrairement à ce qu'il faut, qui prend un nombre fixe, il utilisera un prédicat tout comme le filtre. Contrairement au filtre qui maintient l'observable ouvert et émet tout ce qui passe, TakeWhile fermera votre observable dès que le premier élément admis ne passe pas le filtre. Ici vous pouvez voir le diagramme de marbres arcs pour prendre tandis que voir la condition de filtre est x étant plus petit que cinq et dès que six est émis, la sortie observable est fermée, et vous pouvez voir si je déplace les six après les quatre les quatre l'a fait, et si je suis passé à sept plus tôt, la mort le plus proche de la corde. Jetons un coup d'oeil à un code. Encore une fois, nous avons un petit intervalle qui émettra un nouveau nombre toutes les 500 millisecondes. Importons dans l'opérateur TakeWhile et prenons des éléments aussi longtemps que nous sommes en dessous de cinq. Si je clique sur Démarrer maintenant, nous verrons les cinq premiers éléments émis, mais dès que nous atteignons cinq, vous observable est fermé. Prenez des puits modèles assez habituels polyvalents comme filtre, mais toujours très utile. Rappelez-vous qu'il ferme réellement la sortie observable. se voit dans la vidéo suivante. 23. L'opérateur prise en vue: Salut, je suis Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à TakeUntil Operator. Cet opérateur TakeUntil est très semblable à l'opérateur TakeWhile. Il prend les valeurs émises à partir d' un flux observable et émet des valeurs jusqu'à ce qu'il soit dit d'arrêter. Nous n'aimons pas TakeWhile, qui utilise un prédicat, TakeUntil utilise réellement un autre flux pour déterminer quand arrêter. Ici vous pouvez voir le diagramme de marbres orange. Vous pouvez voir les éléments TakeUntil prennent forment le premier flux jusqu'à ce que le second flux émette. Si je déplace le premier élément sur le deuxième flux, vous pouvez voir que l'observable résultant est en fait un changement. Jetons un coup d'oeil au code. Tout comme avant, j'ai le bouton de démarrage qui écoute un événement de clic et nous allons commencer un intervalle émettant toutes les 500 millisecondes. Dans ce cas, j'ai également le bouton d'arrêt et maintenant vous utilisez la fonction d'événements Forum pour créer un observable chaque fois que nous cliquons dessus. Je vais taper opérateur là juste pour qu'on puisse voir quand on clique dessus. Notez que je ne m'abonne pas à l'événement stop. Si je clique sur Démarrer, nous voyons des valeurs émises. Mais si je clique sur Arrêter, on ne voit rien se passer. Nous ne voyons pas le message de la console car nous ne nous abonnons pas réellement à cet événement. Utilisons le bouton d'arrêt pour arrêter la chaîne d'intervalle. Je vais importer l'opérateur takeUntil et par le flux d'intervalle via TakeUntil et la politique dans la chaîne d'arrêt là. Je clique sur démarrer et le flux d'événements est en cours d'exécution, je clique sur arrêter et il s'arrête. Notez que si je clique seulement sur stop, rien ne se passe car il n'y a pas encore de fonctionnalités observables. Nous devons démarrer le premier flux avant que le second flux ne soit abonné. TakeUntil est très utile. Il combine deux flux, un flux d'entrée et un autre flux pour déterminer quand arrêter de prendre des événements à partir du flux d'entrée. Rappelez-vous qu'il ferme le flux de sortie dès que le second flux émet. Rendez-vous à la prochaine vidéo. 24. Le scan et réduire les opérateurs: Salut, Maurice ici. Bienvenue à ce cours sur Master RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un coup d'œil à deux opérateurs très comparables, le scan et le réduire. Ils sont presque les mêmes. L' opérateur de scan prend une fonction d'accumulateur qui prend le résultat précédent et la valeur actuelle émise, et évidemment il prend une valeur initiale et puis il va émettre toutes les valeurs de l'accumulateur. Ici, nous pouvons voir l'opérateur de scan sur le site de marbre Rx. Vous pouvez voir pour chaque valeur émise sur l'entrée observable nous obtenons une valeur émise sur la sortie observable, le résultat de répéter l'accumulateur pour chaque valeur. L' opérateur de réduction prend exactement les mêmes paramètres, une fonction d'accumulateur prenant la valeur précédente et actuelle émise, et une valeur initiale facultative. Cependant, la différence est qu'il n'émet que lorsque l'entrée observable est fermée. Ici, nous voyons l'opérateur réduit sur les sites de marbre Rx, et remarquons qu'il n'émet qu'une fois à la fin lorsque l'entrée se ferme. Jetons un coup d'oeil à cela dans le code. J' ai un exemple de code, et je commence par une plage de quelques chiffres. Si je clique sur le bouton Démarrer, nous voyons juste les nombres émis et je vois le dernier nombre émis un cinq dans l'interface utilisateur. Importons la numérisation et la réduction, et nous allons d'abord l'utiliser pour analyser l'opérateur. L' analyse prend une fonction qui a un résultat précédent comme premier paramètre et la valeur actuelle étant émise comme second paramètre. La première fois que la valeur précédente sera la valeur initiale que nous transmettons. S' il n'y a pas de valeur initiale transmise, alors la toute première valeur émise ne provoquera pas l'exécution de l'accumulateur, c'est seulement à la seconde. Ensuite, la première valeur est la précédente et la deuxième valeur émise est la valeur courante. Mais en général, j'utilise toujours une valeur initiale, et si j'appuie sur le bouton de démarrage maintenant, nous voyons la somme de 1-5, qui est 15 roulement. Faisons la même chose avec la fonction réduite, au lieu de scanner, nous allons utiliser réduire, et si j'appuie sur « Start », nous voyons exactement la même sortie. Nous ne pouvons pas vraiment dire la différence entre scanner et réduire en ce moment, alors prenons un intervalle au lieu d'une plage fixe de nombres, et la grande différence ici est bien sûr, que l'intervalle ne se ferme pas parce que le temps continue à prendre. Avec l'opérateur de scan, nous voyons toutes les sommes immédiates des valeurs émises et si nous avons essayé la même chose avec l'opérateur de réduction, cela ne va pas se produire. Si j'appuie sur « Démarrer », nous voyons des valeurs émises dans la console mais dans l'interface utilisateur, nous ne voyons pas réellement vos résultats. C' est parce que pour l'intervalle reste ouvert, il ne se termine pas donc réduire n'émet jamais réellement une valeur. Importons l'opérateur de prise et prenons les 10 premières valeurs de l'intervalle. Maintenant, l'observable se termine et maintenant réduit va, après 10 valeurs émises, émettre les résultats de la somme de tous les nombres émis. Scanner et réduire, très similaire, les deux prennent une fonction d'accumulateur avec une valeur initiale facultative. La différence est quand ils émettent, scan émet à chaque fois, réduit les émissions à la fin, réduit généralement un grand opérateur à utiliser, mais cela ne fonctionne que si vous avez un observable qui le plus proche. Alors on se voit dans la prochaine vidéo. 25. L'opérateur de couple: Salut, Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à l'opérateur par paires, ce qui peut être assez utile dans certains cas. L' opérateur par paires combine essentiellement deux éléments émis sur l'entrée observable sur la sortie observable. Chaque événement émis sur la sortie observable est un tableau contenant deux valeurs, la valeur précédente et la valeur actuelle émise. Il y a deux opérateurs r similaires, BufferCount, qui est un peu plus flexible parce que vous pouvez spécifier la taille du tableau émise, il n'a pas besoin d'être deux, ou BufferTime qui prend temps et recueille juste tous les éléments émis dans un intervalle de temps et les émet sous la forme d'un tableau. Ici vous pouvez voir l'opérateur par paires sur le site de RxMarble. Vous pouvez voir que l'entrée observable émet A, B, C, D, E , F. La sortie observableémet les tableaux A, B, B, C, C, D ,etc. émet les tableaux A, B, B, C, C, D , la suivante sont leurs valeurs avec la précédente. Jetons un coup d'oeil à un code. Ici, j'ai l'échantillon Canvas à nouveau que nous avons utilisé auparavant. Rappelez-vous quand je déplace la souris sur Canvas, nous pouvons dessiner dessus, mais il dessine des points où se trouve la souris. Si je déplace la souris rapidement, nous obtenons plus de séparation entre les points si je le déplace ralenti sont proches ensemble. En utilisant ces points et en deux sages, nous pouvons réellement les transformer en une ligne. Importons d'abord l'opérateur de paire sage. Ensuite, après avoir cartographié nos événements, nous le transformons en paires en le tuyautant à l'opérateur par paires. Maintenant, dans notre abonnement, nous obtenons des paires de positions, pas seulement des positions individuelles. Utilisons la syntaxe de structuration [inaudible] pour obtenir la position de départ et de vers de la paire. Nous allons obtenir le contexte du premier, n'a pas vraiment d'importance lequel des deux que nous utilisons. Maintenant, en utilisant l'API contextuelle, commencez, passez à la ligne deux et tracez. Nous pouvons en fait tracer une petite ligne entre les deux points. Bien sûr, paire devrait être un appel de fonction. Donc maintenant, si je déplace la souris sur Canvas, nous obtenons une belle ligne au lieu d'une rangée de points séparés. Pairwise peut être très utile pour ce genre de situations où vous voulez jumeler des choses. Les opérateurs BufferCount sont un peu plus flexibles car vous pouvez spécifier la taille exacte de la mémoire tampon souhaitée. On se voit dans la prochaine vidéo. 26. Les opérateurs de flatMap, fusion, concatMap et switchMap: Salut, Maurice ici, bienvenue aux scores de Master RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à divers opérateurs de carte. Ils sont essentiellement tous conçus pour mapper un observable dans un autre observable, donc nous allons regarder : FlatMap, MergeMap, ConcatMap et SwitchMap. abord, nous allons regarder FlatMap et MergeMap, et nous allons les regrouper parce que FlatMap est juste un alias de MergeMap. Ils sont vraiment exactement la même chose. MergeMap commence à émettre des événements à partir d'un observable imbriqué dès que l'observable externe émet. MergeMap émettra essentiellement toutes les valeurs des observables imbriqués indépendamment de ce qui se passe. Si l'observable externe émet trois fois, il démarre l'observable imbriqué trois fois et il va juste continuer à émettre des événements de tous ces observables, donc ils sont tous entrelacés ensemble, il n'y a vraiment pas ordre discernable entre eux. ConcatMap est un peu différent. ConcatMap émet également des événements de l'observable imbriqué lorsque l'observable externe émet, mais il attend que l'observable imbriqué soit terminé avant de commencer le suivant, donc il n'y a pas d'entrelacement et tout est bien ordonné. Il attend toujours que l'observable imbriqué soit terminé, donc s' il ne se termine pas, il ne se déclenchera pas à nouveau. Ici, vous voyez le diagramme RxMarbles pour ConcatMap et vous verrez si je passe aux événements C ou B sur l'observable externe que les observables sont juste mis en file d'attente. La dernière fonction de carte, nous allons jeter un oeil est SwitchMap. SwitchMap est un peu comme ConcatMap en ce que tout est bien ordonné, mais dans ce cas, lorsque l'observable externe émet à nouveau, il va annuler l'observable interne. Ici vous pouvez voir le diagramme RxMarbles. Remarquez quand je déplace les événements sur l'observable externe, que les événements de l'observable interne sont abandonnés si je déplace le B vers la gauche, donc il se déclenche plus tôt, nous voyons que pas tous les événements imbriqués du premier dans notre observable fait feu. Jetons un coup d'oeil à un code. Ici, nous avons un exemple de code. L' observable extérieur est essentiellement un clic observable depuis le bouton de démarrage, donc nous l'utilisons à partir d'événements pour créer un observable. Je canalise cela dans un opérateur de scan juste pour que nous obtenions des valeurs incrémentées et que nous puissions voir quel clic il se déclenche. Si je clique sur le « bouton Démarrer », nous verrons le nombre 1, 2, etc. Utilisons le MergeMap et l'observable imbriqué dans ce cas est juste une plage de nombres 1-5 et j'utilise l'opérateur de carte pour le transformer en une petite chaîne vous montrant à partir de quel clic il provient ou quel événement il est dans l'observable imbriqué. Si je clique sur « Démarrer », nous voyons cinq événements en cours émission et si je clique sur « Démarrer » quelques fois, nous voyons exactement la même chose émise à nouveau. Essayons avec ConcatMap et nous obtenons exactement la même sortie. À première vue, il semble qu'ils se comportent exactement la même chose. Essayons rapidement SwitchMap et encore une fois nous obtenons la même sortie. Ça ne semble pas être beaucoup de différence. La raison en est que l'observable imbriqué est créé à partir d'une plage, donc il fonctionne vraiment vite et c'est déjà fait au moment où nous cliquons à nouveau. Essayons avec un intervalle, donc toutes les secondes, nous allons émettre un événement dans l'observable imbriqué et allons prendre cinq événements à nouveau. Si je clique plusieurs fois sur « Démarrer », vous voyez que les événements sont entrelacés. Nous obtenons un clic et les événements sont tous entrelacés ensemble et il n'y a pas de véritable bon ordre discernable là-bas. Passons de MergeMap à ConcatMap maintenant, et encore une fois si je clique sur « Démarrer » plusieurs fois, nous verrons un comportement très différent. Dans ce cas, nous voyons tous les événements de Click 1 et puis quand cela est fait, nous voyons tous les événements de Click 2 puis tous les événements de Click 3, donc tout est bien en ordre. Maintenant, si je supprime ce prendre cinq, nous avons fondamentalement un observable imbriqué qui ne se termine jamais. Si je clique, vous verrez tous les événements de Click 1 apparaître, mais si je clique quelques fois de plus, nous ne voyons jamais d'événements, il attend que cet observable imbriqué soit terminé, ce qui n'est jamais le cas maintenant. Jetons un coup d'oeil à SwitchMap. Si je clique sur « Démarrer », nous verrons les événements du premier clic apparaître, mais si je clique à nouveau sur « Démarrer », ce premier flux d'événements imbriqués est annulé et une seconde démarre. Si je clique plusieurs fois sur « Démarrer », vous voyez un nouveau flux d'événements démarrer à chaque fois, mais le premier est annulé. Il y a plusieurs opérateurs de carte pour combiner des flux, ils sont tous similaires, mais légèrement différents dans la façon dont ils gèrent les flux d'événements imbriqués, alors choisissez celui dont vous avez besoin pour un travail spécifique, nous allons voir ce qui se passe avec le flux d'événements imbriqués lorsque plusieurs événements se produisent sur le flux d'événements externe. Ils sont tous utiles, ils ont tous leurs cas d'utilisation. se voit dans la vidéo suivante. 27. L'opérateur startWith startWith: Salut, Maurice ici. Bienvenue à ce cours de Mastering RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à l'opérateur StartWith. StartWith est un opérateur qui vous permet d'ajouter un événement initial avant que tous les autres ne soient émis. Nous allons simplement insérer une valeur, puis continuer à émettre tous les autres événements qu'il reçoit. Ceci est le diagramme [inaudible] Marbles pour StartWith. Vous pouvez voir l'observable d'origine émet deux et trois, mais StartWith commence par un, donc il émet un, deux et trois. Jetons un coup d'oeil à quelques codes. Fondamentalement, vous avez la même configuration que dans la dernière vidéo, où nous avons utilisé la forme d'événements pour obtenir un flux d'événements, passer à un flux d'intervalles en utilisant la carte de commutation, mais l'intervalle ne se déclenche qu'une fois toutes les deux secondes et demie. Si je clique sur « Démarrer », on ne voit rien se passer pendant deux secondes et demie. Il y a eu un certain retard. Ajoutons un événement immédiat dès que nous cliquons. Nous allons importer StartWith, puis, nous allons inclure StartWith dans la fonction pipe. Nous commencerons par l'événement avec le mot début. Déplaçons-le en dessous de la fonction Carte. Le premier événement commencera juste, puis les événements suivants montreront quel clic il était et quel était le numéro de l'événement il était. Maintenant, si je clique sur « Démarrer », nous voyons commencer apparaître immédiatement, et après deux secondes et demie, nous voyons les événements passer. Si je clique à nouveau sur « Démarrer », nous voyons commencer apparaître immédiatement à nouveau. L' opérateur StartWith n'est probablement pas l'opérateur le plus commun, mais c'est très utile. J' ai un bon nombre d'endroits où j'ai réellement utilisé ceci dans mon code. se voit dans la vidéo suivante. 28. Opérateurs personnalisés: Salut là. Bienvenue à ce cours sur Master RXJS 6 Sans Breaking a Sweat. Dans cette vidéo, nous allons jeter un oeil à la création d'opérateurs personnalisés. Créer des opérateurs personnalisés est assez facile et très utile. La meilleure façon est de commencer avec l'un des opérateurs standard. Si vous faites vraiment quelque chose qui est plus la spécialisation de l'un des opérateurs standard. Commencez leur réutilisation à et vous avez fini très rapidement. Si vous avez besoin de plus de flexibilité, grader et observable en utilisant le point observable create est la voie à suivre. Jetons donc un coup d'oeil au code. Ici, j'ai l'exemple que nous avons fait avant quand nous filtrions sur les nombres premiers. J' utilise essentiellement l'opérateur de filtre, vérifiant les nombres premiers et c'est la fonction que nous appelons en fait. Ça marche comme un charme. Supposons que nous voulons utiliser est prime plus comme un opérateur au lieu de quelque chose que nous appelons dans le filtre. Alors utilise-le comme ça. Si j'essaie de l'appeler comme ça, nous aurons une erreur d'exécution. Ce n'est pas encore un opérateur, c'est juste une fonction simple. Mais transformer cette fonction en opérateur est assez simple. Nous commençons par importer l'opérateur de filtre et nous revenons simplement à l'opérateur de filtre avec les paramètres nécessaires. Dans ce cas, il obtient le numéro en cours de transmission. et nous retournons si ce nombre est un nombre premier ou non. Cela fonctionne exactement comme vous vous attendez. Vraiment simple. Fondamentalement, tout ce que nous avons fait est juste déplacé vers l' opérateur de filtre de l'intérieur du tuyau vers une fonction séparée où il est réutilisable. Supposons que vous ayez besoin d'être un peu plus flexible et que l'utilisation de l'opérateur standard ne le coupe pas, nous pouvons commencer par utiliser la création de points observables, encore une fois exporte une fonction mais maintenant nous allons utiliser observable pour créer, pour s'abonner à l'observable parent. Donc, la source de paramètre est une source observable que nous allons utiliser et ensuite point observable créer redémarrages, abonner à des points et écouter l'événement et émettre tout ce que nous voulons émettre. Dans ce cas, tous les nombres premiers. Nous implémentons donc le premier paramètre pour nous abonner au gestionnaire suivant. Chaque fois qu'un nombre est émis, nous vérifions si c'est un premier et si c'est le cas, nous l'émettons à nouveau sur cet observateur. Corrigé ma faute de frappe et les artistes, on retrouve les nombres premiers. C' est presque correct. La chose qui manque est de gérer l'erreur et les faits que l'observable fermer. Ajoutons le gestionnaire d'erreurs et le gestionnaire Complete comme deuxième et troisième paramètre. Encore une fois, nous allons tout transmettre à l'observable suivant. Pas besoin de gérer quelque chose de spécifique ici et tout fonctionne encore. Dans ce cas, nous ne faisons rien avec des erreurs ou des compléments. Donc, nous ne voyons pas de différence lors de l'exécution. Créer des opérateurs observables personnalisés est vraiment facile. Si vous pouvez réutiliser un opérateur standard, bon pour vous, faites-le, c' est le moyen le plus simple. Sinon, il suffit de créer un nouvel observable et émettre tout ce que vous voulez émettre à partir de l'entrée. Possibilité de mettre à jour les valeurs de filtrage, ou peut-être d'émettre encore plus d'éléments. Rendez-vous à la prochaine vidéo. 29. Tester les opérateurs et les observables: Salut Maurice ici. Nous reviendrons à ce cours sur Mastering RXJS 6 sans briser une sueur. Donc, dans cette vidéo, nous allons jeter un oeil à l'opérateur de test et des flux observables. Dans certains cas simples comme l'opérateur de nombre premier, un simple test unitaire standard fera réellement l'affaire. Mais dans de nombreux cas, ce n'est pas tout à fait suffisant et nous en voulons plus. C' est donc une bibliothèque vraiment utile sur npm appelée marbles RxJS, qui est une bibliothèque de test de billes. Ainsi, vous pouvez décrire le flux que vous attendez comme un diagramme de marbre. Vous pouvez réellement tester si l'observable résultant est ce que vous attendez. Vraiment facile à utiliser et cela a fonctionné avec beaucoup de cadres de test différents. Je vais utiliser Jest, mais cela fonctionnera aussi bien avec Jasmine ou EVA ou Moka. Jetons donc un coup d'oeil au code. Ici, j'ai deux opérateurs principaux que nous avons créés dans la vidéo précédente. J' utilise la version simple, juste étendre l'opérateur de filtre et juste comme un rappel, quand je l'exécute, je clique sur Démarrer, nous voyons tous les nombres premiers apparaissent. Super. Alors écrivons un test unitaire pour cela que je viens de mettre en place. Donc, si je lance ceci et j'ajoute le tiret, tiret Schwartz options, donc reste actif 14 aux fichiers source et nous exécutons des tests au besoin. On peut commencer à tester. Donc, vous pouvez voir qu'il y a déjà un fichier de test il est amorcé pour tester tous les plaisanteries mais il n'y a pas de test dedans, donc juste échoue en fait. Il s'attend à un minimum d'un test. Faisons d'abord la chose simple, vous les opérateurs RXJS standard et les observables et les capacités de test Jest. Donc, aucune bibliothèque supplémentaire n'est requise. Donc, nous allons utiliser la plage pour créer une plage de nombres et je vais utiliser pour réduire l'opérateur, pour réduire cela en un seul tableau que nous pouvons tester. Donc, nous allons créer une plage à partir d'un avec le numéro cinq est la fonction première et nous allons l'utiliser pour réduire cela en un seul tableau. Notre abonnement ne se déclenchera qu'une seule fois avec des résultats complets. Donc, testons si le tableau premier résultant est égal à un tableau connu. Nous allons donc ajouter les nombres 1, 3, 5, 7 et 8. Donc, nous avons en fait un test échouant ici parce que 1 et 8 ne sont pas des numéros primaires. Cependant, si nous regardons une sortie Jest, nous voyons le test et il passe. Ça n'échoue pas. Pourquoi c'est ça ? Eh bien, le test est asynchrone. observables sont asynchrones, de sorte que l'attente se termine après les tests comme déjà terminés. Donc, en ajoutant le « Ne pas rappeler », nous pouvons vraiment nous assurer que Jest attend que notre test se termine. Maintenant, nous voyons un test qui échoue. Nous pouvons voir que 1 et 8 ne sont pas attendus mais le nombre 2 était attendu parce que c'est un nombre premier. Mettons à jour l'attente. Changez 1 à 2 et supprimez 8 et nos tests vont réussir. Il fonctionne Jest et les rapports sont des tests en vert. Super. Maintenant, un cas simple comme celui-ci, cela fonctionnerait réellement, mais si nous voulons tester un peu plus que cela ne va pas le couper. Une bibliothèque vraiment utile lors du test des opérateurs RxJS et des flux de billes RxJS. Importons donc des billes et créons un nouveau test, test Pour les nombres premiers jusqu'à 10. Nous avons un nouveau test, mais au lieu de fournir un rappel, nous allons envelopper le rappel à l'intérieur de la fonction marbre. Cela nous donnera un contexte qui nous permettra de créer des observables et de tester des observables. Donc, en utilisant context.cold, je peux créer un observable froid et ici je décrit à quoi mon observable devrait ressembler. Donc, chaque position est une fenêtre de 10 millisecondes. Donc nous allons attendre 10 millisecondes, émettre 1, attendre encore 10 millisecondes, émettre 2 etc. Tout le chemin jusqu'à 9 poids, 10 millisecondes, puis le tuyau vertical signifie fermer l'observable. C' est donc nos numéros d'entrée observables. Nous pouvons créer l'attente semblable. Donc, les nombres premiers observables. C' est la même chaîne, sauf maintenant nous allons passer à un pour le 6 à 8 et le 9 parce que ce ne sont pas des nombres premiers. Donc maintenant, je peux créer un flux observable résultant en utilisant le tuyau est opérateur premier sur le nombre d'observables et cela ne devrait retourner que des nombres premiers. Donc, en utilisant le point de contexte attendu, nous pouvons tester si ces résultats sont notre nombre premier attendu observable. Il court Jest et nous avons un test de réussite. Maintenant, j'aime toujours avoir un test qui échoue. Peu paranoïaque, je voulais voir mon test échouer. C' est assez facile d'écrire des tests qui n'échouent pas. Donc, nous allons enregistrer neuf comme nombre premier inattendu, ce qui bien sûr ce n'est pas et nous voyons le test échouer avec le nombre neuf de plus émis mais attendu exactement comme nous le prévoyons. Alors retirez-le et notre test est à nouveau vert. Donc, ces fonctionne mais est assez simple. En fait, si nous voulons commencer à émettre des nombres plus élevés, nous ne pouvons pas le faire de cette façon parce que chaque chiffre à l'intérieur du flux de marbre est quelque chose émis. Donc, si nous voulons émettre un nombre plus élevé, nous pouvons le faire, mais nous devons ajouter un second paramètre au contexts.cold lorsque nous créons l'observable, qui est la valeur réelle. peu de gradation des valeurs objet avec A étant 11, b 12, etc. Ensuite, dans context.cold, je vais émettre A, B, C, D, E et quand un A va être émis, il voit qu'il y a une valeur, A sur l'objet values, et il émettra effectivement la valeur au lieu de deux chiffres répertoriés. De cette façon, nous pouvons émettre tout ce que nous voulons. Ainsi, nous pouvons créer les premiers attendus observables de la même manière. Avec bien sûr, B, D et E ne sont pas des premiers parce que 12, 14 et 15 ne sont pas des premiers, donc seuls A et C sont restés. Maintenant, quand on fait le test en utilisant Jest, ça passe. C' est vraiment agréable, passons un instant de la simple implémentation à l'opérateur en utilisant observable.create. Nous voyons que le test passe toujours. Mais maintenant, si j'oublie ou fais une erreur avec l'achèvement, notre test échoue aussi, car avec la barre verticale dans l'observable, cela indique en fait la fermeture d'un flux. Donc, il s'attend à une fermeture, mais cela n'arrive pas parce que nous avons fait une erreur dans notre opérateur et que notre test échoue. Nous ne testons pas dans des conditions d'erreur, mais si nous le faisions, exactement la même chose se produirait. Alors répare ce cordon et le test est à nouveau vert. La création de tests unitaires standard peut donc être utile. C' était utile dans un cas simple comme celui-ci. Mais dans de nombreux cas où vous voulez tester plus qu' un seul opérateur avec la valeur unique, alors vous avez besoin d'un peu plus dans la bibliothèque de marbre RxJS le rend vraiment facile. Travaillez avec beaucoup de bibliothèques de test différentes. Fonctionne sur des chaînes observables, pas seulement un seul opérateur, et rend vraiment facile de tout tester. Alors on se voit dans la prochaine vidéo. 30. Introduction aux scénaristes: Salut, Maurice ici. Bienvenue au cours sur Master RXJS 6 Sans Breaking A Sweat. Dans cette section, nous allons jeter un oeil à différents scénarios où vous pourriez vouloir utiliser AJAX et comment l'appliquer. Un couple des différents scénarios que nous allons examiner est la gestion des erreurs, recherche incrémentielle avec des requêtes AJAX, où nous voulons empêcher la duplication des demandes et le déplacement des fichiers vers beaucoup, interroger périodiquement une API AJAX et affichage des résultats, création d'une application de type banque ou utilisation d'un magasin de données de type Redux. Il peut y avoir des scénarios très différents qui vous intéressent, et certains d'entre eux je n'ai peut-être pas couvert. Si tu me le fais savoir. Envoyez-moi un message. Laissez un commentaire sur le forum Q&R. Ensuite, je pourrais juste ajouter ces scénarios. Si c'est une chose intéressante pour les autres utilisateurs et que j'ai le temps, je vais certainement l'ajouter. Faites-moi savoir ce qui vous intéresse. Rendez-vous dans la prochaine vidéo quand nous commencerons avec le premier scénario. 31. Éviter les erreurs de remplir un observable: Salut, Maurice ici. Bienvenue à ce cours sur Mastering RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil sur la façon dont nous pouvons détecter les erreurs qui empêchent les flux observables d'être terminés. Par défaut, si une erreur se produit à partir d'un flux observable, il va émettre cette erreur et proche de la chaîne. En utilisant l'opérateur catch, nous pouvons réellement attraper ces erreurs et remplacer le flux par un nouveau flux. Mais votre flux d'origine va toujours être fermé. Rien que tu puisses faire à ce sujet. En combinant plusieurs flux, nous pouvons réellement récupérer de cela en fermant un flux secondaire et en maintenant le flux original en cours d'exécution. Jetons un coup d'oeil à un code. Ici, je gère l'événement click à partir d'un bouton, généralement à partir du gestionnaire d'événements et j'utilise l'opérateur de carte de fusion pour fusionner dans un nouveau flux, qui a écrit une erreur, signalant que quelque chose de mauvais s'est passé. Si je clique sur Démarrer, nous pouvons voir l'erreur ou quelque chose de mauvais se produit, puis quand j' efface et essaie de recommencer, rien ne se passe. Le flux observable original de l'événement a été fermé. Introduisons l'erreur de capture. L' endroit où nous ajoutons ceci est important. Si j'ajoute ceci au tuyau à partir du flux de clic d'origine, il va attraper l'erreur, mais il va toujours fermer ce flux. Avec l'erreur catch, nous retournons une nouvelle chaîne. Dans ce cas, je vais retourner la chaîne avec un seul événement. Nous voyons que le flux observable n'a plus d'erreur mais terminé. Si j'efface et recommence, rien ne se passe parce que c'est encore terminé. Dans ce cas, nous voulons attraper l'erreur sur le flux où elle s'est produite et non sur le courant principal. Sur le flux qui produit l'erreur. Maintenant, si je clique sur Démarrer, nous voyons le message de l'opérateur de capture mais nous ne voyons pas le flux d'origine se fermer et si j'efface, nous pouvons appuyer à nouveau sur Démarrer et nous verrons un nouveau message de l'opérateur de capture afin que le la chaîne d'origine est restée ouverte. Gardez à l'esprit que toute erreur complétera le flux qu'ils se sont produits en utilisant catch error, vous pouvez attraper l'erreur, mais il se ferme toujours pour diffuser. Combinez plusieurs flux en utilisant une carte de fusion ou une carte de commutation, ou l'un de ces opérateurs afin de garder le flux d'origine ouvert et de gérer les erreurs. se voit dans la vidéo suivante. 32. Réessayer des erreurs: part principale. Bienvenue au discours avec le rassemblement des RG 6 sans casser une sueur. Donc, dans cette vidéo, nous allons jeter un coup d'oeil à réessayer les actions qui ont produit périr. Ainsi, certaines actions peuvent produire des erreurs, qui sont réparables par une simple nouvelle tentative. Non au saignement. Requêtes Ajax. Si je fais une requête http, récupération des données du shérif pour ce serveur peut être temporairement interrompue ou ma connexion Internet a pu échouer. Je suis peut-être sur l'appareil mobile en train de faire le tunnel de l'équipage ou quelque chose comme ça. Donc là, pour les opérateurs que nous pouvons utiliser pour réessayer, était de réessayer, ce qui le fait immédiatement pour un certain nombre de tonnes. Et le mystère. Essayez Win Operator, qui prend une chaîne imbriquée et observable et réessaiera lorsque ce flux national observable se terminera. Donc, les requêtes Ajax étrangères font une nouvelle tentative immédiate. C' est typiquement nouveau, pas la meilleure idée, parce que ça ne va pas s'arrêter. Il va envoyer plusieurs requêtes au serveur très rapidement. Et si le serveur échoue parce qu'il est occupé, est peu probable que cela aide. Donc, réessayez quand avec une légère force, est généralement une meilleure approche. Jetons un coup d'oeil à un manteau. Avoir un bon manteau de temps quand nous cliquons Je fais un Ajax dit agitation à une demande A P I. Cela n'existe pas réellement, aller à mon serveur et proposer quelque chose qui n'existe pas. Donc ça va se sentir avec un 40 pour les fonds du Nord, pas encore de traitement de l'air. Donc, si je clique sur le bouton Démarrer, nous voyons la demande se produire et échouer avec les fonds 404 Nord. Si je clique à nouveau, aucune autre requête n'est faite comme l'observable est la mort. Donc, nous allons importer pour réessayer l'opérateur et vous que tout d'abord, tout comme attraper les erreurs. L' emplacement où vous essayez dans la chaîne est important. Si je devais réessayer après la carte de commutation et que je clique sur Démarrer, la seule chose qui va arriver est que nous allons réessayer de changer de carte qui ne fait rien pour utile. Si je clique plusieurs fois, nous pouvons voir finalement que pour demander se sent donc dans ce cas, nous voulons réellement essayer d'obtenir Jason. Donc, nous devons ajouter à la fonction pipe là et réessayer à cela Donc le gadge asiatique est réessayé . Maintenant, si je clique sur Démarrer, vous voyez quatre demandes en succession rapide, une demande initiale et trois rétentatives. Mais comme je l'ai dit, ce difficile n'est pas la meilleure approche avec les requêtes Ajax. Donc laisser l'habitude de réessayer un chef de winrow à nouveau, le show aérien affaiblit très notre comportement, fonction de l'erreur. Dans ce cas, je vais juste utiliser Interpol et émettre une fois par seconde. Ce qui signifie que la station de get sera réessayée une fois par seconde. Donc, lorsque je clique sur Démarrer, nous voyons plusieurs demandes se produire. Fondamentalement demander toutes les secondes, et il continue juste. Ça ne va jamais les gens. C' est parce que l'intervalle ne prend pas. Donc, si nous voulons limiter le nombre de réessayer. Nous avions l'habitude de prendre coopérateur et nous prenons juste les 3 premiers événements donc nous allons faire une demande initiale , puis trois demandes de retour Try avec des secondes entre les deux. Il y a quatre demandes. Non, si je clique à nouveau sur recommencer. Il n'a pas senti la chaîne observable, donc il recommence à faire des requêtes. Alors quoi ? Certaines erreurs Réessayer est une stratégie très utile, en particulier Ajax. Demande d'utilisation pour réessayer lorsque l'opérateur est généralement la meilleure approche. Alors on se voit dans la prochaine vidéo 33. Recherche par Incremental: Salut, Maurice ici. Bienvenue à ce cours, Mastering RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un oeil à faire une recherche incrémentielle en tapant dans une zone de texte, puis en filtrant certaines données sur un serveur AJAX. Nous commencerons par un événement DOM, nous allons le mettre en correspondance dans la valeur qui nous intéresse. Nous allons faire une requête AJAX et il affichera le résultat et nous ajouterons un peu agréable d'avoir des fonctionnalités comme la limitation du nombre de requêtes, filtrage des erreurs et des requêtes invalides, etc. Tout ce qui est relativement facile à faire avec RXJS. Jetons un coup d'oeil à un code. Ici, j'ai la surface que nous allons utiliser, c'est une API GitHub qui nous permet de récupérer les utilisateurs en fonction de leur nom d'utilisateur. Voici l'exemple lorsque je recherche Torvalds. Voici ce que nous allons commencer, avons une entrée de recherche et chaque fois que nous tapons, nous voyons les événements en cours d'impression sur la console. Nous utilisons les événements de formulaire et appuyez pour y parvenir. Nous ne sommes pas intéressés par tout l'événement, juste le nom réel. La première chose que nous allons faire est d'utiliser l'opérateur de carte pour extraire la valeur réelle de l'événement et là nous voyons les valeurs en cours d'impression. Actuellement, nous obtenons une sortie pour chaque changement effectué, tous les types de caractères et si nous transformons chaque type de caractères en une requête Ajax, nous utiliserions l'API GitHub assez lourdement et tous les résultats intermédiaires sont ne va pas être affiché de toute façon. Utilisons la fonction de temps de débogage pour empêcher de faire une requête Ajax jusqu'à ce que l'utilisateur ait mis en pause une seconde. Maintenant, si je tape mon nom, vous ne voyez les sorties qu'après que j'ai mis une pause pendant une seconde. Si j'efface la sortie et tapez Torvald, nous voyons Torvald, puis après une pause et puis si je tape DS, nous voyons les Torvalds complets mais toujours après une pause. Transformons cela en une requête Ajax. Nous allons utiliser un opérateur de carte de commutation pour transformer le nom d'utilisateur en une demande de recherche sur l'API GitHub. Maintenant, si j'ouvre l'onglet Réseau et je tape mon nom dans la zone de saisie, je vois vos demandes à GitHub pour mon utilisateur et si je le change en Torvalds, nous voyons une autre demande. Super, donc la réponse que nous recevons a une propriété items et nous ne sommes intéressés que par les éléments, alors cartographions cela et rejetons le reste de la réponse. Maintenant, nous voyons juste un tableau d'éléments mais nous voulons réellement traiter les utilisateurs un par un, afin d'afficher une interface utilisateur. Utilisons la carte de fusion, qui transforme une collection d'un tableau d'utilisateurs en événements individuels des utilisateurs. Si je tape mon nom, nous voyons une liste d'utilisateurs en cours d'émission. Il est en fait rare de coder et de s'abonner donc nous obtenons une bonne interface utilisateur. Nous obtiendrons la carte d'amorçage pour chaque utilisateur retourné. Si je tape mon nom, nous me voyons sur le deuxième élément et d'autres. Maintenant, si je tape Torvalds, la requête est faite mais elle est fondamentalement ajoutée à la liste, nous voulons un peu d'effets secondaires. Avant de rechercher, nous voulons réellement effacer les résultats, nous allons utiliser l'opérateur de profondeur pour définir le HTML interne du div de résultat à vide, sorte que le résultat précédent est effacé. Maintenant, si je tape mon nom, nous voyons moi et d'autres utilisateurs avec des noms similaires, mais si je tape Torvalds, nous pouvons effectivement voir Linus Torvalds et d'autres personnes avec un nom similaire. Un autre problème est, si je fais quelques modifications mais que je finis avec la même valeur après une seconde, donc je vais supprimer le S et l'ajouter à nouveau. Nous avons effectivement créé une deuxième requête qui est exactement identique à la requête précédente, donc en utilisant l'opérateur distinct jusqu'à ce que le changement, nous pouvons empêcher que cela n'émette pas la même valeur dans l'ordre. Si je recherche Torvalds, nous pouvons voir Linus mais si je supprime le S et l'ajoute, nous ne faisons pas une autre requête. Seulement jusqu'à ce que je change réellement la valeur que nous avons recherchée et pause assez longtemps pour que les requêtes se déclenchent, que nous faisons une demande. Si j'ai supprimé une valeur, nous voyons qu'il y a effectivement une erreur de la requête Ajax. Maintenant, si je tape, rien ne se passe, nous avons tué l'observable, nous devons ajouter un peu de gestion des erreurs à nouveau. Seulement obtenir JSON, j'utiliserai l'opérateur de tuyau et l'opérateur d'erreur de capture pour le transformer en une souche différente et dans ce cas, je vais juste utiliser une chaîne vide car il n'y a rien à voir. Cela va attraper l'erreur sur le flux Ajax et garder le courant standard intact. Maintenant, si je cherche Linus, je le trouverai, si je le vide, demande est faite mais une erreur est renvoyée. Si je tape mon nom, l'observable était toujours correct, nous pourrions toujours chercher. Pourtant, il est préférable d'éviter cette erreur. L' erreur est en fait le résultat d'une recherche avec un nom d'utilisateur vide, donc nous allons utiliser l'opérateur de filtre pour empêcher la recherche de noms d'utilisateur vides. Nous allons utiliser l'opérateur double note pour nous assurer que l'utilisateur n'est pas vide. La recherche de mon nom, nous obtenons les résultats, vide les choses, l'écran est vide mais nous ne faisons pas de requête Ajax. Plutôt cool. Faire une recherche incrémentielle en utilisant RxJS est assez facile. Nous avons utilisé une poignée d'opérateurs, mais ils ont tous joué ensemble très bien et géré tout l'état pour nous beaucoup plus facile que de le faire avec un code impératif. J' aime vraiment utiliser RXJS dans des cas comme celui-ci. se voit dans la vidéo suivante. 34. Pollution des demandes Ajax: Hé, Maurice ici. Bienvenue à ce cours avec Master RxJS6 Sans Breaking A Sweat. Dans cette vidéo, nous allons rapidement jeter un oeil à la création de requêtes Ajax d'interrogation. Nous allons faire des requêtes Ajax et nous allons continuer à répéter les demandes sur un intervalle temporel pour montrer à l'utilisateur les dernières données. Mais nous allons commencer par un événement de minuterie, et comme dans la vidéo précédente, nous allons faire une requête Ajax et afficher les résultats. Jetons un coup d'oeil au code. C' est ce que nous allons utiliser un jeu de données, base de données Chuck Norris. Il a une API RESTful où nous pouvons obtenir l'ensemble des blagues aléatoires Chuck Norris. Dans la vidéo précédente, nous avons utilisé des événements pour commencer à demander. Maintenant, vous pensez peut-être que nous allons commencer par l'intervalle, mais si nous utilisons l'intervalle, vous verrez que nous devons réellement attendre. J' ai spécifié cinq secondes et cela prend effectivement cinq secondes avant que la première requête soit faite. Une meilleure façon de démarrer est avec la minuterie, avec la minuterie, vous pouvez spécifier le temps d'attente initial 0 millisecondes, puis éventuellement combien de fois il devrait être répété, donc j'utilise cinq secondes pour l'intervalle de répétition ici. Dès que la page se charge, il déclenche une requête Ajax obtient les dix premières blagues, puis toutes les cinq secondes, il répète cela, donc assez agréable. Créer une requête Ajax interrogation est assez facile, Assez similaire à le faire sur l'événement click ou quelque chose de similaire. Nous utilisons à peu près les mêmes opérateurs que la dernière vidéo, l'ajax, CatchError, l'Empty, MergeMap, SwitchMap, tap et dans ce cas nous avons commencé les choses avec la minuterie. se voit dans la vidéo suivante. 35. Dessiner sur une toile: Salut, Maurice ici. Bienvenue à ce cours sur Master RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil au dessin sur la toile. Nous avons déjà dessiné certains sur la toile, mais maintenant nous allons le rendre un peu plus explicite. Nous commencerons à dessiner quand nous appuyons la souris vers le bas. Nous allons continuer à dessiner tant que la souris est en bas et que nous passons à la souris. Mais avec la souris vers le haut, ou quand nous quitterons la toile, nous arrêterons de dessiner. Jetons un coup d'oeil au code. Pour rappel, voici la toile que nous avions avant. Si je déplace la souris dessus, on dessine. C' était le code original, et nous avons essentiellement commencé avec les événements de déplacement de la souris, et nous avons commencé à dessiner. Maintenant, nous voulons être un peu plus explicite. Nous attendons nos événements de souris vers le bas, et seulement avec la souris vers le bas, nous commençons à dessiner. Ajoutez un autre flux observable pour l'événement mouse down, et nous allons en fait nous abonner à cela. Nous allons utiliser un opérateur de carte de commutation pour passer de la souris vers le bas à la souris déplacer flux observable chaque fois que la souris est terminée. Maintenant, si je bouge la souris, rien ne se passe, mais dès que je souris vers le bas, je commence à dessiner. Sauf que quand je relâche la souris, elle continue à dessiner. Il faut encore arrêter de dessiner. Nous allons ajouter un troisième flux observable pour les événements de souris vers le haut. Nous allons importer prendre jusqu'à l'opérateur, et nous allons prendre les événements de déplacement de la souris jusqu'à ce que nous obtenions une souris vers le haut événements. Maintenant, assurez-vous d'ajouter la prise jusqu'à ce que dans le flux d'événements de déplacement de la souris sinon, nous arrêterons tout le flux d'événements. Nous voulons juste arrêter le mouvement de la souris et toujours écouter les bas de la souris pour commencer de nouveaux événements de dessin. Maintenant, je peux dessiner, je peux arrêter de dessiner, et tout va bien. C' est jusqu'à ce que ma souris quitte la toile. Même si je relâche le bouton de la souris à l'extérieur de la toile, il continue à dessiner. Si je quitte la toile, nous avons aussi besoin de parler dessin. Je vais créer un observable pour la souris. Ajouter arrêter en utilisant la prise jusqu'à l'opérateur. Maintenant, le dessin s'arrête quand ma souris quitte la toile. Plutôt doux. Le dessin est assez facile. Nous avons déjà le code de dessin de base. En utilisant la carte de commutation et la prise jusqu'à l'opérateur, nous l'avons rendu plus explicite. Ne commencez à dessiner que lorsque la souris est descendue et arrêtez de dessiner lorsque la souris monte, ou nous quittons la toile. Rendez-vous à la prochaine vidéo. 36. Peinture: Salut Maurice ici, bienvenue à ce cours sur Mastering RxJ6 sans casser une sueur. Dans cette vidéo, nous allons continuer avec le Canvas et nous allons étendre le dessin pour inclure des fonctionnalités plus semblables à la peinture. Nous allons commencer avec l'exemple de dessin de la dernière vidéo, et nous allons ajouter des observables pour spécifier la couleur et la taille de la ligne de notre dessin. Nous avions l'habitude de combiner dans les opérateurs withLatestFrom pour les insérer dans le flux observable. Jetons donc un coup d'oeil au code. Donc, c'est essentiellement notre exemple précédent où nous pouvons dessiner sur la toile. Mais j'ai inclus les entrées de couleur et de ligne. Mais pour l'instant, ils ne font rien encore. Alors commençons avec la couleur. J' ai une référence à l'entrée appelée style de trait. Nous allons donc créer un nouveau flux de style de trait en utilisant FromeVent et nous allons écouter InputEvent. Donc, j'utilise le contrôle d'entrée de couleur HTML5 standard là-bas. Donc, nous sommes seulement intéressés par la valeur show tous utiliser l'opérateur de carte pour obtenir la valeur de l'entrée. Comme on l'a fait une douzaine de fois auparavant. Maintenant, je veux injecter ça dans le flux, nous avons écouté pour la peinture. L' opérateur si pratique à utiliser il y a withLatestFrom, où je peux combiner différentes chaînes d'entrée en un seul flux. Alors je vais les combiner. flux MouseDown, qui est un flux StrokeStyle, et le second paramètre est la fonction pour combiner les différentes valeurs, pas intéressé par un événement MouseDown, donc nous allons ignorer cela, et prendra le style de course et tourner que dans un objet d'options qui doit tracer le style ajoutera plus à cela plus tard. Elle est maintenant dans la carte de commutation, nous obtenons cet objet d'options avec notre style de course. Donc, je vais ajouter cet objet 2D créé, ce qui signifie que c'est juste comme pour former des objets. Donc, je vais saisir les options à partir de là dans l'abonnement et définir le style de contour de contexte, faire le style de trait que nous avons spécifié. Donc maintenant, si je sélectionne la couleur, rouge par exemple, je peux dessiner une ligne rouge. Le seul problème si je rafraîchis la page et je commence à dessiner, rien ne se passe, parce que nous n'avons pas encore de couleur initiale. Donc, nous devons rendre le flux de style de course un peu plus intelligent. Vous devez spécifier qu'il commence par la valeur initiale de l'entrée. Donc, nous allons juste spécifier la valeur initiale là, et maintenant il commence avec la valeur afin que nous puissions dessiner tout de suite. On peut dessiner une ligne noire, et maintenant je peux la changer en bleu et on peut dessiner une ligne bleu clair ou plus violet. Douce. Faisons la même chose avec le lineWidth. L' approche est la même, donc je vais juste copier cette chaîne de style de trait et changer les variables pour utiliser une LineWidth. Remarque L'opérateur withLatestFrom est vraiment pratique. Nous pouvons utiliser autant de flux d'entrée que nous le voulons. Nous allons donc ajouter le flux LineWidth à cela et l'ajouter aux objets d'options. Maintenant, dans notre abonnement, je peux juste définir le lineWidth sur le contexte, simple. Maintenant, on peut juste commencer à peindre. Mais si je fais à la ligne un peu plus grande, on aura une ligne plus grosse. Si j'ai changé la couleur en rouge, on a la grosse ligne rouge, Nice. Donc [inaudible] nous sommes des experts. Je n'aime pas dupliquer cette chaîne d'entrée. Mais nous allons créer une petite fonction d'aide, obtenir la chaîne d'entrée et nous allons passer dans les éléments DOM et il retournera un flux de ses valeurs utilisées pour les éléments passés, et maintenant le flux de style de trait est le résultat de l'appel get input chaîne. Nous ferons la même chose pour le flux LineWidth, et tout fonctionne toujours. Belle petite fonction d'aide. Donc, ajouter de la peinture comme une fonctionnalité est assez simple. Nous ajoutons juste des entrées pour prendre la propriété que nous voulons et nous allons utiliser pour StartWith et le withLatestFrom pour saisir la valeur et les intégrer dans le flux que nous avons utilisé pour peindre, doux. Alors on se voit dans la prochaine vidéo. 37. Partager des abonnements abonnements: Salut, je suis [inaudible]. Bienvenue à ce cours sur Master RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons jeter un coup d'œil sur le partage d'abonnements. Parfois, vous devez partager l'abonnement parce que dans la plupart des cas, chaque fois que vous vous abonnez à un observable, il créera un nouvel observable et exécutera à nouveau tout le code dans l'observable. Ce n'est pas toujours le cas, mais dans la plupart des cas, c'est le cas. L' opérateur de partage vous permettra réellement partager tout le code dans un observable. Il n'est donc exécuté qu'une seule fois pour chaque abonnement. Ça le rend plus rapide. Jetons un coup d'oeil à un code pour un exemple. Ici, j'ai encore notre exemple de récupération où nous recherchions noms d'utilisateur sur GitHub et j'ai tapé Torvalds. Nous voyons une liste d'utilisateurs apparaissent et une seule requête Ajax en cours. Une partie de la demande est le nombre d'utilisateurs renvoyés, le nombre total. Donc, si j'inclus cela dans les comptes de résultats, maintenant nous voyons qu'il y avait en fait deux Ajax Rsequests faits. C' est parce que s'abonnaient au flux d'événements deux fois. Donc, tout est exécuté deux fois, y compris le code Ajax. Maintenant, c'est un peu de gaspillage, alors faisons un seul code Ajax pour obtenir les deux résultats à partir de ce code. Nous allons importer l'opérateur de partage, et nous ajouterons l'opérateur de partage au tuyau. Rappelez-vous que vous ajoutez ceci aux points où tout avant que vous voulez partager entre tous les abonnements. Donc, je l'ajoute après le code Ajax dans ce cas. Maintenant, si je recherche Torvalds, nous obtenons le nombre total d'utilisateurs 126 et la liste des utilisateurs avec une seule requête. Si je recherche à nouveau mon nom, une seule demande pour le nombre total, et les utilisateurs eux-mêmes, beaucoup mieux. Parfois, il est préférable de partager des observables si vous faites plusieurs abonnements. Ce n'est pas toujours nécessaire, mais très souvent c'est le cas. Dans ce cas, il était très clair que la requête Ajax était faite plusieurs fois. Ce n'est pas toujours aussi clair. Fondamentalement, l'opérateur à utiliser est le partage. Il y a une relation avec l'opérateur ShareRePlay, qui est un peu plus avancé et qui se souviendra réellement valeurs et les réémettra lorsque de nouveaux abonnements sont faits. On va l'utiliser dans une autre vidéo. se voit dans la vidéo suivante. 38. Redux comme le magasin: Salut, Maurice ici. Bienvenue sur la partition de Master RXJS 6 Sans Breaking A Sweat. Dans cette vidéo, nous allons jeter un oeil à la création d'une banque de données simple comme Redux. Redux est un conteneur d'état prévisible pour JavaScript. Très populaire, en particulier dans le monde React et est très capable et extensible. On ne va pas le rendre aussi avancé. Nous allons faire une implémentation très basique dans RXJS parce que c'est en fait assez simple à faire. Jetons un coup d'oeil au code. C' est le site Redux réel, donc le conteneur d'état prévisible pour JavaScript. Vous en apprendrez plus à ce sujet, je vous recommande fortement de visiter ces sites. Pour un démarreur, j'ai une petite application avec un incrément et un bouton de décrémentation et un ajout 10. Ici, vous voyez le code, les gestionnaires d'événements pour les incréments et les décréments. Vous voyez que nous importons un réducteur et une fonction CreateStore, et nous appelons le CreateStore éventuellement dans le réducteur. Ensuite, nous nous abonnons au magasin et nous affichons réellement les états actuels sous forme de chaîne JSON formatée. Nous souscrivons également aux différents boutons et actions d'envoi. Vous pouvez voir les actions qu'ils sont essentiellement des objets avec un type indiquant le type d'action, et dans certains cas comme dans l'add 5, il a une charge utile contenant des données supplémentaires. Dans un scénario Redux typique, ces actions sont créées en utilisant des fonctions d'assistance, mais pour garder cet exemple simple, je n'ai pas pris la peine de le faire. Mais cela le rend plus fiable et plus testable, donc fortement recommandé que vous le faites. Réducteur est vraiment simple. Il écoute essentiellement les actions et retourne un nouvel état chaque fois que l'action modifie l'état. L' un des principes fondamentaux est les données immuables. Vous ne changez jamais l'état, vous créez toujours un nouvel objet d'état. C' est ce que je fais dans les fonctions d'incrémentation et de décrémentation. Je crée essentiellement une copie de l'objet d'état, définissant le nombre, dans ce cas il n'y a rien de plus dedans, donc assez simple. Mais s'il y avait plus de données dedans, il sera conservé et le compte JSTOR serait mis à jour. L' instruction switch comme celle-ci n'est pas très fonctionnelle, mais c'est la façon dont le code Redux est écrit assez souvent. Je vais vous montrer comment rendre cela plus fonctionnel dans un instant, mais pour l'instant nous allons laisser cela comme une simple instruction switch. Une autre chose à noter ici est que la première fois que cela sera appelé, les états seront indéfinis et l'état initial sera défini comme l'état actuel. C' est là que cette variable d'état initial est utilisée. La signature d'une fonction de réduction est très simple et toujours la même. Il retourne essentiellement un nouvel état qui est le résultat de l'application d'une action à l'ancien état. Donc, le nouvel état est ancien état plus action. Simple. Le CreateStore est assez vide. Il y a une fonction CreateStore que nous exportons mais il n'y a rien encore là. Dans ce cas, nous voulons contrôler la façon dont les événements sont émis sorte que le sujet est un bon moyen de créer de nouveaux observables. Nous allons donc créer un flux d'action parce que c'est essentiellement un flux d'actions émises, qui est le résultat d'un sujet. Ensuite, le magasin est en fait le résultat de travailler avec l'état actuel et les actions. Nous avons utilisé un opérateur de scan pour calculer l'état actuel. Avec le scan, nous avons passé une fonction de réducteur et nous avons défini sa valeur initiale pour être indéfinie. De cette façon, le réducteur est appelé avec undefined comme premier état, ce qui provoquera à l'état initial dans le réducteur à définir. De cette façon, toute la responsabilité de ce qui est réel et comment il est mis à jour est à l'intérieur du réducteur et pas dans le CreateStore plus générique. Donc, nous retournons au magasin. Nous devons être en mesure d'envoyer des actions, alors ajoutons une fonction d'expédition au magasin. Tout ce qu'il fait est fondamentalement émet ces actions sur le flux. Maintenant, si je clique sur « Incrément » ou « Décrément », nous pouvons voir le changement d'état. La seule chose est qu'il n'y avait pas encore d'état initial. Commençons donc par émettre un événement pour initialiser l'état. Nous allons utiliser l'opérateur StartWith et avant que l'analyse ne distribue un événement. Nous l'appellerons avec le soulignement de type, dans le soulignement de soulignement. Le nom n'a pas vraiment d'importance tant qu'il est unique et il est juste destiné à initialiser l'état. Alors voyez maintenant le compte commencer par zéro. Encore une chose, c'est état à l'échelle de l'application, donc il devrait être partagé par tous les abonnements. Nous allons utiliser le SharerePlay. L' opérateur de partage de notification protège le ShareRePlay, sorte que les nouveaux abonnements obtiendront effectivement la dernière version de l'état. Nous sommes en train de passer 1 parce que nous voulons juste nous souvenir d'un dernier événement d'état, pas tous les différents événements intermédiaires. Ça marche toujours. Super. Alors rendons ce réducteur un peu meilleur. Parce que les instructions de commutation comme celle-ci sont agréables et c'est ce que vous voyez dans beaucoup d'exemples Redux. Mais nous allons le rendre un peu plus fonctionnel parce que RxJS est plus sur la programmation de style fonctionnel. Nous allons créer un dictionnaire avec des gestionnaires. J' ajouterai un gestionnaire pour l'action d'incrément. Cela ne prend que l'ancien état comme une entrée. On se fiche de l'action. Il n'y a rien d'utile là-bas. Nous allons essentiellement retourner le nouvel état à partir de là. Faites de même avec le décrément. Nous devons les mettre entre parenthèses pour qu'il renvoie cet objet, sinon il sera considéré comme un bloc de code. Alors incluons le décrément. Maintenant, nous n'avons plus besoin de changer d'instruction, mais nous pouvons faire une simple recherche dans le gestionnaire pour l'objet pour trouver le bon gestionnaire pour une action spécifique. Une fois que nous avons ce gestionnaire, nous pouvons l'exécuter avec les anciens états et l'action renvoyant le nouvel état. Maintenant, il peut y avoir des actions déclenchées que nous ne gérons pas réellement, comme ce trait de soulignement dans l'action de soulignement soulignement. Nous allons donc ajouter un gestionnaire par défaut qui retourne juste l'état actuel. Le gestionnaire est celui du type spécifié ou celui par défaut. Notre comportement est toujours le même, mais le code est plus fonctionnel maintenant. Maintenant, nous allons ajouter un nouveau gestionnaire pour l'action d'ajout. Nous allons créer un gestionnaire appelé ADD. Il faut un état. Il effectue également l'action car la charge utile de l'action indiquera combien doit être ajouté à l'état actuel. Au lieu de plus 1, nous ajoutons l'action à la charge utile. Maintenant, nous pouvons encore incrémenter et décrémenter, mais nous pouvons aussi ajouter 5. Recréer les réducteurs de cette façon est beaucoup plus agréable. Nous obtenons de très petites fonctions testables. Ces gars que je ne l'ai pas exporté mais nous pouvons juste exporter ces gestionnaires et les rendre très testables. Donc, faire la gestion de l'état dans un style Redux avec RXJS est très simple. Nous avons créé un nouveau flux en utilisant le sujet. Nous avons essentiellement utilisé un opérateur d'analyse pour calculer l'état actuel en fonction de l'état précédent et de l'action. Nous avons utilisé l'opérateur StartWith pour initialiser l'état et nous avons utilisé ShareRePlay afin que nouveaux abonnements arrivent automatiquement à l'état actuel et l'état entre tous les abonnements est partagé. Plutôt doux. Je te vois dans la prochaine vidéo. 39. Abonnements Redux Store: Salut Maurice ici. Bienvenue à ce cours sur la maîtrise de RXJS 6 sans casser une sueur. Dans cette vidéo, nous allons améliorer un peu le magasin Redux. Nous allons y ajouter des abonnements de style RxJS 6, donc nous n'avons pas à utiliser simplement des codes impératifs pour envoyer des événements. Cela s'avère assez facile parce que le sujet que nous avons utilisé pour créer un flux observable, est aussi la bonne forme pour agir en tant qu'abonné. Vous pouvez simplement pousser ces sujets en ce qui concerne l'abonnement des flux d'événements, et enchaîner les différents flux de cette façon. Jetons un coup d'oeil au code. Juste comme un rappel ici, nous avons le code précédent. J' ai un bouton d'incrément à cinq et incrément. Si je clique sur incrément, nous voyons le nombre augmenter, et la même chose avec les autres boutons. Au lieu de fusionner add event lister, je veux le faire dans un style plus réactif. Nous utiliserons les événements from pour créer un flux observable d'événements de clic, et nous utiliserons l'opérateur de carte pour créer l'objet action que nous avons distribué. Ensuite, nous voulons simplement nous abonner pour stocker à ce flux d'événements. Maintenant, je ne peux pas simplement passer au stockage, cela ne fonctionnera pas, parce que le magasin n'est pas le sujet réel. Si nous regardons créer magasin, nous voyons que le magasin est juste le résultat de l'événement de tuyauterie Struger, flux d'action, et le flux d'action, c'est celui que nous avons réellement besoin de nous abonner. Nous pouvons ajouter cela à l'exposition du magasin de cette façon, puis nous pouvons l'utiliser dans l'abonnement. Nous nous abonnerons en utilisant le flux d'action point de magasin. Maintenant, nous voyons l'incrément fonctionne toujours. Bien sûr, plus cinq et le décrément fonctionnent encore. Ils n'ont pas encore changé. Mettons-les à jour de la même manière. Copions le code et mettons à jour les objets d'action et les gestionnaires d'événements. C' est le décrément fait. C' est le plus cinq fait. Je vais voir tous les gestionnaires d'événements fonctionnent. Joli. Utiliser un style plus réactif avec RxJS est vraiment simple, car ce sont tous des flux observables que nous pouvons simplement enchaîner ensemble. Douce. Rendez-vous à la prochaine vidéo. 40. La fin: Salut, Maurice ici. Bienvenue à ce cours sur Mastering RXJS 6 sans briser une sueur. Félicitations, tu l'as fait. Vous avez atteint la fin du cours. Donc, j'espère que vous avez vu que RXJS est une excellente bibliothèque. C' est idéal pour la programmation réactive asynchrone. Utiliser des flux observables, manipuler ces flux à l'aide d'opérateurs, fusionner , filtrer des flux, transformer, etc. Beaucoup de capacités. Alors maintenant, c'est à vous de décider. Allez, construisez quelque chose de génial en utilisant RXJS, et laissez-moi savoir ce que c'est. Si c'est quelque chose de public et que je peux voir, j'aime toujours voir ce que les gens font en utilisant les techniques que je leur enseigne. C' est donc la fin de ce cours, mais il y a toujours plus à apprendre. Pour tout ce que vous voulez voir dans ce cours, pour plus de scénarios ou peut-être les opérateurs qui veulent voir couvert, faites-le moi savoir. Je les ajouterai et je vous avertirai quand c'est fait. Nous allons apprendre quelque chose d'autre sur les réactions, ou Angular, ou Gets, ou n'importe laquelle de ces choses, je suis jeu. Alors faites-le moi savoir et je vais y jeter un coup d'oeil. Alors bonne chance. Tous les meilleurs, et amusez-vous avec RxJS.