How to get current value of RxJS Subject or Observable?

How to get the current value of RxJS Subject or Observable?

So, you have an Angular 2 service that uses RxJS Subject to manage the isLoggedIn status. 👍

But there's a catch - you have another component that doesn't need to subscribe to the isLoggedIn Observable, but instead needs to get its current value at a specific point in time. 🤔

Don't worry, I've got you covered! In this blog post, I will walk you through the process of getting the current value of a Subject or Observable in RxJS. Let's dive in! 🏊‍♂️

The Problem

In your example code, the isLoggedIn property is an Observable obtained from the _isLoggedInSource Subject:

isLoggedIn = this._isLoggedInSource.asObservable();

While it's great for subscribing to changes, it doesn't provide a straightforward way of getting the current value without subscribing. 😕

The Solution

To get the current value of the isLoggedIn Observable at a specific point in time, you can use the BehaviorSubject from RxJS. 🚀

A BehaviorSubject is a special type of Subject that requires an initial value and emits the current value to new subscribers.

1. First, import the BehaviorSubject from 'rxjs/BehaviorSubject':

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

1. Replace the _isLoggedInSource Subject with a new BehaviorSubject:

private _isLoggedInSource = new BehaviorSubject<boolean>(false);

Here, we have provided an initial value of false to the BehaviorSubject. Feel free to replace it with the initial value that suits your use case. 😉

1. Update the isLoggedIn property:

isLoggedIn = this._isLoggedInSource.asObservable();

How it works

Now, whenever you need to get the current value of isLoggedIn, you can call the getValue() method provided by BehaviorSubject.

For example, in your component that needs the current value, you can do the following:

import { SessionStorage } from './session-storage';

@Component({
  // Component metadata...
})
export class MyComponent {
  constructor(private sessionStorage: SessionStorage) { }

  someMethod() {
    // Get the current value
    const isLoggedIn = this.sessionStorage.isLoggedIn.getValue();
    
    // Do something with isLoggedIn...
  }
}

By calling the getValue() method on isLoggedIn, you will receive the current value emitted by the BehaviorSubject. 🎉

Restructuring your code

If you find yourself needing to get the current value of an Observable at many places in your codebase, consider restructuring your code to make use of a service that exposes the BehaviorSubject directly.

For example, you can modify your SessionStorage service like this:

@Injectable()
export class SessionStorage extends Storage {
  private _isLoggedInSource = new BehaviorSubject<boolean>(false);
  isLoggedIn = this._isLoggedInSource.asObservable();

  constructor() {
    super('session');
  }

  setIsLoggedIn(value: boolean) {
    this.setItem('_isLoggedIn', value, () => {
      this._isLoggedInSource.next(value);
    });
  }

  getCurrentValue(): boolean {
    return this._isLoggedInSource.getValue();
  }
}

With this modification, you can now get the current value of isLoggedIn using getCurrentValue() directly from the service whenever needed. 🎉

Bonus Tip

To make your code even more resilient, consider providing a default value in case no initial value is emitted before the first getValue() call. You can do this by modifying the BehaviorSubject creation line like this:

private _isLoggedInSource = new BehaviorSubject<boolean>(null);

By using null as the initial value, you can easily identify if the getValue() call is made before any value is emitted.

Conclusion

And there you have it! By using BehaviorSubject, you can easily get the current value of a Subject or Observable in RxJS.

Remember to implement this solution whenever you need to retrieve the current value of an Observable at a specific point in time without subscribing.

Now, go ahead and apply this knowledge to your codebase. Happy coding! 😄

How about you? Have you ever encountered a similar situation? Let us know in the comments below! Don't forget to like and share this post with your fellow developers. 👍❤️

Until next time, keep exploring, keep learning, and keep coding! ✌️😊