Learn about RxJS to write efficient asynchronous code. Explore subjects, operators, and observables. Gain insights into creating projects like a reactive local database and handling DOM events.

mocha.tar.gz

rxjsCodeWidget

rxjsSPA

mocha

RxJS (Reactive Extensions for JavaScript) is a very powerful library for web development which allows you to easily write asynchronous or call-back code.

In this course, you will explore the latest version of RxJS in detail, focusing on how to apply the reactive paradigm to solve your day-to-day tasks. You will learn all the major components of this library including: subjects, operators, and how to test observables.

In the last section of this course, you will get hands-on with this library to create your own project. Throughout this project, you’ll learn about building a centralized loading indicator, how to handle DOM events, how to build a reactive local database, and more.

By the end of this course, you will have a great new skill to add to your resume, and a cool new project for your portfolio.

Building Reactive Applications with RxJS

# Introduction to transformation operators
After digging through the filtering operators that enable you to perform some sort of data cleaning throughout the pipeline, you usually need to perform a more complex operation on the data flow, like transforming data from one type to another. You are already familiar with the `Array.map` function in JS, which "projects" every element from the array into another type, based on the function you provide as an argument. In RxJS, the same idea applies, except that you are transforming the stream of data from one type to another. This is achieved in RxJS via the transformation operators, which we will cover in this lesson.

<br></br>
# *map (map, switchMap, concatMap, mergeMap)

RxJS provides multiple operators that allow you to map the data stream from one type to another. 

<br></br>
## map
We begin with the basic `map` operator, which is able to transform the values emitted from the source Observable into another type based on the "projection" function passed as a first argument. It is important to note that the data transformation happens as it is emitted by the source Observable, unlike the `Array.map` operator, which transforms every element from the array. The following example demonstrates a simple application of the `map` operator, which squares a stream of numbers.

const { from } = require('rxjs');
const {map} = require('rxjs/operators');

const numbers$ = from([1, 2, 3, 4])

// Data pipeline for mapping numbers to their squares
numbers$.pipe(
    map(num => "Squared number: " + (num * num)))
    .subscribe(console.log)

No need for further explanation as its functionality is pretty obvious. Now, let's move on to more complex transformations :) 

## switchMap
`switchMap` is a very important operator that allows you to switch the subscription from one Observable to another. But there is a catch -- when the outer Observable emits, the inner Observable completes and the Observer is re-subscribed to it. So, you are likely to use this transformation operator when you **always** want the inner functionality to complete. 
Suppose that you want to make a controllable timer- meaning that it can be easily switched on and off. We achieve this by using the switchMap operator, as shown in the following diagram. The `switch` Observable is a Boolean Observable that the user controls, and for each `true` emission, it gets mapped to the `timer` Observable. In case it is switched on/off again, the timer Observable is unsubscribed and re-subscribed if needed.

Learn various ways to transform data flowing down the data stream using transformation operators.

The Need for Reactive Programming

RxJS Subjects

RxJS Operators

Testing Observables

Real-World Projects in RxJS

Conclusion

Transformation Operators

Introduction to transformation operators

*map (map, switchMap, concatMap, mergeMap)

map