Reactive Programming

First...Let's learn some things !

Reactive programming is the concept of developing code where different entities are watching through an information channel for data to pass, and when it does, each entity will "react" to that situation doing their business logic.

Imagine an empty tube with 3 holes in it, at each hole we have a person looking through and waiting for a little ball to pass. Because each person is different, they will see different aspects of the ball. For example, one can see that the ball is red, another that the ball is bouncing a little when it's passing through or even that maybe… it's not a ball at all !

That's exactly what reactive programming is, we have an information channel (observables) containing the data that is passing through it, and on the other hand we have entities (observers) that will be subscribed and waiting for that information to pass... and when it does, they will react to it doing whatever business logic we coded for them.

Redux, Ngrx/store, etc. are libraries that provide tools to manage the state of the application using the concept of "A Single Source Of Truth", these means that the whole information of the app will be contained inside a "store", a place where you can access useful and up to date information. Each time a change happens inside your application, information wise, the store will be updated with the latest changes. So you don't need to call the back end again for an update if not needed and also all entities that are watching the store's states will be automatically alerted of the change.

What is RxJS ?

RxJS it’s an amazing Javascript library that provides management of observables to do reactive programming in an efficient and structured way.

Operators

RxJS provides it’s magic with the usage of operators, they are functions to create complex asynchronous code but in a simple and declarative manner.

Two tipes:

• **Pipeable operators:** those that can be used inside the syntax

  observableInstance.pipe(operator());   
  

  One of the amazing things are that we can chain these operators, each one returns a new observable that will be used as a parameter for the next one.

  The main ones we may use are:

  • filter: filter the events coming through the observable and only return those which comply with the specified condition.

  

  • merge: merge two or more observables into one, each time a new event comes from any of the merged observables, they will be returned into the same stream. One thing to consider is that the observables to be merged should share the same type of event as we will use them as if they were one single observable.

  

  • map: used to grab each event, apply a logic, and return the new modified result ( same as using map in Es6 ).

  

  • mergeMap: the same as merge but we will return a new observable that uses the previous result as a parameter. Useful when we need to call an endpoint and use a property from it’s result as a parameter for another endpoint ( chain of calls ).

  

  • switchMap: the same as mergeMap but if we receive a new event and the previous one didn’t finish, then the new one will automatically stop it and take it’s place ( cancels unfinished operations in favor of new ones ).

  Example: if we call an endpoint on a certain button click, and the user clicks it 40 times, we only want the latest click event as it will result on the most updated information from the endpoint and wouldn’t be efficient to wait for the other 39 events.

  

  • combineLatest: used to merge two or more observables BUT it will wait for all of them to receive an event before emitting a result. After emitting the first event, if any of the merged observables stream a new event, it will return the new value with the cached values of the other observables.

  

  • withLatestFrom: it will merge two or more observables BUT it will wait for one of them to receive an event first. After the first event, it will start hearing the other observables and doing the same logic as combineLatest (returns an array with the results of all observables waiting for all of them to have streamed a new event).

  

  • startWith: it will start the process with a value sent by the developer as the first event. Useful when we want to default some values into the stream.

  

  • first: gets the fist event streamed through the observable and after returning it’s value, auto unsubscribes ( like a promise ).

  

  • takeUntil: it will hear for events until a certain condition is met, after that it will unsubscribe from the observable.

  

  • takeWhile: it will hear for events until a certain notifier ( another observable ) emits an event, then it will unsubscribe from the observable.

  

  • skipUntil: it will not hear for changes until a certain condition is met. Think of it as the filter operator but with the change that when the condition is met, it stops working.

  

  • skipWhile: the same as skipUntil but with the usage of a notifier.

  

• **Creation operators:** functions that can be used to create an observable with a predefined behavior or joining other observables. Example: the interval operator takes a number as parameter instead of an observable to create one that will stream an event each specified number of milliseconds.

All pictures are from these amazing website that i super recommend to play a little and learn interacting with the streams.

Subjects

An RxJS subject is a special kind of observable that supports multicasting to many observables.

Unicast is the ability to stream events from one source into another, in these case an observable has an observer waiting for changes.

Multicasting is the ability to stream events from one source into more than one, in these case an observable can have more than one observer listening for changes.

As they are observables, they can be subscribed and assigned an observer to receive events. In the background, they don’t create a new execution every time an observer subscribes to it, they just register the observer into a list containing all the listeners to that observable.

Subjects can also be thought as observers as they are objects that provide the methods: