Domine o RxJS 6 sem suar a camisa

1. Introdução ao curso: Oi, Maurice aqui. Bem-vindo a esta aula sobre dominar RXJS 6 sem suar. Então, o que vamos dar uma olhada neste curso? Bem, vamos começar com qual problema RXJs está tentando resolver e então vamos dar uma olhada em RXJs e programação reativa e como isso realmente tenta resolver o problema. Vamos dar uma olhada em observáveis, um dos principais blocos de construção de RXJs. Vamos dar uma olhada no que eles são, diferentes maneiras de criá-los, criar seus próprios observáveis personalizados, usando assuntos que são uma maneira de criar observáveis e vamos olhar para a diferença entre quente e frio observáveis. É claro que vamos investigar os operadores. Sem operadores RXJs não seria tão útil. Então vamos dar uma olhada no objetivo dos operadores, como podemos visualizá-los usando RXJS Marbles. Vamos dar uma olhada em muitos dos operadores existentes, não todos eles, eles são muitos, e vamos dar uma olhada na construção de operadores personalizados para RXJs. Vamos dar uma olhada na manipulação de erros e como você poderia tentar novamente operações falhando e, claro, vamos dar uma olhada na unidade testando seus observáveis e seus operadores. Finalmente, vamos dar uma olhada em vários cenários diferentes onde RXJs pode fazer muito sentido. Coisas como buscar uma solicitação da web em uma base periódica, lidar com erros se uma solicitação falhar, tentar novamente e coisas assim. Vejo você no próximo vídeo. 2. Introdução pessoal: Oi Maurice aqui, e bem-vindo volte a este curso sobre dominar RXJS 6 sem suar. Neste vídeo, vamos fazer uma breve apresentação pessoal, então você sabe quem eu sou. Meu nome é Maurice de Beijer, e sou um desenvolvedor de software independente e treinador. Eu vivo na Holanda, lugar bonito, especialmente na primavera, com muitas flores bonitas como estas tulipas. Tem umas praias lindas, isto é Scheveningen, e temos o nosso lindo moinho de vento, especialmente ao pôr do sol como este. Todas essas fotos foram tiradas a 20 quilômetros de onde eu moro. Eu também sou feliz casado, com uma esposa e um filho. Eu sou um desenvolvedor de software independente e instrutor desde 1995. Na verdade, meus dias de desenvolvedor vão mais longe do que isso, mas foi quando eu me tornei independente, então há algum tempo atrás. A maioria dos profissionais mais valiosos da Microsoft, um MVP, um prêmio anual que recebi 14 vezes seguidas agora. Eu publico uma Newsletter React se você estiver interessado em desenvolvimentos React. Veja as notas para um link. Vejo você no próximo vídeo. 3. O problema: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Master RXJS 6 WithBreaking a Sweat. Qual é o problema com o código tradicional? Vamos mergulhar em algum código, e vamos dar uma olhada. Tenho uma amostra aqui com alguns botões. A maioria deles ainda não faz nada, apenas o botão Limpar faz. Vamos dar uma olhada nos códigos. Nós vamos fazer praticamente a mesma ação com alguns itens diferentes aqui. Vamos começar com alguns números. Vamos adicionar um ouvinte de eventos ao botão. Então vamos transformar os números em uma forma diferente. Nós vamos filtrá-los, e vamos colocar os resultados na tela. Primeira regra, use o operador de mapa em uma matriz para mudar de forma de apenas um número para um objeto com uma propriedade x, que contém o número. Em seguida, vamos usar o operador de filtro em uma matriz para retornar apenas os objetos que têm um valor x que é menor do que sete. Isso deve retornar um novo array. Vamos chamá-lo de dados. Agora vamos colocar isso na tela para que possamos ver o resultado. Há a matriz resultante de objetos com um valor. Bastante simples. Vamos fazer o mesmo usando um intervalo baseado em tempo. Novamente, vamos adicionar um manipulador de cliques ao botão de intervalo. Desta vez eu vou realmente usar funções de seta gorda porque eles são mais curtos. Nenhum benefício técnico aqui, apenas um pouco mais curto. Começaremos um intervalo definido, e dispararemos a cada segundo. Dentro, queremos incrementar um número, então temos que salvar isso fora desta função de intervalo para que possamos incrementá-lo e lembrar o valor. Precisaremos de uma matriz para empurrar os números. Primeiro, vamos criar um novo objeto com a propriedade x contendo o número. Novamente, como antes, vamos incrementar o número. Claro, precisamos filtrar. Vamos filtrar por número menor que sete. Claro, queremos ter certeza de que nosso intervalo pára caso contrário, ele continuará funcionando indefinidamente. Vamos salvar a alça e usar intervalo claro para parar a execução novamente. Ainda precisamos exibir os resultados na tela. Claro, ainda precisamos empurrar o objeto para a matriz. Agora, se eu clicar no botão de intervalo, veremos que os números aparecem um a cada segundo. Lá estão eles. Objetos com números menores que sete. Estamos alcançando o mesmo objetivo, mas o movimento é bem diferente. Vamos dar uma olhada no pedido do Ajax. Eu vou para URL para Ajax API endpoint, e isso vai retornar uma piada, e vamos usar comprimento da piada como o número. Vamos começar com o pedido de busca. Obter na URL. Então precisamos resolver usar um manipulador para baixo que nos dará a resposta. Vou manter as coisas simples. Vamos apenas assumir que tudo funciona e eu vou chamar uma função JSON sem verificar. Isso deve nos dar os dados. Os dados terão um valor, que terá a piada. Vamos tirar o comprimento da piada. Uma vez que temos o objeto, ainda precisamos filtrar e colocá-lo na tela se ele passar o filtro. Eu vou usar um valor de 75 aqui porque a maioria das piadas será maior do que sete personagens, provavelmente cada um deles. Vamos ver se o botão de solicitação do Ajax funciona. Vemos uma piada de 40 personagens de comprimento e um 73 e outro 54. Mas às vezes, quando eu clico em UI, ele não é atualizado, porque nós vamos ter uma piada que tem mais de 75 caracteres de comprimento. Vimos três estilos de codificação diferentes. Fizemos uma abordagem funcional com a matriz. Fizemos uma abordagem assíncrona com a busca, e também fizemos outra abordagem assíncrona usando intervalo definido. Eles são todos muito diferentes, completamente diferentes APIs. Normalmente, é uma mistura de códigos funcionais e códigos imperativos. Mas tudo isso está ligado a eventos, como se estivéssemos esperando por nosso clique no botão e então fazendo algo, e tudo isso é muito diferente APIs. Vejo você no próximo vídeo quando vamos dar uma olhada em como RXJs simplificará isso em uma API. 4. A solução: Oi, Maurice aqui. Bem-vindo de volta a este curso para Master RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada no código que fizemos em um vídeo anterior, mas então torná-lo mais simples e conciso, usando RXJS. Vamos mergulhar no código. A primeira coisa que precisamos fazer é instalar RXJS, vamos fazer um npm-install RXJS. Isso é RXJS instalado. Vamos reiniciar o aplicativo e começar a usar RXJS. Aqui temos o pedido. Então a primeira coisa que precisamos fazer é importar algum código de RXJS. Vamos começar com o Array. Para o Array, temos um conjunto estático de dados, então precisamos importar a função from do RCS. Isso nos permitirá transformar uma matriz estática de dados em um observável. Vamos digitar cabra no manipulador de eventos. Eu começo a trabalhar no carvão de falso na matriz de números, que transforma ele não sintonizar observável e, em seguida, obter o valor perdendo para assinar a função. Vamos subscrever e adicionar o manipulador a ele, que será chamado para nossos dados. Aqui vamos apenas exibir os dados, então o que vai acontecer? Isso vai transformar cada número individual em um evento. O conteúdo do texto no resultado será atualizado dez vezes e veremos o último item. Lá vemos que 10 sendo exibido. Queremos ser capazes de manipular os dados entre a criação do seu observável na assinatura. Podemos fazer isso chamando a função pipe e pausando operadores RXJS nesse pipe. Vamos importar alguns operadores. O primeiro operador importará é mapear porque queremos mudar o número em um objeto com um X. Chamamos mapa dentro da função pipe, e pegamos o número que vem e transformamos em um objeto com uma propriedade X, tal como tínhamos feito antes. Vemos que obtemos um objeto com o valor perdido de 10. Ainda precisamos transformar isso em uma matriz com todo o valor e filtro. Usaremos o filtro e o operador de escaneamento para fazer isso. Vamos importá-los. Volte para o tubo após o mapeamento no tubo fará para filtrar. Assim como antes de filtrar na propriedade x sendo menor que sete. Em seguida, vamos usar um operador de varredura para transformar elementos individuais em uma coleção de elementos, vai transformar são os eventos separados em uma matriz de eventos. O digitalizado obtém dois parâmetros, o valor anterior no valor atual sendo emitido. Então o anterior será um array, então vamos apenas retornar um novo array, concatenando o valor atual para ele. Vamos dizer-lhe para começar com uma matriz vazia. Lá temos ele. Uma matriz com números de zero até seis, tudo menor que sete. Vamos fazer o mesmo com o intervalo, irá importar uma nova função de RXJs para iniciar um intervalo que é intervalo ouro, fácil. Vamos substituir o corpo do manipulador clique botão de intervalo para usar a função de intervalo de RXJS. vez irá desencadear um evento a cada segundo. Vamos copiar todo o código de baixo, todo o tubo com o operador. Lá vemos o intervalo de disparo, imprimindo todos os números de zero a seis nos objetos. Neste caso, o intervalo ainda não pára. Continua atirando, mas não emitirá mais eventos. Vamos consertar isso em outro vídeo. Vamos fazer a mesma largura, o pedido AJAX. Vamos importar os objetos AJAX de RXJS/ AJAX. Usaremos isso para obter o Json da API do Chuck Norris. Usando Ajax.getJSON, obtemos um observável com a solicitação AJAX ou uma resposta, devo dizer, que entrará no código existente. Mais uma vez, vou copiar o código que tínhamos antes. Agora o resultado é um pouco diferente, então eu tenho que fazer outra função de mapa, basicamente mapeada ligada de duas brincadeiras para desvalorizar. Neste caso, apenas ter o comprimento é bom o suficiente porque eu já estou mapeando para um objeto na linha abaixo. Vamos alterar o valor do filtro de 70-75 porque há muito poucos, se quaisquer piadas que são menos de sete caracteres. Lá vemos o pedido AJAX funcionando. Todos os três eventos são feitos com praticamente o mesmo código. Apenas a solicitação AJAX é ligeiramente diferente por causa dos dados e do comprimento do filtro. Mas fora isso, é idêntico. É tudo uma questão de funções muito, muito simples. Mas podemos realmente dar um passo adiante, porque o manipulador de eventos nos botões também pode ser observável. Vamos mudar o evento da firma de afinação. Podemos transformar eventos DOM em um observável. Passamos no fundo, e passamos nos eventos. Estamos interessados no evento clique neste caso, temos um fluxo observável off cliques, podemos pipe, que é um usando outro operador para mudar de mapa. Nós podemos realmente transformar isso em um fluxo de eventos diferente. Estamos mudando de um fluxo de eventos para outro fluxo de eventos, que mapeiam dos eventos de clique originais para os eventos AJAX. Há evento AJAX ainda está disparando. Vamos fazer o mesmo para o intervalo e a matriz de números botão. O intervalo está funcionando, vamos limpar, reinicializar e veremos o array funciona também. Estamos usando apenas uma API para eventos DOM, para buscar dados assíncronos, para trabalhar com um intervalo e trabalhar com uma matriz estática de dados, que eu acho que é realmente legal. Basta aprender uma API e você está pronto para ir. Então vimos que o ArcGIS cria observáveis que produzem eventos ao longo do tempo. Um evento de clique, buscar eventos, concluído, um evento de intervalo, qualquer coisa assim. Os eventos podem ser acionados com a frequência que quiserem. Você pode ter um observável com zero eventos, você pode ter um com centenas de eventos. Vimos operadores onde podemos manipular esses eventos, cadeias de caracteres e alterar eventos ou filtrar eventos ou coisas novas com eles. Vendo que esses operadores estão muito focados, eles fazem uma tarefa que faz isso bem. Isso significa que temos funções muito simples que são fáceis testar por unidade e fáceis de combinar em algo mais complexo. Vimos que podemos começar com uma única string, um evento de clique, e então transformar isso em uma série de outros eventos, o que é muito bom. Vejo você no próximo vídeo. 5. Como aproveitar a maioria deste curso: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo, vamos falar brevemente sobre como você pode aproveitar ao máximo este curso. Há muitos vídeos, e uma maneira de começar é apenas assisti-los do início ao fim. Sem problema, você pode fazer isso se quiser. Mas se você estiver mais interessado em casos de uso específicos para RXJS, talvez queira começar com a seção de cenário. Lá eu descrevo vários casos de uso, como uma pesquisa incremental ou aplicativo de desenho, e você pode olhar para eles e decidir quais vídeos você está interessado em. Em seguida, você pode alternar para operadores específicos. Então, novamente, você pode já estar usando RXJS, então você pode estar interessado em operadores específicos ou maneiras específicas de criar observáveis. Você pode ir diretamente para esses vídeos. De qualquer forma, você pode obter muitas informações desses vídeos. Agora, vou escrever um monte de códigos. Toda vez que você vê esse cara pop-up, não sou eu, mas eu uso esse slide, então eu vou escrever um monte de código de exemplo. Todo esse código de exemplo está ativo no GitHub. Se você quiser usá-lo, e eu recomendo muito para fazer, vá para o GitHub e cloná-lo a partir daí. Este é o repositório Explorar. Meu nome de usuário do GitHub é Mauricedb, e repositório é chamado master-rxjs-6-without-breaking-a-sweat. Se você quiser clonar isso, role um pouco para baixo, clique em “Clone or Download”. Se você é um usuário do Git, basta copiar o URL aqui. Se não estiver, vá para Download ZIP e baixe o código dessa forma. Só vou copiar o URL. Na janela do console, vou cloná-lo, git clone e colar no URL e pressionar “Enter”. Isso faz o download rápido do repositório completo para uma nova pasta. Agora, se eu cd nessa pasta, se você agora executar o npm install, ele irá instalar todos os pacotes npm necessários, então você pode realmente executar todo o código. Agora, há um aviso de segurança desagradável lá. Não se preocupe com isso. Isso não é de RXJS, isso é realmente os resultados de um pacote de números primos que estou usando, e que tem uma dependência de chances que causa o erro. Se você não estiver usando isso, apenas usando RXJS ou Parcial que eu estou usando para compilar e agrupar todo o código, vai ficar muito bem, você não verá esse mesmo erro. Lá estamos nós. Vamos dar uma olhada no código em um momento. Agora, se você tiver algum problema com o curso ou exemplos, verificar o código-fonte é praticamente uma primeira vez. Compare o seu código com o meu código e talvez você veja uma diferença. Se você precisa saber mais sobre um dos operadores ou formas de criar observáveis, a documentação do RXJS também é muito boa. Este é o site da RXJS, em rxjs.dev. É muito bom, e a seção de referência é muito boa. Você pode ver todos os diferentes operadores RXJS e formas de criar observáveis aqui, ou com um bom filtro. O site reactivex.io também é muito limpo. Ele contém mais informações. Se eu for aqui para operadores, você pode ver um monte de informações sobre operadores. Uma coisa que é realmente bom é a árvore de decisão para decidir qual operador ou função para criar um novo observável que você realmente quer. Não apenas sobre RXJs, mas sobre toda a família ReactiveX, mas altamente recomendado. Claro, você pode fazer perguntas na seção de perguntas e respostas e eu responderei. Mas talvez não só eu. Recomendo vivamente que responda às nossas perguntas também. é porque eu não quero respondê-las, mas pensar em uma resposta é realmente uma ótima ferramenta de aprendizagem. Uma das razões pelas quais comecei a ensinar sobre desenvolvimento de software foi porque eu queria aprender mais sobre isso. A melhor maneira de ter certeza de que você sabe maioria das coisas sobre a tecnologia se você pode explicar para outras pessoas. Agora, recomendo vivamente que pratique todo o código. Assistir vídeos é legal, mas codificar é realmente muito melhor aprendê-lo, então codificar as coisas. Eu criei um pequeno modelo inicial. Se eu abrir o projeto usando o Visual Studio Code, meu editor de escolha, você pode ver muitas pastas aqui para todos os projetos diferentes. Ainda não está lá, mas vou adicioná-lo antes que este curso vá ao ar. Haverá uma pasta chamada 000-modelo. Essa é a placa da caldeira que uso para tudo isso. Tem um pequeno botão Iniciar. Tem coisas mais importantes sobre trabalhar com parcial-JS lá dentro. É um ótimo ponto de partida. Se você quiser executar isso, você realmente precisa Node e NPM instalado. Tenho o Node instalado. A maneira que eu posso verificar é executar nós traço versão com um único V. Então você pode ver que eu estou no Node 8.12, que é realmente um pouco desatualizado, mas tudo bem. Isso vai funcionar muito bem. Se você precisar instalar Nodes, vá para o site Node.js e aqui você pode baixar a versão mais recente. Eu recomendo usar a versão LTS, a versão de suporte a longo prazo, que geralmente é a melhor. Estou um pouco desatualizado, mas isso não é problema. Agora, geralmente quando você instala o Node, você obtém o NPM gratuitamente. Há algumas distros onde você não tem, mas normalmente isso está incluído. Você pode verificar executando npm traço versão, e então você pode ver que eu estou no NPM 6.4.1. Ambos são necessários para executar as coisas. Você também precisa de um navegador. Todos os exemplos são executados em um navegador. Eu uso o Chrome, mas outro navegador moderno razoável como Safari, Firefox, Arch, todos eles vão funcionar bem. É mesmo com você. Você vai precisar de um editor de código. Eu uso o Visual Studio Code, mas cabe a você. Você quer usar Sublime, Bloco de notas plus, Visual Studio, WebStorm, realmente não importa. O Visual Studio Code é realmente ótimo, por isso é altamente recomendado. Mas todos os outros também funcionarão. Agora todas as amostras estão em pastas numeradas. Basicamente, as 100 pastas são a introdução. As séries 200 são sobre a criação de observáveis. As séries 300 são todas sobre operadores e as séries 400 são todas sobre cenários diferentes. Você pode executá-los todos da mesma maneira. Basicamente, bom escrever o número para o que quer que esteja interessado. Suponha que queremos executar a pesquisa incremental, que é a pasta 403. O que fazemos é fazer um npm run start: 403. Isso inicia um pequeno servidor web e compila esse exemplo e o torna pronto para ser executado no navegador. No navegador, você pode abrir isso na porta localhost 1234. Vemos pacote parcial do aplicativo e iniciar um servidor na porta localhost 1234. Vamos copiar isso. Uma vez feito, podemos ir para o navegador, abrir uma nova guia, ir para a porta localhost 1234, e ver o aplicativo. Agora, isso irá realmente pesquisar usuários do GitHub. Se eu procurar Maurice, vejo meu próprio usuário como o segundo, todos os exemplos funcionam de forma semelhante. Em alguns casos, você precisará abrir as ferramentas de desenvolvimento porque instruções console.log são usadas para produzir coisas nas ferramentas de desenvolvimento e, na maioria dos casos, você verá muita saída nessa tela normal também. Se você começar a editar coisas, parcial é muito bom. Se você fizer uma pequena alteração, parcial irá automaticamente recompilar os códigos e atualizar o navegador, então não há necessidade de pressionar “F5" no navegador na maioria das vezes. Geralmente só funciona. Ocasionalmente, se você já teve um erro de sintaxe, parcial pode não ser capaz de atualizar o navegador, ele pode estar quebrado. Mas normalmente, isso funcionará automaticamente. Vejo você no próximo vídeo. 6. Blocos de construção: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo vamos falar sobre os principais blocos de construção de RXJs. Aqui temos um bom diagrama com os blocos de construção principais. Eu realmente peguei isso do site ReactiveX, que é muito legal para dar uma olhada. Aqui está o site do ReactiveX e se você acessar Documentos Observáveis, você encontrará o mesmo diagrama lá. Este site é legal porque tem um monte de documentação, vai visitá-lo novamente mais tarde. Mas também nos mostrará todas as línguas diferentes. Há alguns aqui. Mas se você clicar em Outros, você verá uma lista mais longa. Conhecer RXJs traduzirá bem para outras línguas, o que é sempre bom com a tecnologia. Mas mais sobre este diagrama. Para cima, você vê uma linha do tempo uma linha do tempo Observável. As pequenas formas em cima dela são eventos que estão sendo emitidos ao longo do tempo. A pequena linha no final é o observável sendo fechado. Depois disso, não serão emitidos mais eventos. O flip aqui é um operador. Os operadores têm a chance de operar em todos os eventos que estão sendo emitidos. Neste caso, ele apenas os vira ao redor. Um observável é uma coleção ou zero ou mais eventos ao longo do tempo. Observáveis podem ser abertos ou fechados. Enquanto estiverem abertos, eles podem emitir eventos, mas pergunto-me perto, eles não podem mais fazer isso, e podem estar próximos por causa do fechamento bem-sucedido ou de um erro. Este é o RXJS Marbles sites, que é um site muito bom para ver como as coisas funcionam. Na verdade, clone-o e eu vou usá-lo para demonstrar alguns dos exemplos. Aqui temos cronograma. Aqui está uma linha do tempo vazia. Nenhum evento sendo emitido. Mas em uma pequena barra vertical à direita você pode ver onde o tempo pára e o observável está perto. Aqui está um intervalo. Provavelmente o observável por excelência, ele emite um evento de vez em quando, neste caso, a cada 20 milissegundos. Agora, a pequena linha na frente sugere que é o fim mais próximo, mas não, ele continua indo para sempre. Observáveis são apenas um longo trecho de eventos ao longo do tempo. Observáveis não seriam muito bons se ninguém os observasse. Temos um observador e o observado subscreve um observável e é notificado de todos os eventos emitidos. Pode fazer o que quisermos com ele. No exemplo que vou fazer, vou apenas exibi-los. Também temos operadores. Operadores são a coisa que realmente torna RXJS interessante. Os operadores podem fazer todas as coisas. Como aqui eu tenho o operador de filtro que filtra os valores antigos. Ele não empresta zero, dois ou quatro porque eles estão quites, ele só passa em um e três para os alvos observáveis. Neste caso, vemos que a fonte e o alvo observável, o que está na parte superior e inferior têm a mesma duração de vida. Outro operador é a tomada três. Ele só leva os três primeiros eventos que estão sendo emitidos a partir da fonte observável emite aqueles no alvo observável e quando ele é encontrado três eventos que ele fecha. A fonte emite 0, 1, 2, 3 e 4, mas no alvo só temos 0, 1, 2 e o observável é fechado. Os operadores são normalmente funções simples e puras, o que os torna fáceis de escrever. O verdadeiro poder vem de combiná-los. Combine muitos operadores diferentes para alcançar o efeito desejado. Quando subscrevemos um observável, obtemos um objeto de assinatura. Às vezes, você não precisa dele, mas a assinatura pode ser útil se você quiser cancelar a assinatura de um observável. Cancelar a inscrição impedirá o observável de emitir mais eventos. Vamos mergulhar em alguns códigos. Agora, vocês devem estar se perguntando por que eu não estou usando essas bolas de gude Rx, que eu acabei de mostrar para demonstrar o código. A razão é porque ele é baseado em RXJS 5, e você pode ver os códigos. Aqui está a sintaxe RXJS 6, um pouco diferente. Estamos nos concentrando em RXJS 6. Não vamos usar bolinhas de gude Rx para demonstrar. Eu só vou usar um projeto personalizado como este. A primeira coisa que precisamos fazer é importar de RXJS. A coisa que precisamos importar neste caso é o intervalo porque eu vou usar o observável por excelência, emitindo um evento a cada segundo. Vamos definir a variável de fluxo para manter todos os eventos observáveis e uma convenção. A convenção de nomenclatura frequentemente usada é postfix variáveis que mantêm fluxos observáveis com um dólar. Você não tem que fazer isso, mas mostra o que é. Stream dollar é o nosso fluxo observável emitindo um evento a cada segundo. Precisamos de um observador para ouvir esse riacho. O observador que eu vou usar é um objeto que tem uma próxima função e que a próxima função vai ser código com cada evento sendo emitido. Neste caso, é uma função normal e E é o evento que está sendo emitido. Eu só vou exibi-lo em alguns elementos div. Usando o fluxo eu posso assinar possivelmente o observador e isso vai me retornar um objeto de assinatura, que eu posso usar para cancelar a inscrição mais tarde se eu quiser. Se eu apertar o botão Iniciar, ele irá ativar o intervalo observável e lá vemos segundo tique-taque por. Vamos adicionar um operador. vez, usamos uma importação, mas desta vez usamos uma importação de operadores RXJS. Os operadores são importados de uma parte ligeiramente diferente da embalagem. Vamos importar o filtro e o operador take para obter o mesmo efeito que eu tive no diagrama de mármore Rx. A grande diferença com RXJS 6 é usado operador de tubulação para filtros com RXJS 5 que ainda não existia. Eu uso tubo e especificar o primeiro operador lá, o filtro. Com RXJS 6 você usa a função pipe para passar em operadores. Neste caso, vou passar no operador de filtro e filtrar todos os valores pares. Agora, se eu apertar start, eu vou ver 0, 2, 4, etc Eu posso combinar operadores especificados para tomar operador que eu só quero tomar os três primeiros valores. Agora, se eu apertar start, eu vou ver 0, 2, 4. Mas, em seguida, o operador entra em ação e está mais próximo do fluxo e não mais valores serão emitidos. Uma maneira muito agradável. Agora a ordem dos operadores é importante. Eles operam no fluxo na ordem em que estão definidos. Se eu colocar um take primeiro, ele vai assumir o fluxo original emitindo 0, 1, 2, 3, 4 e etc Ele só vai tomar três valores de seus 0, 1, 2. O único é descartado pelo filtro par e só vemos zero e dois. Agora, vamos desativar para levar por um momento para que ele continue emitindo valores, e podemos ver o efeito de cancelar a inscrição. Vamos usar a assinatura e depois de cinco segundos, eu vou chamar a função de cancelamento precisa para interromper a assinatura. Agora, quando eu pressionar Iniciar veremos 0, 2 e 4 e mais eventos porque nós cancelamos a assinatura. Os principais blocos de construção de RXJs, observáveis, observadores , assinaturas, operadores, e a função pipe para passar operadores. Vejo você no próximo vídeo. 7. Observáveis usando de novo de x: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Mastering RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada na função de para criar novos observáveis com um conjunto fixo de valores. De () é realmente simples, ele leva um número de valores, zero ou mais, e ele irá criar um observável e imediatamente emitir todos esses valores no observável. Em seguida, ele irá fechar automaticamente o observável. Vamos dar uma olhada no código. Diagrama de mármores RXJS para um observável apenas emitindo um. Você pode ver que ele emite o valor um e fecha imediatamente. Para fazer isso, precisamos importar fora do RXJS, modo que irá criar um novo observável. Vamos definir uma nova variável string e atribuí-lo ao resultado da classificação de com os valores 1, 2, 4. Em seguida, eu vou assiná-lo, eu vou apenas usar uma função simples. Vou explicar mais sobre as diferentes formas de se inscrever em outro vídeo. Vamos apenas definir o conteúdo do texto dos elementos do resultado. Se eu clicar em Iniciar, vemos o valor quatro, na verdade todos os valores foram emitidos, mas isso é difícil de ver porque eles são emitidos imediatamente, então só vemos o último. Agora vamos adicionar o console.log para que possamos ver que todos os valores foram emitidos. Lá estão eles aparecem no registro, e se eu clicar de novo, eles são impressos na segunda vez. Agora vamos imprimir um pouco antes de subscrever e logo depois de subscrevermos. Podemos ver que isso é tudo que você vê, mesmo síncrono. Estamos escrevendo código assíncrono, mas ele realmente está sendo executado de forma síncrona neste momento. Veja que temos antes de assinar e depois assinar e no meio chegamos a valores que estão sendo emitidos. O de () é uma função muito simples para criar observáveis. Ele síncrono, ele apenas emite todos os valores e fecha. Vejo você no próximo vídeo, quando vamos dar uma olhada em mais algumas maneiras de criar observáveis. 8. Observables usando EMPT, NUNCA e throwError() (): Oi. Aqui é Maurice. Bem-vindo de volta a este curso sobre Master RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada em três maneiras especiais de criar observáveis. Você não vai usar isso muito em código de produção. Eles são usados principalmente para testes e alguns outros casos especiais. A primeira é a função racional Vazio. Ele cria um observável, que está vazio. Nunca emite nada, e fecha imediatamente. Se você criar um observável usando a função de sem qualquer parâmetro, é na verdade o mesmo que usar vazio. Se olharmos para o site do ReactiveX, podemos ver vazio. Ele só cria um observável. Podemos ver a linha horizontal vazia com a pequena linha vertical à direita. Fecha imediatamente, nada acontece lá. O próximo a dar uma olhada é “Nunca”. É ainda mais simples. Abre um observável. Nunca emite nada, mas não fecha, nem faz isso. esse respeito, é ainda mais simples. Nunca se parece com isso. Vimos a linha do tempo horizontal vazia, mas nem mesmo a linha de fechamento no final. A última maneira de criar um observável que eu rapidamente quero dar uma olhada é ThrowError. Os dois primeiros eram, na verdade, constantes. ThrowError é especial que cria uma string observável e emite um erro imediatamente. O erro de string encerra. Nenhum evento é realmente emitido no fluxo também. Parece com isto. Vimos a linha do tempo vazia, mas em vez da pequena linha vertical para indicar que ela fecha, vemos o outro lado, essa é a indicação de que ela fecha com um erro, mas nenhum outro evento, nada. O vazio e nunca são realmente constants.They também são funções lá para criá-los, mas eles são obsoletos. Normalmente, você usa a constante para criar uma nova cadeia de caracteres. O ThrowError é uma função. É preciso um erro objetos, todos os três apenas criar um observável vazio. O vazio no ThrowerRror imediatamente fechá-lo. O primeiro sucesso, o erro de perda, e depois nunca faz nada. Estes são úteis para testar operadores e outras coisas, e em alguns casos, para combinar strings. Vejo você no próximo vídeo quando vou usar esses operadores para mostrar como configurar assinaturas e ver os diferentes eventos como fechar, errar e emitir acontecem. Vejo você lá. 9. Criando assinaturas: Bem-vindo de volta a este curso sobre, Mastering RXJS6 Sem Quebrar Um Suor. Neste vídeo vamos dar uma olhada mais de perto nas assinaturas. Usando a função de assinatura, nós configuramos uma assinatura, mas na verdade é uma função sobrecarregada e vamos dar uma olhada em diferentes maneiras que podemos passar parâmetros para ela. Também é importante perceber que a inscrição geralmente ativa um observável. A maioria dos observáveis não faz nada até que você chame a assinatura e, como vimos antes, eles retornam um objeto de assinatura. A assinatura tem problemas para cancelar a assinatura quando não estamos mais interessados na assinatura. Além de usar inscrever há outra maneira de obter todos os valores de um observável. Você pode usar a função FoREach. Basicamente, ele vai se inscrever sob o capô e loop sobre todos os itens, mas vamos dar uma olhada no código. Aqui temos alguns fluxos observáveis diferentes. O fluxo de dados com os números 1-4, um fluxo vazio, um fluxo nunca e um fluxo de erro. Com o fluxo de dados, todos os valores são omitidos como antes, e só vemos o último. Mas se usarmos uma string vazia nada é enviado, não vemos nada. Vamos atualizar um pouco para a assinatura. Acontece que essa variante da assinatura leva uma série de retornos de chamada diferentes. O primeiro é para quando um valor é enviado. A segunda função de retorno de chamada é para quando um erro é detectado. Lembre-se que o erro também fecha a string. Vamos imprimir o fato de que ocorreu um erro, e o terceiro retorno de chamada é para quando a string observável fecha. Não passará quaisquer dados, mas podemos imprimir o fato de que o observável tenha concluído, e agora se usarmos para esvaziar observável, podemos ver que estamos concluídos. Se usarmos dados, os valores são emitidos, mas nunca mais os vemos, é concluído. Mas vamos adicionar um console.log para que possamos realmente ver os valores que estão sendo emitidos. Agora vemos os valores 1-4 sendo emitidos no console à direita. Concluído só aparece na interface do usuário. Se usarmos o observável vazio, só nos completamos, e com o nunca observável, nada acontece. Não está concluída. Nunca emite. Mas com o erro observável, podemos ver que a mensagem de erro é impressa. Algo ruim simplesmente acontece. Agora, a fim de mostrar que um observável geralmente não faz nada, se não houver assinatura, eu importarei o operador de torneira. O operador de toque é útil para depuração. Você pode canalizar todos os eventos através de toque e fazer algo como neste caso, basta imprimi-los para o console.log. É destinado para efeitos colaterais, não para os operadores normais ou conjuntos de filtro ou mapa ou algo assim. Eu só vou imprimir toque com o valor real, e se eu apertar início, nós subscrevemos e vemos toque 1 e, em seguida, o valor real um sendo emitido, eo mesmo para os outros valores no fluxo concluído, mas vamos comente para a assinatura. Agora, se eu clicar em Iniciar ainda criamos os dados observáveis. Ainda ligamos para o operador da torneira, mas nunca foi executado. Ele só é executado com uma assinatura, mas esta é uma maneira de criar uma assinatura, mas há outra. Também podemos usar o operador FoReach, para imprimir todos os valores. Depósito meta para trás é chamado para cada valor emitido e retorna uma promessa, e neste caso eu só vou lidar com um caso de sucesso. Quando a promessa resolve, o observável é completo, e lá vemos exatamente o mesmo comportamento exceto que desta vez tudo é impresso para o console. Além de usar a função de assinatura com três funções como parâmetros. Também podemos passar em um objeto observador, objetivo assinar com o observador. Se eu clicar em Iniciar, ainda vemos as saídas do toque, modo que a assinatura foi ativada. Não só observar para objeto, podemos adicionar três funções, em seguida, que é chamado cada valor de tempo foi emitido erro, que é chamado sempre que um erro ocorre e completa, que é chamado quando o observável completa e está feito. Ainda temos o mesmo comportamento. Não importa qual dos dois métodos de assinatura deve preferir, mas na maioria dos casos, você deve sempre fornecer retornos de chamada para ambos os valores sendo emitidos, erros ocorrendo e muitas vezes para concluído também, mas fazer certifique-se de sempre incluir o retorno de chamada de erro. Erros podem acontecer e você precisa estar ciente deles. Vamos importar a função de criação de intervalos. Para criar um observável baseado em tempo irá emitir um evento a cada segundo. O não depois de cinco segundos, chamamos a cancelar assinatura funcional nova assinatura para cancelar a assinatura do intervalo. Lá vemos o segundo ele pausar, mas depois de quatro ele pára. Observe que não obtemos um retorno de chamada completo, estamos cancelando a assinatura. Não foi a conclusão do fluxo de eventos, sem erro, sem conclusão. Se fizermos o mesmo com o operador take, apenas tomamos os três primeiros eventos. Agora as coisas são um pouco diferentes, mas vai canalizado em intervalo através take operador, tendo os três primeiros eventos e vemos 0, 1, 2 e, em seguida, ele realmente completa. Agora é o preenchimento observável antes de cancelarmos a assinatura, então obtemos o retorno de chamada completo. uso de assinatura é a maneira preferida de obter todos os valores preferidos em usar o Foreach em excesso lhe dá mais controle, mais flexibilidade, usa três funções diferentes lá. O próximo, o erro, e o completo também, se você precisar que verifica sinais quando o fluxo é fechado de forma bem-sucedida. Vejo você no próximo vídeo. 10. Observáveis do evento DOMS: Olá, sou o Reece. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem quebrar um suor. Então, neste vídeo, vamos dar uma breve olhada na forma de evento do fórum de criar um observável. Usando eventos de fórum, você pode criar um observável a partir de qualquer evento DOM ou qualquer evento padrão relacionado como Node.js. EventEmmitter, há também antiga função racional de padrão de ventilação para outros eventos genéricos que ainda não são suportados. Vamos dar uma olhada no código. A primeira coisa que precisamos fazer é importar do evento e ignorar as linhas de código abaixo, há apenas sobre escala com uma tela DPI alta que eu tenho. Então, usando FromEvent, eu posso especificar quais elementos de domínio, neste caso para iniciar botão, qual evento eu estou interessado, o evento clique, e então eu posso assiná-lo. Então, neste caso, eu vou apenas fechar o elemento de resultado para as dívidas de cadeia, “Eu fui clicado”. Aí está, “Eu fui clicado”. Portanto, usando evento de formulário, você não precisa selecionar um único elemento de domínio de cada vez, você pode selecionar uma coleção inteira. Usando seletor de consulta tudo que eu selecionei todos os botões e usando esse seletor eu posso apenas criar um observável para todos eles. Eu vou basicamente define os elementos de resultados para o texto do botão para que possamos ver que é alternar entre iniciar e parar. A área azul na tela era tela. Então vamos brincar com a tela um pouco. Mais uma vez, eu vou usar eventos de formulário, neste caso eu vou assinar a tela e eu vou assinar os eventos de movimento do mouse. Eu basicamente vou desenhar na tela como meu mouse se move. É por isso que eu precisava do bode escamoteado lá em baixo. Então eu defini uma assinatura, eu recebo o arco do evento. A partir do arco de evento eu posso obter x e os deslocamentos y nos elementos. Em seguida, usando o contexto da tela, eu posso preencher um pequeno retângulo de dois por dois pixels onde o mouse é. Mas agora, se eu mover o mouse para a tela, você pode ver pontos sendo desenhados. Se eu me mover lentamente, eles estão próximos, mas se eu me mover muito mais rápido, você vê que na verdade existem algumas lacunas porque nem todos os pixels são um evento. O FromEvent torna realmente fácil para calar manipuladores de eventos e criar observáveis com base nesses eventos, pelo menos para a maioria dos eventos. Ocasionalmente, você precisará usar dois do padrão FromEvent. Vejo vocês no próximo vídeo. 11. Temporizador e observáveis à base de intervalo: Oi. Aqui é Maurice. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo, vamos dar uma breve olhada em observáveis baseados no tempo, o temporizador e o intervalo. O temporizador é uma função criacional muito simples. Ele cria um observável que aguarda a quantidade específica de tempo e, em seguida, emite, e possivelmente emite várias vezes dependendo do segundo parâmetro. O intervalo apenas começa a emitir e continua emitindo, muito simples. Já vimos isso várias vezes. Vamos dar uma olhada no código. Eu só vou usar temporizador aqui porque nós já usamos o intervalo várias vezes. Nós importamos temporizador de RXJS e, em seguida, usando temporizador, especificamos a quantidade de tempo para esperar. Um segundo aqui. Depois de um segundo, atualizamos os elementos do resultado com os eventos. Se eu clicar em “Iniciar”, vemos depois de um segundo, zero nu e nada mais. Com o primeiro parâmetro de atraso, apenas obtemos os eventos únicos. Se adicionarmos o segundo parâmetro, ele irá realmente determinar o intervalo para cada evento após o atraso inicial. Agora, ele esperou cinco segundos e então dispara um evento a cada segundo. Uma coisa boa com o temporizador é que não temos apenas que especificar o número de milissegundos para esperar, mas também podemos especificar datas, objetos com a hora exata em que ele deve começar. Vamos criar a hora de início com a data atual e adicionar cinco segundos a ela e, em seguida, dizer-lhe para começar naquele momento específico. Novamente, se eu clicar em “Iniciar”, ele espera cinco segundos e, em seguida, começa a emitir novamente. Mas agora porque essa era a hora exata de início, nós determinamos. O temporizador é realmente útil, ele espera e, em seguida, emite uma vez ou dependendo do segundo parâmetro, começa a emitir após cada intervalo e intervalo começa a emitir imediatamente como vimos antes. Ambos realmente bons para agendar trabalho recorrente. Vejo você no próximo vídeo. 12. Usando a base () e iterables: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Master RRXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada na função from () para criar novos observáveis. From () é muito versátil, ele vai basicamente tomar qualquer coisa que seja uma assinatura ou uma promessa, ou algo que você pode fazer loop sobre como um array ou um iterável e criar um novo observável com base nisso. Muito semelhante ao de () quando se trata de [inaudível] e conjunto de valores exceto com de () precisam ser valores conhecidos. Aqui é apenas uma matriz. Se você estiver usando um array ou um iterável, ele enviará todos os valores de forma síncrona. Claro que com uma promessa, não pode fazer isso. Vamos dar uma olhada. Primeiro precisamos importar de () do RXDS, e então vamos usar de () com ele, uma matriz de números 1, 2, 3 e nós vamos apenas imprimi-los para o console quando nos inscrevermos. Quando eu clico no botão Iniciar, vemos os números 1, 2 e 3 aparecem na janela do console. Simpático e simples. Podemos trabalhar com qualquer coisa que possamos fazer. Estou usando um seletor de consulta tudo para selecionar todos os LiElements acima. Vamos loop overdose usando o from () para criar um observável. Um observável de elementos DOM. Subscrevemos e na assinatura vou definir o conteúdo de texto dos LiElements para usar de (). Quando eu aperto o botão Iniciar, os cinco LiElements são atualizados. Também podemos usar de () com promessas, o que pode ser muito conveniente se você tiver alguma API baseada em promessa como buscar ou outra coisa. Neste caso, eu vou apenas criar uma promessa e depois dois segundos resolvê-lo com o valor 42. Então, usando from (), transformo a promessa em um observável e subscrevo a ela. Quando a promessa for resolvida, a assinatura será chamada e definiremos os elementos de resultados para o valor que está sendo resolvido, 42 neste caso. Os lis são todos atualizados novamente e vemos o valor 42 aparecer. Em todos esses casos, o observável fecha assim que sabe que é feito com um número fixo de valores ou quando a promessa se resolve. Usar from () é muito simples e útil para coleções ou ao usar promessas. Ao usar coleções, ele emite todos os valores de forma síncrona, e com uma promessa, ele emite quando a promessa é resolvida, e em todos os casos, ela é fechada logo depois. Vejo você no próximo vídeo. 13. Observáveis de solicitações AX: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem quebrar um suor. Neste vídeo vamos dar uma olhada em fazer solicitações Ajax. Se quisermos fazer solicitação Ajax, temos que importar Ajax de rxjs/ajax. Não do próprio rxjs, mas do pacote sub chamado Ajax. Uma coisa Ajax que recebemos de volta é um objeto e uma função. Você pode usá-lo como uma função para fazer o seu pedido, mas há uma série de funções utilitárias a partir daí para tornar a vida para a maioria dos pedidos mais fácil. Normalmente eu só faço com ajax.getJson ou um ajax.put ou um ajax.post. É tudo baseado em torno de objeto XMLHttpRequest. Funciona em navegadores mais antigos. Vamos fazer uma simples solicitação de busca. Primeiro, vamos importar Ajax de rxjs/ajax. Primeiro vou usar ajax como uma função. Temos que especificar um objeto como um parâmetro, e esse objeto pode ter um número de configurações diferentes. Se você ir para a documentação RXJS, você procurar por Ajax você verá solicitação Ajax. Aqui você pode ver a lista de parâmetros que você pode especificar. Neste caso, vou manter as coisas simples. Só vou especificar o URL. Mas você pode ver que você tem um pouco de controle. Tenho aqui a URL de uma API online que devolve as piadas do Chuck Norris. Quando a chamada Ajax é feito, ele retorna um observável e que irá emitir uma vez pedido ajax é concluída. Nesse caso, o evento que está sendo passado é o XMLHttpRequest. Ele tem um objeto de resposta, e abaixo da resposta é a resposta real, neste caso, há um valor que tem uma piada. Há uma piada do Chuck Norris e outra. Isso não é difícil, mas na maioria dos casos você precisará especificar um pouco mais. Se eu sei que eu estou indo apenas para solicitar alguns dados JSON, eu vou usar a função de utilitário getJSON, basta passá-lo para URL e opcionalmente alguns cabeçalhos, ir assiná-lo e ele irá retorná-lo para payload JSON real quando o a resposta é concluída. Mas novamente, eu vou começar a valorizar. Piada da carga útil e exibir isso. Lá vemos outra piada. Fazer solicitações AJAX usando RXJS é realmente simples. É tudo baseado em torno de XMLHttpRequest objeto para que ele vai trabalhar com navegadores antigos, e porque ele retorna um observável, você pode apenas tratá-lo como qualquer outro observável. Vejo você no próximo vídeo. 14. Criação de observáveis personalizados: Oi Maurice aqui. Bem-vindo de volta a este curso sobre mestre RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada na criação de observáveis de clientes. A primeira regra dos observáveis personalizados é não criá-los. Se você quiser criar um novo observável, veja se você pode começar com um já existente, essa é sempre a melhor opção. Aqui no site do ReactiveX, se você acessar operadores e rolar um pouco para baixo, verá esta opção sobre uma árvore de decisão para usar operadores. Bem, ele também tem esta árvore de decisão sobre o uso de funções para criar novos observáveis, e nós vamos criar um pequeno relógio, cada segundo que queremos emitir para a hora atual. Isso é como um intervalo. Queríamos intervalo, exceto que não queremos os números do intervalo, queremos a hora atual. Isso é como usar um operador de mapeamento de largura de intervalo combinado para o número atual, para a hora atual. Mas se você não consegue encontrar qualquer função criacional existente que funcionará através observable.create permitirá que você crie novo observável. Você vai obter o objeto assinante, ele tem uma próxima completa e uma função de erro que você pode chamar para emitir valor. Vamos dar uma olhada no código. Vamos fazer a coisa simples primeiro e vamos começar com um intervalo. Primeiro vou criar uma nova função, que criará um novo observável para mim. Porque eu queria baseado no tempo, eu vou chamá-lo de tempo e passar o número de milissegundos entre a emissão da hora atual. Porque é realmente como intervalo, eu vou começar com o intervalo e eu vou mapeá-lo para a hora atual. Se intervalo importante e mapa, e, em seguida, eu criar um novo intervalo especificando o número de milissegundos, em seguida, eu vou usar a função pipe para executar um filtro de mapa Trudeau, ignorado número original, e trabalhou em uma nova data para cadeia de tempo local. Eu posso usar essa função de criação de tempo como qualquer outra, basta chamá-la com o número de milissegundos, ele retorna um observável, então nós assinamos para ele, e sempre que ele emite um evento, nós atualizamos nossos elementos de resultados. Lá vemos o nosso pequeno relógio correndo. Agradável e simples e emitido para realmente ser a abordagem preferida. Mas vamos dar uma olhada em uma abordagem diferente, se não houver nenhum padrão observável, você pode realmente usá-los. Nesse caso, vamos importar o observável de rxjs e usar observable.create para criar um novo observável completamente em branco. Estamos pausado um objeto para assinante que terá a próxima, erro e função completa. Esses caras só vão usar o próximo para emitir valores. Porque nós realmente não há fim no tempo, e nós não vamos assumir que cresce e o erro. Só para mostrar que podemos emitir valores, estou emitindo a string Olá, e ela aparece. Queremos emitir baseado em tempo, então vamos criar um intervalo definido, e de vez em quando milissegundos emite a hora atual. Lá vemos nossos clientes tempo observável emitindo valores de tempo. Ótima. Agora ainda não terminamos, porque estamos começando um intervalo definido e ele continuará funcionando para sempre. Vamos adicionar um console.log no intervalo para que possamos realmente ver quando ele é executado. Vamos capturar a assinatura quando nos inscrevermos, para que possamos cancelar a assinatura após cinco segundos. Se eu apertar o botão Iniciar agora, as horas começarão a correr, mas o elemento parará de atualizar após cinco segundos porque cancelamos nossa assinatura, mas a saída do console ainda continua chegando. Precisamos nos certificar de parar esse intervalo. A maneira como você faz qualquer ação de limpeza quando o usuário cancela a inscrição de um observável é retornando a função de limpeza. A partir do observable.create, a função que cria o observável retornará uma função de limpeza. Vamos salvar para lidar a partir do intervalo definido e em claro em completo [inaudível] no punho que irá pará-lo. Agora, quando eu clicar em “Iniciar”, vemos o tempo decorrido, mas depois de cinco segundos quando cancelamos a assinatura da interface do usuário e do console parar de atualizar, porque paramos o intervalo. Criar observáveis do cliente é realmente fácil, embora você deve evitá-lo. Se você não precisa, se você pode usar um dos observáveis padrão e apenas usar um operador, essa é a melhor abordagem. Você começa o assinante, você pode emitir sapatos de valor e em seguida você pode completar o observável, ou ele pode emitir erro se você quiser. Em suma, muito fácil de usar. Vejo você no próximo vídeo. 15. Temas: Oi, Maurice aqui, bem-vindo de volta a este curso sobre dominar RXJS 6 sem quebrar um suor. Neste vídeo, vamos dar uma olhada em assuntos e alguns tipos de assuntos especiais. Os sujeitos são outra forma de criar observáveis, mas são especiais porque ambos são utilizáveis como assinante, como observável. Normalmente, você os usa para alguns casos especiais, mas um deles é multi-casting muitos observáveis. Você pode se inscrever muitas vezes para o mesmo assunto. É um caso especial e você não deveria usá-los muito. Se você quiser criar um novo observável, preferem usar observável.Criar ou ainda melhor, um dos padrões, funções de criação observáveis. Existem três tipos especiais de assuntos. Nós temos o assunto da classe base, que podemos usar, mas também temos um AsyncSubject, que só emite quando ele é concluído. Temos um assunto de comportamento, que leva um valor inicial e sempre que você se inscrever, ele emitirá o valor perdido que está sendo emitido, ou se nada está sendo emitido ainda o valor inicial. Temos o objeto de substituição, que reemitirá todos os valores emitidos anteriormente. Ou se você especificar o tamanho opcional do buffer, ele emitirá tantos eventos que não precisam necessariamente ser todos eles. Vamos dar uma olhada no código. Vamos começar importando assunto de rxjs. Nosso assunto é uma classe, então você apenas cria uma nova usando o novo operador. Se você tiver um assunto, você pode se inscrever para configurar uma assinatura. Neste caso, eu vou apenas imprimir todos os valores para o console. Em seguida, podemos emitir alguns valores. Emita duas restrições rxjs é legal. Quando executamos isso, podemos ver que eu mudei para cá na janela do console, assim como você esperaria de um observável. Agora, se eu passar para a assinatura um pouco para baixo, então depois do 'é' vamos primeiro emitir rxjs e depois 'is' e, em seguida, assinar e, em seguida, emitem legal, nós só vemos os eventos sendo emitidos depois de assinarmos. Nós só vemos legal no console. Agora vamos usar os assuntos comportamentais em vez dos assuntos padrão isso leva um valor inicial que dirá início. Quando você se inscrever, você vai chegar ao último valor emitido também. Mesmo que nos inscrevemos depois de emitir 'é', você ainda vê é legal sendo emitido. Se eu passar para a assinatura para o topo, veremos o valor inicial inicial inicial também sendo emitido. Se eu passar para a assinatura até o fim, só vemos a última coisa a ser emitida. Legal. Vamos tentar substituir os sujeitos. Primeira regra, não passar nenhum valor e vamos emitir todo o valor primeiro antes de assinar. Ainda assim, tudo aparece no console. Com o assunto de substituição por padrão, ele irá armazenar em buffer todos os eventos que estão sendo emitidos e a nova assinatura receberá todos eles. Mas podemos especificar o tamanho do buffer. Neste caso, apenas dois, os dois últimos valores sendo emitidos. Os assuntos são realmente úteis se você precisa multi-cast observáveis. Ou você foi embrulhar seu próprio casaco dentro de um observável.Create. Mas eles são um cheiro [inaudível], então não os use muito. A maioria das pessoas acha que você nunca deve usá-los. Vejo você no próximo vídeo. 16. Observables quentes de x frio: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Mastering RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada em observáveis quentes versus frios. A maioria dos observáveis vai ser fria. O frio observável só começa a emitir dados quando há uma assinatura. Se não houver assinatura, nada será emitido. Normalmente, cada assinatura terá sua própria fonte de eventos. Se você tiver dois assinantes de um observável, eles receberão seu conjunto exclusivo de eventos. A maioria dos observáveis em RXJS 6 são frios, eles não fazem nada até que você realmente se inscreva para eles, o que é perfeitamente bom. Do outro lado, há também observáveis quentes. Hot observables começar a emitir valores mesmo que não haja assinaturas, eles não se importam. Eles só começam a extrair dados. Normalmente, se isso acontecer, e você tiver várias assinaturas, elas compartilham o mesmo fluxo de dados. Diferentes maneiras de criar assinaturas quentes, mas normalmente é feito usando um assunto, embora não necessariamente, ele realmente depende de onde a fonte dos dados é criada. Vamos dar uma olhada nesse comportamento no código. Aqui tenho dois manipuladores de botões. Primeiro crio um observável frio e, em seguida, no evento clique, subscrevo a ele. Abaixo eu crio o observável quente, e novamente, no evento clique, eu assino a ele. Ambos são criados quando a página é carregada e ambos são inscritos apenas quando o respectivo botão é clicado. Vamos atualizar a página para ter certeza de que começamos com um slide limpo. Aguarde um pouco e, em seguida, clique em Iniciar frio. Você vê que obtemos valores sendo emitidos, mas ele realmente começou com o valor 0. Vamos atualizar a página novamente e tentar com quente. Você vê que depois de uma breve pausa, começamos com o valor 46. Não começamos com 0, entramos no meio de um fluxo de números e começamos a recebê-los. Como o código realmente se parece? Para um observável frio, você vê o observável é criado usando observable.create. Dentro iniciamos um intervalo e começamos a emitir valores. Para o observável quente, criamos um assunto e imediatamente começamos a emitir valores independentemente de haver alguma assinatura. Também não paramos de enviar valores se alguém cancelar a assinatura. A maioria dos observáveis são frios e isso é perfeitamente bom. Eles não precisam fazer nada até que você esteja realmente solicitando dados. Alguns observáveis são quentes, sempre emitem valores. Exemplos típicos de um observável quente seria algo como um comerciante de ações. Se você estiver ouvindo ou não, as ações estão sendo negociadas, as ações de compra e venda estão sendo emitidas. Se várias pessoas estiverem ouvindo, elas podem ouvir o mesmo fluxo. Com um frio observável, se ninguém estivesse prestando atenção, nenhuma venda seria feita. Vejo você no próximo vídeo. 17. Encontrar o operador certo: Oi MORRIS aqui. Bem-vindo de volta a este curso sobre dominar arcos ES6 sem quebrar um suor. Neste vídeo, vamos dar uma olhada em encontrar operadores para usar, porque há muitos e encontrar os certos pode ser um pouco difícil. Nós temos os sites RXJS e há muita documentação sobre os operadores lá. Vamos até lá por um momento. Aqui temos sites RXJS e referência a todas as funções lá. Há muitos deles. Se eu rolar para baixo até os operadores, há uma lista e tanto. Agora, se você sabe quais operadores que estão interessados em, por exemplo, pare. Você pode encontrá-lo aqui e ir até ele. Mas se você realmente não sabe qual operador usar, você tem um problema e qual operador eu preciso resolver. Este site é difícil de usar. Nesse caso, para o site ReactiveX é muito mais fácil. Eles realmente têm estes gráficos de decisão sobre encontrar o operador certo, nem todos os operadores estão lá, mas muitos estão. É dividido de tal forma que você pode realmente passar. Isto é o que eu quero resolver. Qual operador eu usaria? Se abrirmos isso, você pode ver que ele está dividido em diferentes seções, classificando um novo observável, que não é sobre operadores, mas muitas outras coisas. Suponha que eu queira emitir itens de um observável depois de transformá-los. Bem, um de cada vez, use a função de mapa. Um observável no momento, use mapa concat. Você pode ver que há uma boa decisão. Eu só quero reemitar certos itens, o que acontece com bastante frequência. Você pode usar para filtrar ou rápido ou tomar ou perder, ou pular alguns, etc É muito mais fácil encontrar operadores desta forma, então eu uso isso com bastante frequência. Basta ter em mente que alguns operadores são nomeados de forma diferente. Se procurarmos erros, como eu tenho um observável e eu quero recuperar graciosamente de uma notificação que podemos usar para pegar operador. Devemos pegar o erro. Se eu rolar um pouco para baixo, eu vou ver implementações para diferentes idiomas, então vamos ver CatchError para RXJS. Mas se formos procurar por RXJS catch, vemos que é realmente chamado CatchError. A razão é porque catch é uma palavra-chave reservada e é uma função autônoma para que não possa ser nomeado após uma palavra-chave reservada. Vejo você no próximo vídeo quando começaremos a usar diferentes operadores. 18. O operador de torneira: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada no Operador de Toque. O operador de torneira é destinado a efeitos colaterais. Use-o para depuração, que eu costumo fazer, ou alguns outros efeitos colaterais, é preciso uma assinatura como a função de inscrição, portanto, ou três funções para o próximo erro incompleto, ou um objeto com um três funções. Ao contrário de se inscrever, ele realmente não ativa o observável. Aqui no site RXJS você pode ver que temos documentação para cima com os três parâmetros necessários. Site não ReactiveX, podemos encontrá-lo também, exceto que é chamado de “Faça aqui”. A razão é a morte na maioria das implementações Rx, reativo X doce com todas as nossas diferentes linguagens usa para fazer operador. RXJs varia de que com o número de operadores devido a restrições. Com a maioria das outras implementações ReactiveX, os operadores são funções apenas objetos observáveis. Isso costumava ser verdade para os RXJs também. Nesse caso, Do and catch, por exemplo, estava bem, mas há palavras-chave reservadas, bem, você pode usá-los como uma função em um objeto. Você não pode usá-los como palavras-chave autônomas. Com RXJS 6, vamos operadores capazes e eles tinham que ser funções autônomas para que eles não renomeassem alguns deles, e Do foi renomeado para tocar e catch foi renomeado para catch error. É por isso que há pequenas diferenças na nomeação. Site ReactiveX mais antigo é ótimo porque a documentação é muito mais completa e há bons diagramas sobre como ele funciona. Vamos dar uma olhada em alguns códigos, nós temos um temporizador simples aqui, ele foi por dois segundos e depois emite, mas também antes de iniciar o temporizador, nós desativamos o botão e quando ele é acionado, nós o reativamos. O botão é desativado e reativado quando o temporizador é acionado. Na verdade, isso deveria ter sido feito quando estiver completo, mas me disse que dispara uma vez, não há muita diferença. Vamos importar toque e vamos usar a função pipe para tocar operador no observável. Como inscrever, quem pode usar uma função simples, cai na função e imprime o item atual que está sendo emitido para o console. Abra a janela do Console, Iniciar e, após dois segundos, vemos o item sendo emitido. Muitas vezes, na verdade, encurtar isso eu acabei chamar Tap and Push em referência ao conselho irá bloquear, que irá realmente produzir exatamente a mesma coisa. Apenas uma sintaxe ligeiramente mais curta. Lá nós vemos. Agora, neste caso, eu realmente tenho os efeitos colaterais na função de assinatura para reativar o botão. É aí que entra o operador da torneira. Vou usar para completar uma volta no operador de torneira e reativar o botão lá dentro. Agora minha assinatura só está interessado no valor e efeitos colaterais como reativar o botão ou delegado para tocar operador. Ele funciona dentro deste caso, ele realmente parece um pouco funky porque eu estou passando em não duas vezes para os dois primeiros parâmetros então, neste caso, passar em um objeto com o callback completo faz mais sentido. Vamos alterar a sintaxe, ela ainda se comporta exatamente da mesma maneira quando eu clicar em “Iniciar”, desativado, e depois emite ela está habilitada. Tap é um operador muito útil, eu usá-lo para depuração, mas é útil para outros efeitos colaterais, como desativar, ativar botões também. Vejo você no próximo vídeo. 19. O operador de mapa: Oi, Maurice aqui. Voltaremos a este curso, a dominar RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada no operador do mapa. O operador Map é realmente útil. Ele pega objetos de uma entrada e o transforma em alguns objetos de saída. Basicamente, a entrada vai para a saída de alguma forma diferente. Em alguns casos, tudo o que você deseja fazer é extrair um único valor do objeto de entrada. Nesse caso, o operador de bloco é outra alternativa. Mas neste vídeo, vou usar “Transformar”. Vamos dar uma olhada no código. Aqui eu tenho um exemplo de tela que usamos um tempo atrás, quando olhamos para obter fluxos observáveis de eventos DOM. Funciona muito bem. Mas não assinei, estou usando os eventos originais do mouse, tudo o que está lá, então estamos recebendo muito mais dados do que realmente precisamos. Também estou usando esses objetos de contexto global. Vamos importar o operador Map para corrigir isso. Vamos canalizar os eventos para mapear operador e extrair os valores que precisamos. Nesse caso, o OffsetX e OffSETY. A assinatura não recebe mais para completar arcos de evento, ele só recebe para posicionar agora. Vamos atualizar o código e assinar para refletir isso, usar a posição X na posição Y. Nosso lápis ainda funciona e podemos desenhar sobre ele. Ótima. Ainda estamos usando esses objetos de contexto do escopo externo. Vamos capturar isso também no mapa, porque vamos recuperar isso do eventact.targets.getcontext 2D. Agora não estamos mais dependentes dessa variável de contexto do escopo externo. Estamos apenas postando tudo o que o assinante realmente precisa. Ótima. O operador Mapa é muito popular. É usado muito. É realmente ótimo transformar um objeto de uma forma para outra forma, ou para falar nisso, ele não precisa ser um objeto, qualquer coisa serve. Vejo você no próximo vídeo. 20. O operador de filtro: Oi. Aqui é Maurice. Bem-vindo de volta a este curso sobre Mestre em RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada em um operador muito popular, o Filtro. Como o nome sugere, o filtro irá apenas selecionar os itens a serem encomendados. Ele recebe cada item que está sendo emitido pela fonte observável e apenas em meio a coisas passando o filtro no alvo observável. Importante notar é que o filtro não afeta o fechamento de observável. Ao contrário de alguns outros operadores de filtragem relacionados como tomar e primeiro, que vai fazer isso. Aqui, podemos ver o diagrama de mármore Rx para filtro. Vemos o fluxo observável de entrada com os valores 2, 30, 22, 5, etc Vemos apenas os valores maiores do que 10 sendo emitido na saída observável. Vamos dar uma olhada em algum código. Eu tenho um pequeno temporizador aqui e basicamente vai emitir um novo número a cada meio segundo. Eu tenho que tocar operador para imprimi-lo para o Console e eu vou exibi-los na interface do usuário que vemos os valores 1, 2, 3, etc, aparecendo. Vamos filtrar isso para usar apenas números primos. Primeiro, importamos o operador de filtro. Em frente, vamos para a função para filtrar primos. Em seguida, na função de tubo, adicionamos o filtro e, para cada valor que está sendo emitido, testamos sua primazia. Estou fazendo isso depois de usar o operador de torneira. Mas quando eu clicar em “Iniciar”, veremos todos os números sendo emitidos no Console, mas apenas os números primos na própria interface do usuário. Não ordem é importante se eu mover o filtro primeiro e toque, segundo operador, em seguida, eu vou primeiro filtrar e, em seguida, vai imprimir para o Console. Agora, eu só vou ver números primos no console. Filtros e outro operador muito álamo para muito poucos filtro como operador para casos de uso muito distintos. Vejo você no próximo vídeo. 21. A tomada e a: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RxJS6 sem suar. Neste vídeo vamos dar uma olhada para tomar operador e a tomada relacionada perdido. O operador take permitirá que você tome o primeiro x número de itens que estão sendo emitidos para um observável, tomar último é dois opostos. Ele lhe dará o último x número de valores sendo emitido seu próprio observável. Então tomar é diferente do filtro, o filtro não muda quando o observável foi fechado. Take fechará o observável assim que o número de valores exigir para a nossa frente. Aqui vemos o diagrama de mármores rx para tomar. Então a entrada observável emite um, dois, três e quatro. Só pegamos os dois primeiros. Então ficamos com um e dois. Perder-se com um. Novamente, a entrada emite um, dois, três e quatro. Take lost emite apenas quatro, mas note que ele só emite quando a entrada observável é fechada. Só então ele sabe o que realmente é o último item que está sendo emitido? Vamos dar uma olhada em algum código. Aqui, eu tenho um botão com um intervalo que emite um valor a cada meio segundo. Vamos imprimir no registo da consola. Vamos exibi-lo na interface do usuário e interface do usuário também vamos exibir o fato de que o observável foi concluído. Agora o observável continua emitindo valores porque nunca paramos. Vamos pegar os primeiros cinco valores. Vamos importar para levar operador, e então eu vou canalizar o observável verdadeiro para tomar operador. Lá vai postar cinco para levar os primeiros cinco itens. Lá vemos os itens aparecendo e o observável sendo completo. Vamos mudar isso para nos perdermos. Pegaremos os últimos cinco elementos. Quando eu clicar em Iniciar, você verá números sendo emitidos pelo operador de toque, que é antes de se perder, mas nada aparece na interface do usuário. Isso é porque a entrada observável nunca fecha. Então, tomar perdido não sabe quando emitir valores. Vamos usar esse operador para tomar os primeiros 10 valores que estão sendo emitidos, que mais próximo do observável depois. Em seguida, usaremos o último para pegar os últimos cinco valores desses. Podemos ver no log do console que 10 valores foram emitidos, mas na interface do usuário só vimos concluída. Isso é porque tomar última emissão após a conclusão. Mas quando nos movemos para tocar operador como o último operador, podemos realmente ver o que estava sendo emitido no console. Clique em Iniciar novamente. Está emitindo valores. Pegue as perdas, capturando-as, e agora emite os cinco valores perdidos. Então take and take lost são muito úteis para capturar um subconjunto dos elementos que estão sendo emitidos. O primeiro ou o último. Se você só quer muito primeiro, ou resultados muito perdidos sobre o primeiro e o último operador, que são úteis. Eles também tomam um predicados e o valor padrão no caso nada estar sendo emitido no momento em que o observável fecha. Capacidades que levam e se perdem não têm. Vejo vocês no próximo vídeo. 22. O operador do takeWhile: Oi Marie share. Voltaremos a este curso de dominar arcos ES6 sem suar. Então, neste vídeo, vamos dar uma olhada em outro operador para filtrar dados do TakeWhile, operador. O TakeWhile é como o operador de filtro e o operador de tomada combinados. Ele leva o primeiro número de elementos que estão sendo emitidos em observável, mas para o número de elementos que estão sendo emitidos. É preciso depende dos predicados. Ao contrário de tomar, que leva um número fixo, ele usará um predicado assim como o filtro. Ao contrário do filtro que mantém o observável aberto e apenas emite qualquer coisa que passa, TakeWhile fechará o seu observável assim que o primeiro item admitido não passar o filtro. Aqui você pode ver os arcos diagrama de mármores para tomar enquanto ver a condição do filtro é x sendo menor do que cinco e assim que seis é emitido, a saída observável é fechada, e você pode ver se eu mover o seis após o quatro o quatro fez isso, e se eu me mudei para sete antes, morte mais próxima da corda. Vamos dar uma olhada em algum código. Novamente, temos um pequeno intervalo que emitirá um novo número a cada 500 milissegundos. Vamos importar para o operador TakeWhile e tomar elementos, desde que estejamos abaixo de cinco. Se eu clicar em Iniciar agora veremos os primeiros cinco elementos sendo emitidos, mas assim que chegarmos a cinco, você observável está fechado. Tome poços modelos bastante usuais versáteis como filtro, mas ainda bastante útil. Lembre-se que ele realmente fecha a saída observável. Vejo você no próximo vídeo. 23. O operador de takeUntil: Oi, sou Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo vamos dar uma olhada no Operador TakeUntil. Esse operador TakeUntil é muito parecido com o operador TakeWhile. Leva valores sendo emitidos a partir de um fluxo observável e emite valores até que seja dito para parar. Nós não gostamos de TakeWhile, que usa um predicado, TakeUntil realmente usa outro fluxo para determinar quando parar. Aqui você pode ver o diagrama de mármores laranja. Você pode ver TakeUntil leva elementos do primeiro fluxo até que o segundo fluxo seja emitido. Se eu mover o primeiro elemento no segundo fluxo, você pode ver o observável resultante é realmente uma mudança. Vamos dar uma olhada no código. Assim como antes, eu tenho o botão Iniciar que escuta um evento clique e vamos começar um intervalo emitindo a cada 500 milissegundos. Neste caso, eu também tenho o botão parar e agora você usando a função de eventos do Fórum para criar um observável sempre que clicamos nele. Eu vou tocar operador lá só para que possamos ver quando clicarmos nele. Observe que não estou assinando o evento stop. Se eu clicar em Iniciar, vemos valores sendo emitidos. Mas se eu clicar em parar, não vemos nada acontecendo. Não vemos a mensagem do console porque não estamos assinando esse evento. Vamos usar o botão de parada para parar a string de intervalo. Vou importar operador TakeUntil e pelo fluxo de intervalo através TakeUntil e política na cadeia de parada lá. Eu clico em iniciar e o fluxo de eventos está em execução, eu clico em parar e ele pára. Note que se eu apenas clicar em parar, nada acontece porque ainda não há recursos observáveis para ele. Precisamos iniciar o primeiro fluxo antes que o segundo fluxo seja inscrito. TakeUntil é bastante útil. Ele combina dois fluxos, um fluxo de entrada e um outro fluxo para determinar quando parar de receber eventos do fluxo de entrada. Lembre-se que fecha o fluxo de saída assim que o segundo fluxo emite. Vejo-te no próximo vídeo. 24. A varredura e reduzir as operadoras: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Master RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada em dois operadores muito comparáveis, a varredura e a redução. São quase iguais. O operador de digitalização leva uma função acumulador que leva o resultado anterior e o valor atual sendo emitido, e obviamente leva um valor inicial e, em seguida, ele vai emitir cada valor do acumulador. Aqui podemos ver o operador de varredura no site de mármore Rx. Você pode ver para cada valor que está sendo emitido na entrada observável obtemos um valor sendo emitido na saída observável, o resultado da repetição do acumulador para cada valor. O operador de redução leva exatamente os mesmos parâmetros, uma função acumuladora tomando o valor anterior e atual que está sendo emitido, e um valor inicial opcional. A diferença, porém, é que ele só emite quando a entrada observável é fechada. Aqui vemos o operador reduzido nos sites de mármore Rx, e percebemos que ele só emite uma vez no final quando a entrada fecha. Vamos dar uma olhada nisso em código. Eu tenho um código de exemplo, e eu começo com um intervalo de alguns números. Se eu clicar no botão Iniciar, nós apenas ver os números emitidos e eu vejo o último número emitido um cinco na interface do usuário. Vamos importar digitalização e reduzir, e vamos primeiro usar para digitalizar o operador. A varredura tem uma função que tem um resultado anterior como o primeiro parâmetro e o valor atual sendo emitido como o segundo parâmetro. A primeira vez que o valor anterior será o valor inicial que passaremos. Se não houver nenhum valor inicial sendo passado, então o primeiro valor que está sendo emitido não fará com que o acumulador seja executado, é apenas no segundo. Em seguida, o primeiro valor é o anterior e o segundo valor que está sendo emitido é o atual. Mas, em geral, eu sempre uso um valor inicial, e se eu apertar o botão Iniciar agora vemos a soma de 1-5, que é 15 rolamento. Vamos fazer o mesmo com a função reduzida, em vez de digitalização vamos usar reduzir, e se eu apertar “Start”, vemos exatamente a mesma saída. Nós realmente não podemos dizer a diferença entre digitalizar e reduzir agora, então vamos fazer um intervalo em vez de um intervalo fixo de números, e a grande diferença aqui é, claro, que o intervalo não fecha porque o tempo continua demorando. Com operador de varredura, vemos todas as somas imediatas dos valores sendo emitidos e se tentarmos o mesmo com o operador de redução, isso não vai acontecer. Se eu pressionar “Iniciar”, vemos valores sendo emitidos no console, mas na interface do usuário, não vemos seus resultados. Isso ocorre porque o intervalo permanece aberto, ele não é concluído, portanto, a redução nunca emite realmente um valor. Vamos importar o operador take e tomar os primeiros 10 valores do intervalo. Agora o observável conclui e agora reduzirá irá, após 10 valores sendo emitidos, emitir os resultados da soma de todos os números que estão sendo emitidos. Digitalize e reduza, muito semelhante, ambos tomam uma função acumuladora com um valor inicial opcional. A diferença é quando eles emitem, digitalizar emite cada vez, reduzir emissões após a conclusão, geralmente reduz um grande operador para usar, mas ele só funciona se você tem um observável que mais próximo. Vejo vocês no próximo vídeo. 25. O operador de par: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo vamos dar uma olhada no operador emparelhado, o que pode ser bastante útil em alguns casos. O operador emparelhado basicamente combina dois elementos que estão sendo emitidos na entrada observável na saída observável. Cada evento emitido na saída observável é um array contendo dois valores, o anterior e o valor atual sendo emitido. Há dois operador r semelhante, BufferCount, que é um pouco mais flexível porque você pode especificar o tamanho da matriz sendo emitida, ele não tem que ser dois, ou BufferTime que leva timespan e apenas recolhe todos os itens que estão sendo emitidos em um intervalo de tempo e os emite como uma matriz. Aqui você pode ver o operador emparelhado no site do RxMarble. Você pode ver que a entrada observável emite A, B, C, D, E, F. A saída observável emite as matrizes A, B, C, C, D, etc O primeiro item não tem um item correspondente sendo emitido na saída, mas todos os próximo são seus valores com o anterior. Vamos dar uma olhada em algum código. Aqui eu tenho a amostra de Canvas novamente que usamos antes. Lembre-se quando eu mover o mouse para o Canvas, podemos desenhar sobre ele, mas ele desenha pontos onde o mouse está. Se eu mover o mouse rápido, temos mais separação entre os pontos se eu movê-lo mais lento são próximos juntos. Usando esses pontos e par sábio, podemos realmente transformá-los em uma linha. Vamos primeiro importar o operador par sábio. Então, depois de mapear nossos eventos, nós transformá-lo em pares, canalizando-o para operador emparelhado. Agora, em nossa Subscrição, temos pares de posições, não apenas posições individuais. Vamos usar a sintaxe de estruturação [inaudível] para obter a posição de e para do par. Vamos pegar o contexto do primeiro, não importa qual dos dois nós usamos. Agora usando a API de contexto, comece, mova para a linha dois e traçado. Podemos realmente desenhar uma pequena linha entre os dois pontos. Claro, emparelhamento deve ser uma chamada de função. Então, agora, se eu mover o mouse para o Canvas, nós temos uma linha bonita em vez de uma linha de pontos separados. Pairwise pode ser muito útil para este tipo de situações em que você quer emparelhar as coisas. Os operadores BufferCount são um pouco mais flexíveis porque você pode especificar o tamanho exato do buffer desejado. Vejo você no próximo vídeo. 26. A flatMap, mesclagem de Map, de mapa de concatMap e and and: Oi, Maurice aqui, bem-vindo de volta ao placar do Master RXJS 6 Sem Quebrar A Sweat. Neste vídeo vamos dar uma olhada em vários operadores de mapa. Eles são basicamente todos projetados para mapear um observável em outro observável, então vamos olhar para: FlatMap, MergeMap , ConcatMap e SwitchMap. Primeiro vamos olhar para FlatMap e MergeMap, e vamos juntá-los porque FlatMap é apenas um alias de MergeMap. Eles são exatamente a mesma coisa. MergeMap começa a emitir eventos de um observável aninhado assim que o observável externo emite. MergeMap irá basicamente emitir todos os valores de observáveis aninhados independentemente do que está acontecendo. Se o observável externo emite três vezes, ele inicia o observável aninhado três vezes e ele vai apenas manter emitindo eventos de todos esses observáveis, então eles estão todos intercalados juntos, há realmente nenhum ordem discernível lá entre eles. ConcatMap é um pouco diferente. ConcatMap também emite eventos do observável aninhado quando o observável externo emite, mas espera que o observável aninhado seja concluído antes de iniciar o próximo, então não há intercalação e tudo está bem ordenado. Ele ainda espera que o observável aninhado seja concluído, então, se ele não for concluído, ele não disparará novamente. Aqui você vê o diagrama RxMarbles para ConcatMap e você vai ver se eu mover para C ou para B eventos no exterior observável que os observáveis são apenas enfileirados. A última função do mapa, vamos dar uma olhada é SwitchMap. SwitchMap é um pouco como ConcatMap em que tudo está bem ordenado, mas neste caso, quando o observável externo emite novamente, ele vai cancelar o observável interno. Aqui você pode ver o diagrama RxMarbles. Observe quando eu mover os eventos no observável externo, que os eventos do observável interno são descartados se eu mover o B para a esquerda, então ele é acionado mais cedo, vemos que nem todos os eventos aninhados do primeiro em nosso observável realmente Fogo. Vamos dar uma olhada em algum código. Aqui temos um código de exemplo. O observável ao ar livre é basicamente um clique observável a partir do botão Iniciar, então estamos usando a partir de eventos para criar um observável. Eu canalizo isso em um operador de escaneamento apenas para que possamos obter valores incrementando e podemos ver qual clique ele é acionado. Se eu clicar no “botão Iniciar”, vamos ver o número 1, 2, etc Vamos usar o MergeMap e o aninhado observável neste caso é apenas um intervalo de números 1-5 e eu uso o operador mapa para transformá-lo em uma pequena string mostrando a partir de qual clique ele originou ou em qual evento ele está no observável aninhado. Se eu clicar em “Iniciar”, vemos cinco eventos sendo emitidos e se eu clicar em “Iniciar” algumas vezes, vemos exatamente a mesma coisa emitida novamente. Vamos tentar com ConcatMap e obtemos exatamente a mesma saída. À primeira vista, parece que eles se comportam exatamente da mesma forma. Vamos tentar rapidamente o SwitchMap e novamente obtemos a mesma saída. Não parece haver muita diferença. A razão é que o observável aninhado é criado a partir de um intervalo, então ele é executado muito rápido e já é feito no momento em que clicamos novamente. Vamos tentar com um intervalo, então a cada segundo vamos emitir um evento no observável aninhado e levará cinco eventos novamente. Se eu clicar em “Iniciar” várias vezes, você verá que os eventos estão intercalados. Temos clique e os eventos são todos intercalados juntos e não há nenhuma boa ordem discernível real lá. Vamos mudar de MergeMap para ConcatMap agora, e novamente se eu clicar em “Iniciar” várias vezes, veremos um comportamento muito diferente. Neste caso, vemos todos os eventos do Click 1 e, em seguida, quando isso é feito, vemos todos os eventos do Click 2 e, em seguida, todos os eventos do Click 3, então tudo está bem em ordem. Agora, se eu remover essa tomada cinco, basicamente temos um observável aninhado que nunca completa. Se eu clicar, você verá todos os eventos do Click 1 aparecerão, mas se eu clicar mais algumas vezes, nunca veremos eventos na verdade, ele espera que o observável aninhado seja concluído, que nunca é agora. Vamos dar uma olhada no SwitchMap. Se eu clicar em “Iniciar”, veremos os eventos do primeiro clique aparecerem, mas se eu clicar em “Iniciar” novamente, esse primeiro fluxo de eventos aninhados será cancelado e um segundo será iniciado. Se eu clicar em “Iniciar” várias vezes, você verá um novo fluxo de eventos começando sempre, mas o primeiro será cancelado. Existem vários operadores de mapa para combinar fluxos, todos eles são semelhantes, mas ligeiramente diferentes em como eles lidam com fluxos de eventos aninhados, então escolha o que você precisa para um trabalho específico, veremos o que acontece com o fluxo de eventos aninhados quando vários eventos acontecem no fluxo de eventos externo. Todos eles são úteis, todos eles têm seus casos de uso. Vejo você no próximo vídeo. 27. O operador de startWith: Oi, Maurice aqui. Bem-vindo de volta a este curso de Mastering RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada no Operador StartWith. StartWith é um operador que permite adicionar um evento inicial antes de todos os outros serem emitidos. Vamos apenas inserir um valor e, em seguida, continuar emitindo todos os outros eventos que ele recebe. Este é o diagrama [inaudível] de mármores para StartWith. Você pode ver que o observável original emite dois e três, mas StartWith começa com um, então ele emite um, dois e três. Vamos dar uma olhada em alguns códigos. Basicamente, você tem a mesma configuração como no último vídeo, onde usamos forma de eventos para obter um fluxo de eventos, mudar para um fluxo de intervalo usando mapa de comutação, mas o intervalo só é acionado uma vez a cada dois segundos e meio. Se eu clicar em “Iniciar”, não vemos nada acontecer por dois segundos e meio. Houve um atraso e tanto. Vamos adicionar um evento imediato assim que clicarmos. Vamos importar StartWith e, em seguida, vamos incluir StartWith na função pipe. Começaremos com o evento com a palavra “começar”. Vamos realmente movê-lo abaixo da função Map. O primeiro evento será apenas start, e então os próximos eventos mostrarão qual clique foi e qual foi o número do evento. Agora, se eu clicar em “Iniciar”, vemos o início aparecer imediatamente, e depois de dois segundos e meio, vemos os eventos aparecerem. Se eu clicar em “Iniciar” novamente, vemos início aparecer imediatamente novamente. O operador StartWith provavelmente não é o operador mais comum, mas é bastante útil. Eu tenho um bom número de lugares onde eu realmente usei isso no meu código. Vejo você no próximo vídeo. 28. Operadores personalizado: Oi lá. Bem-vindo de volta a este curso sobre Master RXJS 6 Without a Sweat. Neste vídeo, vamos dar uma olhada na criação de operadores personalizados. Criar operadores personalizados é bastante fácil e bastante útil. A melhor maneira é começar com um dos operadores padrão. Se você está realmente fazendo algo que é mais especialização de um dos operadores padrão. Comece o seu reutilizado em e você é feito muito rapidamente. Se você precisa de mais flexibilidade, classificação e observável usando ponto observável criar é o caminho a seguir. Então vamos dar uma olhada no código. Aqui eu tenho o exemplo que fizemos antes quando estávamos filtrando números primos. Estou basicamente usando o operador de filtro, verificando números primos e esta é a função que estamos chamando. Funciona como um encanto. Vamos supor que queremos usar é primo mais como um operador em vez de algo que chamamos no filtro. Então use assim. Se eu tentar chamá-lo assim, teremos um erro de tempo de execução. Não é um operador ainda, é apenas uma função simples. Mas transformar essa função em um operador é bastante simples. Começamos importando o operador de filtro e nós apenas retornar ao operador de filtro com os parâmetros necessários. Neste caso, ele recebe o número que está sendo passado dentro. e retornamos se esse número é um número primo ou não. Funciona exatamente como seria de esperar. Realmente simples. Basicamente tudo o que fizemos é apenas movido para operador de filtro do interior do tubo para uma função separada onde é reutilizável. Suponha que você precisa ser um pouco mais flexível e apenas usando o operador padrão não cortá-lo, podemos começar usando observável dot create, novamente irá exportar uma função, mas agora vamos usar observável para criar, para subscrever o pai observável. Então a fonte do parâmetro é uma fonte observável que vamos usar e, em seguida, observável ponto criar reinicializações, assinando pontos e ouvindo o evento e emitindo o que queremos emitir. Neste caso, todos os números primos. Então, implementamos o primeiro parâmetro para se inscrever no próximo manipulador. Toda vez que um número é emitido, verificamos se é um primo e se é emiti-lo novamente neste observador. Corrigimos o meu erro de digitação e os artistas, temos os números primos de novo. Isso está quase correto. A coisa que está faltando é lidar com o erro e os fatos que o observável fechar. Vamos adicionar o manipulador de erros e o manipulador Completo como o segundo e o terceiro parâmetro. Mais uma vez, vamos passar tudo para o próximo observável. Não há necessidade de lidar com nada específico aqui e tudo ainda funciona. Nesse caso, não estamos fazendo nada com erros ou conclusões. Então não vemos diferença ao executá-lo. Criar operadores observáveis personalizados é realmente fácil. Se você pode reutilizar um Operador padrão, bom para você, faça isso, é a maneira mais fácil. Caso contrário, basta criar um novo observável e emitir o que você deseja emitir vindo da entrada. Possivelmente atualizando valores de filtragem de valores, ou talvez emitindo ainda mais itens. Vejo você no próximo vídeo. 29. Testando operadores e observáveis: Oi Maurice aqui. Voltaremos a este curso sobre Mastering RXJS 6 Sem Quebrar um suor. Então, neste vídeo, vamos dar uma olhada no operador de teste e fluxos observáveis. Em alguns casos simples, como o operador de número primo, um teste de unidade padrão simples realmente fará. Mas, em muitos casos, isso não é suficiente e queremos mais. Portanto, é uma biblioteca realmente útil no npm chamado rxJS mármores, que é uma biblioteca de testes de mármores. Assim, você pode descrever o fluxo que você espera como um diagrama de mármore. Você pode realmente testar se o observável resultante é o que você espera. Realmente fácil de usar e funcionou com um monte de estruturas de teste diferentes. Vou usar Jest, mas funcionará bem com Jasmine ou EVA ou Mocha. Então vamos dar uma olhada no código. Aqui, eu tenho dois operadores principais que criamos no vídeo anterior. Estou usando a versão simples, apenas estendendo o operador de filtro e apenas como um lembrete, quando eu executo, eu clique em Iniciar, vemos todos os números primos aparecem. Ótima. Então vamos escrever um teste de unidade para isso que eu já acabei de configurar. Então, se eu executar isso e eu adicionar o traço, traço opções Schwartz, então apenas permanece ativo 14 para arquivos fonte e nós executamos testes conforme necessário. Podemos começar a testar. Então você pode ver que já existe um arquivo de teste está preparado para testar todas as brincadeira, mas não há nenhum teste nele, então apenas realmente falha. Ele espera um mínimo de um teste. Vamos fazer a coisa simples primeiro, você operadores RXJS padrão e observáveis e capacidades de teste Jest. Portanto, nenhuma biblioteca adicional é necessária. Então vamos usar o intervalo para criar um intervalo de números e eu vou usar para reduzir operador, para reduzir isso em um único array que podemos testar contra. Então vamos criar um intervalo a partir de um com o número cinco é função principal e vamos usar para reduzir isso em um único array. Nossa assinatura será acionada apenas uma vez com resultados completos. Então vamos testar se a matriz principal resultante é igual a uma matriz conhecida. Então vamos adicionar os números 1, 3, 5, 7 e 8. Então nós realmente temos um teste de falha aqui porque 1 e 8 não são números primários. No entanto, se olharmos para uma saída Jest, vemos o teste executado e ele passa. Ele não falha. Por que é isso? Bem, o teste é assíncrono. Observáveis são assíncronos, então a expectativa termina após os testes como já terminou. Então, adicionando o não ligar de volta, nós podemos realmente ter certeza de que Jest espera que nosso teste seja concluído. Agora vemos um teste de falha. Podemos ver que 1 e 8 não são esperados, mas o número 2 era esperado porque esse é um número primo. Vamos atualizar a expectativa. Mude 1 para 2 e remova 8 e nossos testes vão passar. Há Jest corre e relatórios são testes como verde. Ótima. Agora caso simples como este, isso realmente funcionaria, mas se quisermos testar um pouco mais do que isso não vai cortar. Uma biblioteca realmente útil ao testar operadores RXJS e fluxos RXJS mármores. Então vamos importar bolinhas de gude e criar um novo teste, testando números primos até 10. Temos um novo teste, mas em vez de fornecer um retorno de chamada, vamos envolver o retorno de chamada dentro da função mármore. Irá dar-nos um contexto que nos permitirá criar observáveis e testar observáveis. Então, usando context.cold eu posso criar um observável frio e aqui eu descrevo como meu observável deve ser. Então, cada posição é uma janela de 10 milissegundos. Então vamos esperar 10 milissegundos, emitir 1, esperar mais 10 milissegundos, emitir 2 etc. Todo o caminho até 9 pesos, 10 milissegundos e, em seguida, o tubo vertical significa fechar o observável. Então, esses são os nossos números de entrada observáveis. Podemos criar uma expectativa semelhante. Então os números primos observáveis. É a mesma string, exceto que agora vamos passar para um para o 6 para 8 e o 9 porque esses não são números primos. Então agora eu posso criar um fluxo observável resultante usando o tubo é operador principal no número de observáveis e que deve retornar apenas números primos. Então, usando o ponto de contexto esperar, podemos testar se esses resultados são o nosso número primo esperado observável. Lá Jest corre e temos um teste de aprovação. Agora eu sempre gosto de ter um teste de falha. Um pouco paranóico eu queria ver o meu teste falhar. É muito fácil escrever testes que não falham. Então vamos gravar nove como número primo inesperado, que é claro que não é e vemos o teste falhar com o número nove mais sendo emitido, mas esperado exatamente como esperamos. Então vamos removê-lo e nosso teste está verde novamente. Então, estas obras, mas é bastante simples. Na verdade, se quisermos começar a emitir números mais altos, não podemos fazê-lo assim porque cada dígito dentro do fluxo de mármore é algo que está sendo emitido. Então, se quisermos emitir um número maior, podemos fazê-lo, mas precisamos adicionar um segundo parâmetro para os contexts.cold quando criamos o observável, que é o valor real. Alguma classificação de valores objeto com A sendo 11, b 12, etc Em seguida, em context.cold, eu vou emitir A, B, C, D, E e quando um A vai ser emitido, ele vê que há um valor, A no objeto valores, e ele irá realmente emitir o valor em vez de dois dígitos listados. Assim podemos emitir tudo o que quisermos. Assim, podemos criar os primos esperados observáveis da mesma maneira. Com, claro, B, D e E não são primos porque 12, 14 e 15 não são primos, então apenas A e C são sobras. Agora, quando fazemos o teste usando Jest, ele passa. Isso é realmente bom vamos mudar por um momento da implementação simples para o operador usando observable.create. Vemos o teste ainda passar. Mas agora se eu esquecer ou cometer um erro com a conclusão, nosso teste também falha, porque com a barra vertical no observável, ele realmente denota o fechamento de um fluxo. Então ele espera um fechamento, mas isso não acontece porque nós cometemos um erro em nosso operador e nosso teste falhou. Não estamos testando dentro da condição de erro, mas se fizéssemos, exatamente o mesmo aconteceria. Então conserte o cordão e o teste fica verde novamente. Assim, criar testes de unidade padrão pode ser útil. Foi útil num caso simples como este. Mas em muitos casos em que você quer testar mais do que apenas um único operador com o único valor, então você precisa de um pouco mais na biblioteca de mármore RXJS torna realmente fácil. Trabalhe com muitas bibliotecas de teste diferentes. Funciona em strings observáveis, não apenas em um único operador, e torna realmente fácil testar tudo. Vejo vocês no próximo vídeo. 30. Introdução em cenários: Oi, Maurice aqui. Bem-vindo de volta ao curso em Master RXJS 6 Sem Quebrar Um Suor. Nesta seção, vamos dar uma olhada em diferentes cenários onde você pode querer usar AJAX e como aplicá-lo. Alguns dos diferentes cenários que vamos dar uma olhada é lidar com erros, pesquisa incremental com solicitações AJAX, onde queremos evitar duplicação de solicitações e mover arquivos para muitos, pesquisando periodicamente uma API AJAX e exibindo resultados, criando um aplicativo semelhante ao banco ou usando um armazenamento de dados como Redux. Pode haver cenários muito diferentes em que você esteja interessado, e alguns deles eu posso não ter coberto. Se você me avisar. Apenas me mande uma mensagem. Deixe um feedback no fórum de perguntas e respostas. Então eu poderia adicionar esses cenários. Se é uma coisa interessante para outros usuários e eu tenho tempo, certamente vou adicioná-lo. Só me avise no que você está interessado. Vejo você no próximo vídeo quando começarmos com o primeiro cenário. 31. Predição de erros de atenção: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Mastering RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada em como podemos detectar erros que impedem que os fluxos observáveis sejam concluídos. Por padrão, se ocorrer um erro de fluxo observável, ele vai emitir esse erro e perto da string. Usando o operador de captura, podemos realmente pegar esses erros e substituir o fluxo por um novo fluxo. Mas seu fluxo original ainda vai ser fechado. Não há nada que possas fazer sobre isso. Combinando vários fluxos, podemos realmente recuperar disso fechando um fluxo secundário e mantendo o fluxo original ativo e funcionando. Vamos dar uma olhada em algum código. Aqui eu estou manipulando o evento clique de um botão, geralmente de manipulador de eventos e eu estou usando o operador de mapa de mesclagem para mesclar em um novo fluxo, que escreveu erro, relatando que algo ruim aconteceu. Se eu clicar em Iniciar, podemos ver o erro ou algo ruim acontece e, em seguida, quando eu limpar e tentar começar de novo, nada acontece. O fluxo observável original do evento foi fechado. Vamos introduzir o erro de captura. O lugar onde adicionamos isso é importante. Se eu adicionar isso ao pipe do fluxo de cliques original, ele vai pegar o erro, mas ele ainda vai fechar o fluxo. Com o erro catch, retornamos uma nova string. Neste caso, eu vou retornar a string com um único evento. Vemos que o fluxo observável não erro mais, mas concluído. Se eu limpar e começar de novo, nada acontece porque ainda está concluído. Neste caso, queremos pegar o erro no fluxo onde ocorreu e não no mainstream. No fluxo que produz o erro. Agora, se eu clicar em Iniciar, veremos a mensagem do operador catch, mas não vemos o fluxo original fechando e se eu limpar, podemos pressionar start novamente e veremos uma nova mensagem do operador catch para que o string original permaneceu aberta. Tenha em mente que qualquer erro irá completar o fluxo que eles ocorreram ao usar o erro catch, você pode pegar o erro, mas ele ainda fecha para transmitir. Combine vários fluxos usando mapa de mesclagem ou mapa de alternância, ou um desses operadores para manter o fluxo original aberto e ainda lidar com erros. Vejo você no próximo vídeo. 32. Retrato de erros: compartilhamento principal. Bem-vindos de volta ao discurso reunindo RGs seis sem suar. Então, neste vídeo, vamos dar uma olhada em novas ações que produziram perecer. Assim, algumas ações podem produzir erros, que são corrigidos por uma repetição simples. Não para sangrar. Pedidos do Ajax. Se eu fizer uma solicitação http, obtenção de dados do xerife para esse servidor pode estar temporariamente inativa ou minha conexão com a Internet pode ter falhado. Eu posso estar no dispositivo móvel indo para o túnel da tripulação ou algo assim. Então lá, para operadores que podemos usar para tentar novamente, foi tentar novamente, o que faz isso imediatamente para um número de toneladas. E o mistério. Tente Win Operator, que leva uma cadeia aninhada e observável e irá tentar novamente quando esse fluxo observável nacional concluir. Assim, pedidos Ajax estrangeiros fazendo repetição imediata. É tipicamente novo, não é a melhor ideia, porque não vai parar. Vai enviar vários pedidos para o servidor muito rapidamente. E se o servidor está falhando porque está ocupado, é muito improvável que isso ajude. Então, tente novamente quando com uma ligeira força, é tipicamente uma abordagem melhor. Então vamos dar uma olhada em algum casaco. Tenha um bom casaco tempo quando clicamos Eu estou fazendo um Ajax disse agitação para um A P I pedido. Isso não existe, ir ao meu servidor e oferecer algo que não existe. Isso vai se sentir com um 40 para fundos do Norte, sem tratamento aéreo ainda. Então, se eu clicar para iniciar botão, vemos a solicitação ocorrer e falhar com os fundos 404 Norte. Se eu clicar novamente, nenhum outro pedido é feito como o observável é a morte. Então, vamos importar para repetir operador e você que primeiro de tudo, assim como erros de captura. O local onde você re tentar na cadeia é importante. Se eu tivesse que tentar novamente após o mapa de comutação e eu clicar em Iniciar, a única coisa que vai acontecer é que vamos tentar mudar de mapa que realmente não faz nada de útil. Se eu clicar várias vezes, podemos ver, eventualmente, que a solicitação se sente assim, neste caso, nós realmente queremos tentar novamente obter Jason. Então precisamos adicionar a função pipe lá e tentar novamente para que o gadge asiático seja repetido . Agora, se eu clicar em Iniciar, você verá quatro solicitações em sucessão rápida, uma solicitação inicial e três repetições. Mas como eu disse, este difícil não é a melhor abordagem com pedidos Ajax. Então vamos usado para tentar novamente um para tentar novamente Winrow chefe, o airshow enfraquecer muito nosso comportamento, dependendo do erro. Neste caso, vou usar a Interpol e emitir uma vez a cada segundo. que significa que a estação será repetida uma vez a cada segundo. Então, quando eu clicar em Iniciar, vemos várias solicitações ocorrendo. Basicamente, solicito a cada segundo, e continua. Nunca pessoal. Isso é porque o intervalo impede de tomar. Então, se quisermos limitar o número fora de repetição. Nós costumávamos tomar cooperador e nós apenas tomar o primeiro 3 eventos então vamos fazer uma solicitação inicial e, em seguida, três retornar pedidos Tente com segundos no meio. Há quatro pedidos. Não, se eu clicar em começar de novo. Ele não sentiu a corda observável, então ele começa a fazer solicitações novamente. Então, o que? Certos erros Repetição é uma estratégia muito útil, especialmente Ajax. Solicitação usando para tentar novamente quando o operador é normalmente a melhor abordagem. Então vejo você no próximo vídeo 33. Busca incremental: Oi, Maurice aqui. Bem-vindo de volta a este curso, Mastering RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada em fazer uma pesquisa incremental digitando em uma caixa de texto e, em seguida, filtrando alguns dados em um servidor AJAX. Vamos começar com um evento DOM, vamos mapeá-lo para o valor em que estamos interessados. Vamos fazer uma solicitação AJAX e ele irá exibir o resultado e vamos adicionar alguns bons para ter recursos como limitar o número de solicitações, filtrar erros e solicitações inválidas, etc Tudo o que é relativamente fácil de fazer com RXJs. Vamos dar uma olhada em algum código. Aqui, eu tenho a superfície que vamos usar, é uma API do GitHub que nos permite recuperar usuários com base em seu nome de usuário. Aqui está o exemplo quando eu procuro Torvalds. Aqui está o que vamos começar com, temos uma entrada de pesquisa e sempre que digitamos, vemos os eventos sendo impressos no console. Usamos os eventos de formulário e toque para conseguir isso. Não estamos interessados em todo o evento, apenas no nome real. A primeira coisa que vamos fazer é usar o operador de mapa para extrair o valor real do evento e lá vemos os valores sendo impressos. Atualmente, obtemos alguma saída para cada alteração feita, cada tipo de caractere e se transformarmos cada tipo de caractere em uma solicitação Ajax, estaríamos usando a API do GitHub bastante pesadamente e todos os resultados intermediários são não vai ser exibido de qualquer maneira. Vamos usar a função de tempo de depuração para evitar fazer uma solicitação Ajax até que o usuário tenha pausado por um segundo. Agora, se eu digitar meu nome, você só verá as saídas depois que eu pausar por um segundo. Se eu limpar a saída e digite Torvald, vemos Torvald e depois de uma pausa e, em seguida, se eu digitar DS, vemos o Torvalds completo, mas ainda depois de uma pausa. Vamos transformar isso em um pedido do Ajax. Usaremos um operador de mapa de comutação para transformar o nome de usuário em uma solicitação de pesquisa na API do GitHub. Agora, se eu abrir a guia Rede e digitar meu nome na caixa de entrada, vejo suas solicitações para o GitHub para meu usuário e se eu alterá-lo para Torvalds, veremos outra solicitação. Ótimo, então a resposta que recebemos tem uma propriedade de itens e só estamos interessados nos itens, então vamos mapear isso e descartar o resto da resposta. Agora, nós apenas vemos uma matriz de itens, mas nós realmente queremos processar os usuários um por um, a fim de exibir alguma interface do usuário. Vamos usar o mapa de mesclagem, que transforma uma coleção de uma matriz de usuários em eventos individuais de usuários. Se eu digitar meu nome, veremos uma lista de usuários que estão sendo emitidos. Na verdade, é incomum codificar e assinar, então temos algumas UI agradável. Nós vamos obter o cartão bootstrap para cada usuário que está sendo devolvido. Se eu digitar meu nome, vamos me ver no segundo item e outros. Agora, se eu digitar Torvalds o pedido é feito, mas basicamente está sendo adicionado à lista, queremos um pouco de efeitos colaterais. Antes de pesquisar, nós realmente queremos limpar os resultados, vamos usar o operador de profundidade para definir o HTML interno da div resultado para vazio, modo que o resultado anterior é limpo. Agora, se eu digitar meu nome, nós vemos eu e outros usuários com nomes semelhantes, mas se eu digitar Torvalds, nós realmente podemos ver Linus Torvalds e outras pessoas com um nome semelhante. Outro problema é, se eu fizer algumas alterações, mas acabar com o mesmo valor após um segundo, então eu removerei o S e adicioná-lo novamente. Na verdade, criamos uma segunda solicitação que é exatamente idêntica à solicitação anterior, então usando o operador distinto até alteração podemos evitar que não emita o mesmo valor em sequência. Se eu procurar por Torvalds, podemos ver Linus, mas se eu remover o S e adicioná-lo de volta, não faremos outro pedido. Só até eu realmente alterar o valor que procuramos e pausar o tempo suficiente para que as solicitações sejam acionadas, que nós fazemos uma solicitação. Se eu removi um valor, vemos que há realmente um erro da solicitação do Ajax. Agora, se eu digitar, nada acontece, nós matamos o observável, precisamos adicionar alguma manipulação de erros novamente. Só obter JSON, eu vou usar o operador de pipe e o operador de erro catch para transformar isso em uma tensão diferente e neste caso eu vou apenas usar uma string vazia porque não há nada para ver. Isso detectará o erro no fluxo Ajax e manterá o mainstream intacto. Agora, se eu procurar por Linus, eu vou encontrá-lo, se eu esvaziá-lo, pedido é feito, mas um erro é retornado. Se eu digitar meu nome, o observável ainda estava bem, ainda podemos procurar. Ainda assim, é melhor evitar esse erro. O erro é, na verdade, resultado da pesquisa com um nome de usuário vazio, então vamos usar o operador de filtro para evitar a pesquisa de nomes de usuário vazios. Vamos usar o operador de nota dupla para se certificar de que o usuário não está vazio. A busca pelo meu nome, obtemos os resultados, esvaziamos as coisas, a tela está em branco, mas não fazemos um pedido Ajax. Bastante fixe. Fazer uma pesquisa incremental usando RXJS é muito fácil. Usamos um punhado de operadores, mas todos eles jogaram juntos muito bem e gerenciaram todo o estado para nós muito mais fácil do que fazer isso com código imperativo. Eu realmente amo usar RXJs em casos como este. Vejo você no próximo vídeo. 34. Solicitações de Ajax: Ei, Maurice aqui. Bem-vindo de volta a este curso com Master RxJS6 Without A Sweat. Neste vídeo, vamos rapidamente dar uma olhada na criação de solicitações Ajax de sondagem. Vamos fazer solicitações Ajax e vamos continuar repetindo as solicitações em um intervalo baseado em tempo para mostrar ao usuário os dados mais recentes. Mas vamos começar com um evento de temporizador, e assim como no vídeo anterior, vamos fazer uma solicitação do Ajax e exibir os resultados. Vamos dar uma olhada no código. Isto é o que vamos usar um conjunto de dados, base de dados do Chuck Norris. Tem uma API RESTful onde podemos obter o conjunto de piadas aleatórias de Chuck Norris. No vídeo anterior, usamos a partir de eventos para começar a solicitar. Agora você pode pensar que vamos começar com o intervalo, mas se usarmos o intervalo, você verá que nós realmente temos que esperar. Eu especifiquei cinco segundos e na verdade leva cinco segundos antes que a primeira solicitação seja feita. Uma melhor maneira de começar é com o temporizador, com o temporizador você poderia especificar o tempo de espera inicial 0 milissegundos, e, em seguida, opcionalmente, quantas vezes ele deve ser repetido, então eu estou usando cinco segundos para intervalo de repetição aqui. Assim que a página é carregada, ele dispara um pedido Ajax recebe as primeiras dez piadas e, em seguida cada cinco segundos ele repete isso, tão bonito. Criando solicitação Ajax sondagem é bastante fácil, Muito semelhante a fazê-lo no evento clique ou algo semelhante. Usamos praticamente os mesmos operadores como último vídeo, o ajax, CatchError, o EMPTY, MergeMap, SwitchMap, toque e, neste caso, começamos as coisas com o temporizador. Vejo você no próximo vídeo. 35. Desenho em uma tela: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Master RXJS 6 Sem Quebrar Um Suor. Neste vídeo, vamos dar uma olhada no desenho na tela. Nós já desenhamos alguns na tela, mas agora vamos torná-lo um pouco mais explícito. Vamos começar a desenhar quando pressionarmos o mouse. Continuaremos desenhando enquanto o mouse estiver para baixo e nos movemos para o mouse. Mas com o mouse para cima, ou quando sairmos da tela, vamos parar de desenhar. Vamos dar uma olhada no código. Só para lembrar, aqui está a tela que tínhamos antes. Se eu mover o mouse sobre ele, nós desenhamos. Este era o código original, e basicamente começamos com os eventos de movimento do mouse, e começamos a desenhar. Agora queremos ser um pouco mais explícitos. Esperamos pelo nosso mouse para baixo eventos, e somente com o mouse para baixo, começamos a desenhar. Adicione outro fluxo observável para o evento do mouse para baixo, e nós vamos realmente assinar isso. Vamos usar um operador de mapa de comutação para alternar do mouse para baixo para o fluxo observável do mouse sempre que o mouse é feito. Agora, se eu mover o mouse, nada acontece, mas assim que eu o mouse para baixo, eu realmente começo a desenhar. Exceto que quando eu solto o mouse, ele continua desenhando. Ainda precisamos parar de desenhar. Vamos adicionar um terceiro fluxo observável para os eventos do mouse para cima. Vamos importar levar até operador, e vamos levar eventos de movimento do mouse até obter um mouse acima eventos. Agora certifique-se de adicionar levar até que no fluxo de eventos de movimento do mouse caso contrário, vamos parar todo o fluxo de eventos. Nós só queremos parar o movimento do mouse e ainda ouvir downs do mouse para iniciar novos eventos de desenho. Agora eu posso desenhar, posso parar de desenhar, e tudo parece bem. Isso é até o meu rato deixar a tela. Mesmo que eu solte o botão do mouse fora da tela, ele continua desenhando. Se eu deixar a tela, também precisamos falar desenho. Vou criar um observável para o rato. Adicionar parar usando o take até operador. Agora, desenho realmente pára quando meu mouse sai da tela. Bastante doce. Desenhar é muito fácil. Já temos o código básico de desenho. Usando o mapa de comutação e o take até operador torná-lo mais explícito. Só comece a desenhar quando o mouse estiver para baixo e pare de desenhar quando o mouse sobe, ou deixamos a tela de desenho. Vejo você no próximo vídeo. 36. Pintura: Oi Maurice aqui, bem-vindo de volta a este curso sobre Mastering RXJ6 sem suar. Neste vídeo, vamos continuar com a tela e vamos expandir o desenho para incluir mais algumas funcionalidades como pintura. Começaremos com o exemplo de desenho do último vídeo e adicionaremos observáveis para especificar a cor e o tamanho da linha do nosso desenho. Nós usamos para combinar nos operadores withLatestFrom para inserir aqueles no fluxo observável. Então vamos dar uma olhada no código. Então este é basicamente o nosso exemplo anterior onde podemos desenhar no Canvas. Mas eu incluí as entradas de cor e linha. Mas agora eles realmente não fazem nada ainda. Então vamos começar com a cor. Tenho uma referência à entrada chamada estilo de traço. Então vamos criar um novo fluxo de estilo de traçado usando FromEvent e vamos ouvir o InputEvent. Então eu estou usando o controle de entrada de cores HTML5 padrão lá. Então, estamos interessados apenas no valor mostrar todos usar o operador mapa para obter o valor a partir da entrada. Assim como fizemos uma dúzia de vezes antes. Agora eu quero injetar isso no córrego, nós ouvimos para pintar. Operador tão conveniente para usar não é withLatestFrom, onde eu posso combinar diferentes cadeias de entrada em um fluxo. Então eu vou combiná-los. MouseDown stream, que um fluxo StrokStyle, eo segundo parâmetro é a função para combinar os diferentes valores, não está interessado em um evento MouseDown, então vamos ignorar isso, e vai levar para estilo de traçado e virar que em um objeto de opções que tem de traçar estilo irá adicionar mais a que mais tarde. Ela está agora no mapa de troca, nós temos esse objeto de opções com nosso estilo de traçado. Então eu vou adicionar esse objeto 2D criado, o que significa que é apenas como formar objetos. Então eu vou pegar as opções de lá na assinatura e definir o estilo de traçado de contexto, fazer qualquer estilo de traçado especificado. Então, agora, se eu selecionar a cor, vermelho, por exemplo, eu posso desenhar uma linha vermelha. O único problema se eu atualizar a página e eu começar a desenhar, nada acontece, porque ainda não temos cor inicial. Então, precisamos fazer para fluxo de estilo de traço um pouco mais inteligente. Você tem que especificar que ele começa com o valor inicial da entrada. Então vamos apenas especificar o valor inicial lá, e agora ele começa com o valor para que possamos desenhar imediatamente. Podemos desenhar uma linha preta, e agora posso mudá-la para azul e podemos desenhar uma linha azul clara ou mais roxa. Doce. Vamos fazer o mesmo com a LineWidth. A abordagem é a mesma, então eu vou apenas copiar essa string de estilo de traçado e alterar as variáveis para usar uma LineWidth. Observação WithLatestFrom operador é realmente conveniente. Podemos usar quantos fluxos de entrada quisermos. Então vamos adicionar o fluxo LineWidth a isso e adicioná-lo aos objetos de opções. Agora em nossa assinatura, eu posso apenas definir a LineWidth no contexto, simples. Agora podemos começar a pintar. Mas se eu fizer o tamanho da linha um pouco maior, teremos uma linha mais gorda. Se eu mudei a cor para vermelho, ficamos com a linha vermelha gorda, Nice. Então [inaudível] somos especialistas. Eu meio que não gosto de duplicar essa cadeia de entrada. Mas vamos criar uma pequena função auxiliar, obter string de entrada e vamos passar em elementos DOM e ele vai retornar um fluxo de seus valores usados para elementos que estão sendo passados em, e agora o fluxo de estilo de traçado é o resultado de chamar get input string. Faremos o mesmo para o fluxo LineWidth, e tudo ainda funciona. Boa função ajudante. Então adicionar tinta como funcionalidade é bem simples. Nós apenas adicionamos entradas para tomar qualquer propriedade que queremos e vamos usar para StartWith e o withLatestFrom para pegar o valor e incorporá-los no fluxo que usamos para pintar, doce. Vejo vocês no próximo vídeo. 37. Compartilhando inscrições: Oi, eu sou [inaudível]. Bem-vindo de volta a este curso sobre Master RXJS 6 sem suar. Neste vídeo, vamos dar uma olhada rápida no compartilhamento de assinaturas. Às vezes você precisa compartilhar assinatura porque na maioria dos casos, cada vez que você se inscrever para um observável, ele irá criar um novo observável e executar todo o código no observável novamente. Isso nem sempre é o caso, mas na maioria dos casos é. O operador de compartilhamento permitirá que você realmente compartilhar todo o código em um observável. Por isso, só é executado uma vez para cada assinatura. Isso faz com que seja mais rápido. Vamos dar uma olhada em algum código para um exemplo. Aqui eu tenho o nosso exemplo de busca novamente onde estávamos procurando nomes de usuário no GitHub e eu digitei Torvalds. Vemos uma lista de usuários aparecer e um único pedido Ajax sendo feito. Parte da solicitação é o número de usuários retornados, o total de contagens. Então, se eu incluir isso nas contagens de resultados, agora vemos que havia na verdade dois Ajax Rsequests feitos. Isso é porque estavam subscrevendo o fluxo de eventos duas vezes. Então tudo lá é executado duas vezes, incluindo o código Ajax. Agora isso é meio desperdício, então vamos fazer um único código Ajax para obter ambos os resultados desse código. Vamos importar o operador de compartilhamento, e vamos adicionar o operador de compartilhamento ao pipe. Lembre-se que você adicionar isso nos pontos onde tudo antes que você deseja compartilhar entre todas as assinaturas. Então eu estou adicionando depois do código Ajax neste caso. Agora, se eu procurar Torvalds, obtemos o número total de usuários 126 e a lista de usuários com uma única solicitação. Se eu procurar o meu nome novamente, uma única solicitação para o número total, e os próprios usuários, muito melhor. Às vezes, é melhor compartilhar observáveis se você fizer várias assinaturas. Nem sempre é necessário, mas muitas vezes é. Neste caso, ficou muito claro que o pedido Ajax estava sendo feito várias vezes. Nem sempre é assim tão claro. Basicamente, o operador a usar é compartilhar. Há uma relação com o operador ShareReplay, que é um pouco mais avançado e vai realmente lembrar valores e re-emitá-los quando novas assinaturas são feitas. Usaremos isso em outro vídeo. Vejo você no próximo vídeo. 38. Redux como: Oi, Maurice aqui. Bem-vindo de volta ao placar de Master RXJS 6 Without Breaking A Sweat. Neste vídeo, vamos dar uma olhada na criação de um Redux simples como o armazenamento de dados. Redux é um contêiner de estado previsível para JavaScript. Muito popular, especialmente no mundo React e é muito capaz e extensível. Não vamos torná-lo tão avançado. Nós vamos fazer uma implementação muito básica em RXJS porque é realmente muito simples de fazer. Vamos dar uma olhada no código. Este é o site Redux real, portanto, o contêiner de estado previsível para JavaScript. Você vai aprender mais sobre isso, eu recomendo que você visite esses sites. Para começar, eu tenho um pequeno aplicativo com um incremento e um botão de decremento e um add 10. Aqui você vê o código, os manipuladores de eventos para incrementos e decrementos. Você vê que importamos um redutor e uma função CreateStore, e chamamos o CreateStore possivelmente no redutor. Em seguida, subscrevemos a loja e nós realmente exibir os estados atuais como uma string JSON formatada. Também subscrevemos os diferentes botões e ações de despacho. Você pode ver as ações que eles são basicamente objetos com um tipo denotando o tipo de ação, e em alguns casos como no add 5, ele tem uma carga útil contendo dados adicionais. Em um cenário típico de Redux, essas ações são criadas usando funções auxiliares, mas para manter este exemplo simples, eu não me preocupei em fazer isso. Mas isso faz com que seja mais confiável e mais testável, então altamente recomendo que você faça. redutor é muito simples. Basicamente, ele escuta ações e retorna um novo estado sempre que a ação modifica o estado. Um dos princípios fundamentais são os dados imutáveis. Você nunca altera o estado, você sempre cria um novo objeto de estado. É o que estou fazendo nas funções de incremento e decréscimo. Estou basicamente criando uma cópia do objeto de estado, definindo a contagem, neste caso não há nada mais nele, tão simples. Mas se houvesse mais dados nele, ele será preservado e conta JSTOR seria atualizado. A instrução switch como esta não é muito funcional, mas é a forma como o código Redux é escrito com bastante frequência. Vou mostrar-lhe como tornar isso mais funcional em um momento, mas por enquanto vamos deixar isso como uma simples declaração switch. Mais uma coisa a observar aqui é que a primeira vez que isso será chamado, os estados serão indefinidos e o estado inicial será definido como o estado atual. É onde essa variável de estado inicial é usada. A assinatura para uma função de redução é muito simples e sempre o mesmo. Basicamente ele retorna um novo estado que é o resultado da aplicação de uma ação para o estado antigo. Então novo estado é estado antigo mais ação. Simples. O CreateStore está muito vazio. Há uma função CreateStore que exportamos, mas não há nada lá ainda. Neste caso, queremos controlar como os eventos são emitidos para que o assunto seja uma boa maneira de criar novos observáveis. Então vamos criar um fluxo de ação porque é basicamente um fluxo de ações que estão sendo emitidas, que é o resultado de um assunto. Em seguida, a loja é realmente o resultado de trabalhar com o estado atual e as ações. Usamos um operador de varredura para calcular o estado atual. Com a varredura, passamos uma função redutor em e definimos seu valor inicial para ser indefinido. Dessa forma, o redutor é chamado com indefinido como o primeiro estado, o que fará com que o estado inicial no redutor seja definido. Dessa forma, toda a responsabilidade do que é o estado real e como ele é atualizado está dentro do redutor e não no CreateStore mais genérico. Então voltamos para a loja. Precisamos ser capazes de despachar ações, então vamos adicionar uma função de despacho à loja. Tudo o que ele faz é basicamente emitir essas ações para o fluxo. Agora, se eu clicar em “Incrementar” ou “Decrementar”, podemos ver a mudança de estado. A única coisa é que ainda não havia estado inicial. Então vamos começar emitindo um evento para inicializar o estado. Vamos usar o operador StartWith e antes da digitalização vai realmente despachar um evento. Vamos chamá-lo com sublinhado tipo, nele sublinhado. Nome realmente não importa, desde que seja único e é apenas para inicializar o estado. Então agora veja a contagem começar com zero. Mais uma coisa, este é estado de todo o aplicativo, então ele deve ser compartilhado por todas as assinaturas. Usaremos o ShareReplay. operador de compartilhamento de aviso protege o ShareReplay, então novas assinaturas vão realmente obter a última versão do estado. Estamos passando 1 porque só queremos lembrar um último evento estadual, não todos os diferentes intermediários. Ainda funciona. Ótima. Então vamos fazer este redutor um pouco melhor. Porque declarações de switch como este são agradáveis e isso é o que você vê em um monte de exemplos Redux. Mas vamos torná-lo um pouco mais funcional porque RXJS é mais sobre programação de estilo funcional. Vamos criar um dicionário com manipuladores. Vou adicionar um manipulador para a ação de incremento. Isso só leva o estado antigo como uma entrada. Não nos importamos com a ação. Não há nada de útil lá. Basicamente devolveremos o novo estado de lá. Faça o mesmo com o decremento. Precisamos colocar estes entre parênteses para que ele retorne esse objeto, caso contrário ele será considerado um bloco de código. Então vamos incluir o decremento. Agora não precisamos mudar de instrução mais, mas podemos fazer uma pesquisa simples no manipulador de objeto para encontrar o manipulador certo para uma ação específica. Uma vez que temos esse manipulador, podemos executá-lo com os estados antigos e a ação retornando o novo estado. Agora pode haver ações acionadas que nós realmente não manipulamos, como esse sublinhado na ação sublinhado. Então vamos adicionar um manipulador padrão que apenas retorna o estado atual. O manipulador é aquele para o tipo especificado ou o padrão. Nosso comportamento ainda é o mesmo, mas o código está mais funcional agora. Agora vamos adicionar um novo manipulador para a ação de adição. Vamos criar um manipulador chamado ADD. É preciso um estado. Ele também executa a ação porque a carga útil na ação indicará quanto deve ser adicionado ao estado atual. Em vez de mais 1, adicionamos a ação para payload a ele. Agora ainda podemos incrementar e decrementar, mas também podemos adicionar 5. Recriar redutores desta forma é muito mais agradável. Temos funções testáveis muito pequenas. Esses caras eu não exportei, mas podemos exportar os manipuladores e torná-los muito testáveis. Então fazer gerenciamento de estado em um estilo Redux com RXJS é muito simples. Criamos um novo fluxo usando o assunto. Basicamente, usamos um operador de varredura para calcular o estado atual com base no estado anterior e na ação. Usamos operador StartWith para inicializar o estado e usamos o ShareReplay para que novas assinaturas chegarão automaticamente ao estado atual e o estado entre todas as assinaturas é compartilhado. Bastante doce. Vemo-nos no próximo vídeo. 39. Assinaturas na Redux Store: Oi Maurice aqui. Bem-vindo de volta a este curso sobre dominar RXJS 6 sem suar. Neste vídeo, vamos melhorar um pouco a loja Redux. Vamos adicionar assinaturas de estilo RXJS 6 a ele, então não precisamos apenas usar códigos imperativos para despachar eventos. Isso acaba por ser bastante fácil porque o assunto que usamos para criar um fluxo observável, também é a forma certa para agir como um assinante. Você pode simplesmente empurrar que assuntos como a assinatura de fluxos de eventos, e encadear os diferentes fluxos dessa forma. Vamos dar uma olhada no código. Apenas como um lembrete aqui nós temos o código anterior. Eu tenho um botão de incremento em cinco e incremento. Se eu clicar em incremento, vemos o aumento da contagem, e o mesmo com os outros botões. Em vez de fundir adicionar lister de eventos, eu quero fazer isso em um estilo mais reativo. Usaremos os eventos de de para criar um fluxo observável de eventos de clique e usaremos o operador de mapa para criar o objeto de ação que despachamos. Então nós só queremos assinar para armazenar para este fluxo de eventos. Agora eu não posso simplesmente passar para armazenar, isso não vai funcionar, porque a loja não é o assunto real. Se olharmos para criar loja, vemos que a loja é apenas um resultado do evento tubagem Struger, fluxo de ação, e o fluxo de ação, que é o que realmente precisamos assinar. Podemos adicionar isso à exposição da loja dessa forma, então podemos usá-lo na assinatura. Vamos assinar usando fluxo de ação de ponto de fluxo de loja. Agora vemos que o incremento ainda funciona. Claro, mais cinco e o decremento ainda funciona. Eles ainda não mudaram. Vamos atualizá-los da mesma maneira. Vamos copiar o código e atualizar os objetos de ação e os manipuladores de eventos. Esse é o decremento feito. Isso é o mais cinco feito. Verei todos os manipuladores de eventos trabalharem. Legal. Usar um estilo mais reativo com RXJS é muito simples, porque são todos os fluxos observáveis que podemos simplesmente encadear juntos. Doce. Vejo você no próximo vídeo. 40. Fim: Oi, Maurice aqui. Bem-vindo de volta a este curso sobre Mastering RXJS 6 WithBreaking a Sweat. Parabéns, você conseguiu. Chegou ao fim do curso. Então, espero que você tenha visto que RXJS é uma ótima biblioteca. É ótimo para programação reativa assíncrona. Use fluxos observáveis, manipule esses fluxos usando operadores, mesclando, filtrando fluxos, transformando, etc. Muitas capacidades. Então, agora é com você. Vá em frente, construa algo ótimo usando RXJS, e deixe-me saber o que é. Se é algo público enfrentando e eu posso ver, eu sempre gosto de ver o que as pessoas fazem usando as técnicas que eu lhes ensino. Então este é o fim deste curso, mas há sempre mais a aprender. Para qualquer coisa mais que você quer ver neste curso, para mais cenários ou talvez operadores que querem ver coberto, deixe-me saber. Vou adicioná-los e avisar-te-ei quando estiver feito. Vamos aprender algo mais sobre reacções, ou Angular, ou GETs, ou qualquer uma dessas coisas, estou no jogo. Então me avise e eu vou dar uma olhada. Então boa sorte. Tudo de bom, e divirta-se com RXJs.