What is the RxJS Subject and the benefits of using it?

Question

I found rxJS docs to define them as

What is a topic? An RxJS object is a special type of Observable that allows multi-valued values ​​for many observers. Although regular observables are unicast (each signed Observer has an independent Observable execution), objects are multicast.

and he continues to give examples, but I am looking for a basic explanation of ELI5. In my opinion, this helps to process and define elements in sequence. It's right?

I think it would be very useful for me and others to see a simple function with and without rxJS Subject definition to understand why this is important?

Thanks!

Answer 1

The easiest way to understand this is to think about Subject as both a producer and a consumer. It is like an open channel where someone can send a message at one end, and all subscribers will receive it at the other end.

  +--------------- Sender | => => => => Subscriber -----------------------+ +----------- Message => => => => => => => => => => => Subscriber -----------------------+ +----------- | => => => => Subscriber +--------------- 

The text terms say that you have a service with a subject

 class MessageService { private _messages = new Subject<Message>(); get messages: Observable<Message> { return this._messages.asObservable(); } sendMessage(message: Message) { this._messages.next(message); } } 

Note that the receiver of messages returns the object as observable. This is not required. Subject already observable, and anyone can subscribe directly to Subject . But I think that the asObservable template asObservable used as a way to limit what users can do with it, that is, users use it only for subscription, and not for emitting. We save radiation for the sendMessage method.

Now with this service we can implement it in different components, and this may be a way for two (or more) arbitrary components to communicate (or just to receive arbitrary event notifications).

 class ComponentOne { constructor(private messages: MessageService) {} onClick() { this.messages.sendMessage(new Message(..)); } } class ComponentTwo { constructor(private messages: MessageService) {} ngOnInit() { this.messages.messages.subscribe((message: Message) => { this.message = message; }); } } 

The corner own EventEmitter is actually a Subject . When we join an EventEmitter , we subscribe to a Subject , and when we emit to an EventEmitter , we send a message through Subject to all subscribers.

See also:

• Theme vs BehaviorSubject vs ReplaySubject in Corner

Answer 2

Subjects are useful when the code you are in is the one that actually creates the observable data. You can easily let your subscribers subscribe to Subject , and then call the next() function to enter data into the pipeline.

If you get data from another source and just pass it (maybe convert it first), then you most likely want to use one of the creation operators shown here , for example Rx.Observable.fromEvent like this :

 var clicks = Rx.Observable.fromEvent(document, 'click'); clicks.subscribe(x => console.log(x)); 

This allows you to stay in a functional paradigm, while using Subject while it uses it, some people think that you smell that you are trying to force an imperative code into a declarative structure.

Here 's a great answer explaining the difference in the two paradigms.

Answer 3

You can find topics semantics research here .

All the answers that I see are correct. I just add that the term subject comes from the observer pattern (see https://en.wikipedia.org/wiki/Observer_pattern ). Since such a subject is a kind of relay, he receives something at one end and emits it at either end (subscription).

Answer 4

If you want the simplest explanation ...

Observables are usually the result of something. The result of calling http, and everything you do with the channel returns the observable.

But what is the source of these things? Have you ever wondered how you connect your custom events to all rxjs stuff? The main feature of items is that you can call the next () method on them.

In reactive programming, the first step is usually to make a list of possible items.

For example: let's say we need to create an application for a task list. There are likely to be several variables in our component:

 public deleteItem$ = Subject<TodoItem> = new Subject(); public addItem$ = Subject<TodoItem> = new Subject(); public saveList$ = Subject<TodoItem[]> = new Subject(); 

and in our application we will connect them like this:

 <button (click)="deleteItem$.next(item)">Delete</button> 

Using rxjs, we will use operators such as merge / combLatest / withLatestFrom to handle these topics and determine the logic of our application.

I will see if I can find the time to make a small example.