A programação reativa é um paradigma de programação voltado para fluxos de dados e a propagação de mudanças. Isso significa que, em vez de lidar com valores que mudam ao longo do tempo, como é comum em programação imperativa, na programação reativa lidamos com sequências de eventos ao longo do tempo. Neste capítulo, vamos discutir a programação reativa com RxJS no desenvolvimento front-end.
RxJS é uma biblioteca para composição de programas assíncronos e baseados em eventos usando sequências observáveis. É perfeito para lidar com eventos, especialmente quando você precisa lidar com uma grande quantidade de eventos que chegam ao longo do tempo. RxJS permite que você crie um fluxo de eventos e reaja a eles de forma declarativa, sem se preocupar com detalhes de baixo nível.
Para começar com RxJS, primeiro precisamos entender o conceito de Observáveis. Um Observable é uma representação de qualquer conjunto de valores ao longo de qualquer quantidade de tempo. Pode ser um único valor, uma sequência de valores ou um fluxo contínuo de valores. Observáveis são a base da programação reativa com RxJS.
Um Observable por si só não faz nada. Ele precisa de um Observador para reagir aos valores que ele emite. Um Observador é apenas um objeto com três métodos: next, error e complete. O método next é chamado para receber o próximo valor do Observable, o método error é chamado se houver um erro durante a geração do valor e o método complete é chamado quando não há mais valores a serem gerados.
Para criar um Observable, você pode usar a função create da RxJS. Por exemplo, para criar um Observable que emite números de 1 a 5, você poderia fazer o seguinte:
const source$ = Rx.Observable.create(observer => {
for (let i = 1; i <= 5; i++) {
observer.next(i);
}
observer.complete();
});
Para se inscrever em um Observable e começar a receber valores, você usa o método subscribe do Observable. Por exemplo, para imprimir os valores do Observable que acabamos de criar, você faria o seguinte:
source$.subscribe(
value => console.log(value),
error => console.error(error),
() => console.log('Complete')
);
Além de criar Observáveis a partir do zero, você também pode transformar outras coisas em Observáveis, como eventos, promessas, arrays e assim por diante. RxJS fornece muitas funções de utilidade para isso, chamadas de operadores.
Operadores são funções que permitem manipular Observáveis de várias maneiras. Por exemplo, você pode filtrar valores, mapear valores para outros valores, combinar vários Observáveis em um, e assim por diante. Os operadores são a principal ferramenta que você usa para compor lógica em RxJS.
Para usar um operador, você chama o método pipe do Observable e passa o operador para ele. Por exemplo, para filtrar os valores pares do nosso Observable, você poderia fazer o seguinte:
const even$ = source$.pipe(
Rx.operators.filter(value => value % 2 === 0)
);
even$.subscribe(value => console.log(value)); // logs 2, 4
Em resumo, a programação reativa com RxJS é uma maneira poderosa de lidar com eventos e fluxos de dados em aplicações front-end. Com Observáveis e operadores, você pode expressar lógica complexa de forma declarativa e gerenciável.
