Reactive Variable Architecture in Angular

Is this the first time you ever come across the term Reactive Variable…? Maybe yes, why because this is the term I coined for one of my simple architecture in angular.

What is a Reactive Variable?

Reactive Variable Architecture in Angular is just a normal variable that is being actively used in multiple components and manipulated from multiple components. This might sound just like any other variable you use in your projects, but the only difference is whenever something gets changed, it has to notify all the components that depend on this variable.

Well, this sounds pretty straightforward. You can use some subjects or signals to achieve this, right? But about data being manipulated but not notified to any of its dependent components.

This architecture focuses on…

The purpose of this story is to come up with an architecture that focuses on standardizing this implementation and avoiding all the pitfalls in the journey.

Architecture Overview

I’m focusing on implementing Reactive Variable Architecture using subjects. Maybe in the future, I’ll come up with signals as well.

class ReactiveVariable<T> {
  private _value$: Subject<T>;
  private _value?: T;

  get value$(): Observable<T> {
    return this._value$.asObservable();
  }

  get value(): T | undefined {
    return this._value;
  }

  set value(value: T | undefined) {
    this._value = value;
    this._value$.next(value!);
  }

  constructor(defaultValue?: T) {
    this._value$ = new Subject<T>();

    if(defaultValue){
      this.value = defaultValue;
    }

  }
}

• Basically, there will be a utility class that will store some data in a private variable. You are not allowed to manipulate data from outside this class.
• To access data stored in the class, you can only use the getter (value).
• None of the external sources are allowed to directly manipulate the data. Instead, it has to be done through a setter to avoid any unnoticed manipulations.
• The setter will have two purposes to set the data and to notify the components when something has changed.
• In the above example, we are using the subject as our notifier. Depending on the need, you can even go with BehaviorSubject. And this must be inaccessible from other sources. Only the ReactiveVariable class is allowed to emit data from this notifier.
• Now to listen to the data changes, you have to subscribe to the observable that emits data changes. Instead of directly giving access to the notifier directly, extract the observable from the subject. So that other sources can only listen to the changes but not emit any.

Instance of ReactiveVariable

Now let’s see how to use the ReactiveVariable class:

A few days back, I wrote a story on global loaders. Let’s use ReactiveVariables to make it better. Feel free to read the article on Global Loaders for a better understanding.

  globalLoader$: ReactiveVariable<number>;

  constructor() {
    this.globalLoader$ = new ReactiveVariable<number>(0);
  }

  setContentLoader(show: boolean) {
    if (show) {
      if (this.globalLoader$.value == 0) {
        // Show Loader
      }
      this.globalLoader$.value! += 1;
    } else {
      if (this.globalLoader$.value! > 0) {
        this.globalLoader$.value! -= 1;
      }
      if (this.globalLoader$.value! == 0 && this.globalLoader) {
        // Hide Loader
      }
    }
  }

For suppose, you want to show the number of processes running in the background. All you have to do is subscribe to value$.

// To get data at the instance
console.log(this.globalLoader$.value);

// To listen to data in realtime
this.globalLoader$.value$.subscribe(
  {
    next:(data)=>{
      console.log(data);
    }
  }
);

This is how Reactive Variable Architecture in Angular is done in a simplified way. It might look naive, but it’ll save you time and improve your code quality.

I published a npm packge for Angular with Reactive Variable implementation based on Subject, Behavioral Subject and Signal.

Conclusion

This simple approach helped me a lot in improving my productivity and code quality. Even it’ll make it easy to identify bugs. This approach may be your step towards getting into SOLID principles.

Let me know your thoughts in the comments.