Subject vs BehaviorSubject vs ReplaySubject in Angular

问题

I\'ve been looking to understand those 3:

Subject, Behavior subject and Replay subject. I would like to use them and know when and why, what are the benefits of using them and although I\'ve read the documentation, watched tutorials and searched google I\'ve failed to make any sense of this.

So what are their purpose? A real-world case would be most appreciated it does not have to even code.

I would prefer a clean explanation not just \"a+b => c you are subscribed to ....\"

Thank you

回答1:

It really comes down to behavior and semantics. With a

Subject - a subscriber will only get published values that were emitted after the subscription. Ask yourself, is that what you want? Does the subscriber need to know anything about previous values? If not, then you can use this, otherwise choose one of the others. For example, with component-to-component communication. Say you have a component that publishes events for other components on a button click. You can use a service with a subject to communicate.
BehaviorSubject - the last value is cached. An subscriber will get the latest value upon initial subscription. The semantics for this subject is to represent a value that changes over time. For example a logged in user. The initial user might be an anonymous user. But once a user logs in, then the new value is the authenticated user state.

The BehaviorSubject is initialized with an initial value. This is sometimes important to coding preference. Say for instance you initialize it with a null. Then in your subscription, you need to do a null check. Maybe OK, or maybe annoying.
ReplaySubject - it can cache up to a specified number of emissions. Any subscribers will get all the cached values upon subscription. When would you need this behavior? Honestly I have not had need for such behavior, except for the following case:

If you initialize a ReplaySubject with a buffer size of 1, then it actually behaves just like a BehaviorSubject. The last value is always cached, so it acts like a value changing over time. With this, there is no need for a null check like in the case of the BehaviorSubject initialized with a null, because no value is ever emitted to the subscriber until the first publishing.

So it really comes down the behavior you are expecting, as for which one to use. Most the time you will probably want to use a BehaviorSubject because what you really want to represent is that "value over time" semantic. But I personally don't see anything wrong with the substitution of ReplaySubject initialized with 1.

What you want to avoid is using the vanilla Subject when what you really need is some caching behavior. Take for example you are writing a routing guard or a resolve. You fetch some data in that guard and set it in a service Subject. Then in the routed component you subscribe to the service subject to try to get that value that was emitted in the guard. OOPs. where's the value? It was already emitted, DUH. Use a "caching" subject!

回答2:

A handy summary of the different observable types, non intuitive naming i know lol.

Subject - A subscriber will only get published values thereon-after the subscription is made.
BehaviorSubject - New subscribers get the last published value OR initial value immediately upon subscription.
ReplaySubject - New subscribers get the last 1-n published value(s) immediately upon subscription (only if previously emitted).

回答3:

From: Randall Koutnik book “Build Reactive Websites with RxJS.” :

A Subject is an object that’s a turbocharged observable. At its core, a Subject acts much like a regular observable, but each subscription is hooked into the same source. Subjects also are observers and have next, error, and done methods to send data to all subscribers at once. Because subjects are observers, they can be passed directly into a subscribe call, and all the events from the original observable will be sent through the subject to its subscribers.

We can use the ReplaySubject to track history. A ReplaySubject records the last n events and palys them back to every new subscriber. For example in chat application. We can use it for tracking the record of previous chat history.

A BehaviorSubject is a simplified version of the ReplaySubject. The ReplaySubject stored an arbitrary number of events, the BehaviorSubject only records the value of the latest event. Whenever a BehaviorSubject records a new subscription, it emits the latest value to the subscriber as well as any new values that are passed in. The BehaviorSubject is useful when dealing with single units of state, such as configuration options.

回答4:

Subject: On subscribing it always gets the data which is pushed after it's subscription i.e. previous pushed values are not received.

const mySubject = new Rx.Subject();

mySubject.next(1);

const subscription1 = mySubject.subscribe(x => {
  console.log('From subscription 1:', x);
});

mySubject.next(2);

const subscription2 = mySubject.subscribe(x => {
  console.log('From subscription 2:', x);
});

mySubject.next(3);

subscription1.unsubscribe();

mySubject.next(4);

With this example, here’s the result that’ll be printed in the console:

From subscription 1: 2
From subscription 1: 3
From subscription 2: 3
From subscription 2: 4

Note how subscriptions that arrive late are missing out on some of the data that’s been pushed into the subject.

Replay subjects: can help by keeping a buffer of previous values that will be emitted to new subscriptions.

Here’s a usage example for replay subjects where a buffer of 2 previous values are kept and emitted on new subscriptions:

const mySubject = new Rx.ReplaySubject(2);

mySubject.next(1);
mySubject.next(2);
mySubject.next(3);
mySubject.next(4);

mySubject.subscribe(x => {
  console.log('From 1st sub:', x);
});

mySubject.next(5);

mySubject.subscribe(x => {
  console.log('From 2nd sub:', x);
});

Here’s what that gives us at the console:

From 1st sub: 3
From 1st sub: 4
From 1st sub: 5
From 2nd sub: 4
From 2nd sub: 5

Behavior subjects: are similar to replay subjects, but will re-emit only the last emitted value, or a default value if no value has been previously emitted:

const mySubject = new Rx.BehaviorSubject('Hey now!');

mySubject.subscribe(x => {
  console.log('From 1st sub:', x);
});

mySubject.next(5);

mySubject.subscribe(x => {
  console.log('From 2nd sub:', x);
});

And the result:

From 1st sub: Hey now!
From 1st sub: 5
From 2nd sub: 5

Reference: https://alligator.io/rxjs/subjects/

回答5:

     // ***********Subject  concept ***********
    let subject = new Subject<string>();


    subject.next("Eureka");
    subject.subscribe((data) => {
      console.log("Subscriber 1 got data >>>>> "+ data);
    });
    subject.subscribe((data) => {
      console.log("Subscriber 2 got data >>>>> "+ data);
    });

       // ********behaviour subject*********
    // Behavior subjects need a first value
let subject1 = new BehaviorSubject<string>("First value");


subject1.asObservable().subscribe((data) => {
  console.log("First subscriber got data behaviour subject>>>>> "+ data);
});
subject1.next("Second value")

Subject - A subscriber will only get published values thereon-after the subscription is made.
BehaviorSubject - New subscribers get the last published value OR initial value immediately upon subscription.

来源：https://stackoverflow.com/questions/43118769/subject-vs-behaviorsubject-vs-replaysubject-in-angular

标签

javascript