Is it considered acceptable to share your RxJS Subjects with the public eye?

Question

Is it considered acceptable to share your RxJS Subjects with the public eye?

I recently came across a fascinating article about the Angular onPush Change Detection Strategy

where the author highlighted:

Avoid exposing your subject to external sources; always expose the observable instead by utilizing the asObservable() method.

However, he did not elaborate on the reasons behind this recommendation. Does this imply that actions such as the following should be avoided?

export class ExampleComponent {

  public drawerTrigger$ = new Subject<{}>(); 
}

In the HTML file:

  <button  class="hamburgher-button" type="button"
     (click)="drawerTrigger$.next($event)">
    <i >menu</i>
  </button>

If not, what is the correct approach to handling this situation?

angular typescript rxjs

Answer 1

Answer №1

It is generally not recommended to expose Subjects in your code because it opens up the possibility for others to misuse them, such as uncontrollably calling drawerTrigger$.next().

Even more concerning is that exposing a Subject allows users to call drawerTrigger$.error() or drawerTrigger$.complete(), which can lead to the Subject being marked as stopped and unable to emit any more values. By exposing your Subject, you are giving others the ability to trigger these notifications.

The preferred method of exposing Subjects from TypeScript classes is by strictly typing them as Observable. You do not need to use asObservable() (since RxJS does not internally use this method anywhere in its codebase):

export class ExampleComponent {
  private drawerTriggerSubject = new Subject<{}>(); 
  public drawerTrigger$: Observable<{}> = this.drawerTriggerSubject;
}

Answer 2

It is generally not recommended to expose Subjects in your code because it opens up the possibility for others to misuse them, such as uncontrollably calling drawerTrigger$.next().

Even more concerning is that exposing a Subject allows users to call drawerTrigger$.error() or drawerTrigger$.complete(), which can lead to the Subject being marked as stopped and unable to emit any more values. By exposing your Subject, you are giving others the ability to trigger these notifications.

The preferred method of exposing Subjects from TypeScript classes is by strictly typing them as Observable. You do not need to use asObservable() (since RxJS does not internally use this method anywhere in its codebase):

export class ExampleComponent {
  private drawerTriggerSubject = new Subject<{}>(); 
  public drawerTrigger$: Observable<{}> = this.drawerTriggerSubject;
}

Is it considered acceptable to share your RxJS Subjects with the public eye?

Answer №1

Similar questions

What is the command line method for running ESLint in flat configuration?

What is the best way to dynamically import two css frameworks in React?

Exploring Angular 2: Performing an HTTP GET Request with Specific ID

When passing the parameter in Angular, the value appears as "Ébénisterie," but in Java, it is retrieved as "Ã?bÃ©nisterie"

What triggers Angular's Change Detection mechanism when binding to a function?

Angular: Retrieve the source after navigating

Guide on setting up and configuring the seeder in MikroORM

Creating Typescript declarations for local JavaScript files

The specified file 'node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' cannot be treated as a module

The default filter in Angular Material Autocomplete is failing to function as expected

How to simultaneously send multiple GET requests in Angular 2

The "(click)" event doesn't fire upon clicking a material icon

The table elements do not align properly with Bootstrap styling

TypeScript in Angular causing lodash tree shaking failure

What is the best way to transform a string into a template reference object?

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

Creating dynamic HTML in Angular 2 can be achieved by utilizing directives, data

How is it possible that there is no type error when utilizing copy with spread syntax?

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

There seems to be an issue with functionality, as undefined is not behaving as expected in the combination of Graph