Data shared among various RXJS Observables

Question

Data shared among various RXJS Observables

I am currently in the process of refactoring some code to utilize RXJS and the angular async pipe. The task at hand involves adding and removing items from an array. I'm wondering if there might be a more efficient approach to manipulating a shared array other than using tap to set store the state in a BehaviorSubject.

this.listSubject = new BehaviorSubject(['a','b','c']);
this.addSubject = new Subject<string>();
this.addAction$ = this.addSubject.asObservable().pipe(
            withLatestForm(this.listSubject),
            map(([itemToAdd, list]) => {list.push(itemToAdd); return list;}),
            tap((data) => this.listSubject.next(data))
        );
this.removeSubject = new Subject<number>();
this.removeAction$ = this.removeSubject.asObservable().pipe(
            withLatestForm(this.listSubject),
            map(([indexToRemove, list]) => {list.splice(indexToRemove, 1); return list;}),
            tap((data) => this.listSubject.next(data))
        );
this.list$ = merge(this.addAction$, this.removeAction$);

EDIT: The UI code is using async pipe,

list$ | async

angular typescript rxjs

Answer 1

Answer №1

If you are looking for a solution, here is an example of how to achieve it:

export class HelloComponent {
  actionSubject = new Subject<Action>();
  action$ = this.actionSubject.asObservable();

  originalList$ = of(["a", "b", "c"]);

  list$ = merge(this.originalList$, this.action$).pipe(
    scan((acc: string[], action: any) => {
      if (action.isDelete) {
        return acc.filter(item => item !== action.item);
      } else {
        return [...acc, action.item];
      }
    })
  );

  onAdd() {
    this.actionSubject.next({ item: "z", isDelete: false });
  }

  onRemove() {
    this.actionSubject.next({ item: "b", isDelete: true });
  }
}

export interface Action {
  item: string;
  // This could instead be an Enum of operations
  isDelete: Boolean;
}

A demonstration of the code can be found in this Stackblitz link: https://stackblitz.com/edit/angular-array-processing-deborahk

The approach involved creating a single action stream that emits an object with information on whether to add or remove an item from the list.

Using the scan operator, the set of items is maintained over time by either adding to or removing from the list.

Your initial code resides in the app.component.ts file, while the revised version can be found in the hello.component.ts file.

Would this method meet your requirements?

Note: Utilizing the async pipe eliminates the need for subscribing directly. You can display the updated list like this:

<div>{{ list$ | async}}</div>

Answer 2

If you are looking for a solution, here is an example of how to achieve it:

export class HelloComponent {
  actionSubject = new Subject<Action>();
  action$ = this.actionSubject.asObservable();

  originalList$ = of(["a", "b", "c"]);

  list$ = merge(this.originalList$, this.action$).pipe(
    scan((acc: string[], action: any) => {
      if (action.isDelete) {
        return acc.filter(item => item !== action.item);
      } else {
        return [...acc, action.item];
      }
    })
  );

  onAdd() {
    this.actionSubject.next({ item: "z", isDelete: false });
  }

  onRemove() {
    this.actionSubject.next({ item: "b", isDelete: true });
  }
}

export interface Action {
  item: string;
  // This could instead be an Enum of operations
  isDelete: Boolean;
}

A demonstration of the code can be found in this Stackblitz link: https://stackblitz.com/edit/angular-array-processing-deborahk

The approach involved creating a single action stream that emits an object with information on whether to add or remove an item from the list.

Using the scan operator, the set of items is maintained over time by either adding to or removing from the list.

Your initial code resides in the app.component.ts file, while the revised version can be found in the hello.component.ts file.

Would this method meet your requirements?

Note: Utilizing the async pipe eliminates the need for subscribing directly. You can display the updated list like this:

<div>{{ list$ | async}}</div>

Answer 3

Answer №2

Typically, the majority of usage involving the tap method is observed among devoted RxJS enthusiasts.

One major concern to address is the importance of modifying your application state (the behavior subject) using a subscription rather than a tap. If there are no subscribers to the list$, then the tap will not be initiated. Conversely, if there are two subscribers to the list$, the taps will execute twice for each event. To avoid this issue, consider utilizing a publish, or implement...

this.listSubject = new BehaviorSubject(['a','b','c']);
this.addSubject = new Subject<string>();
this.addSubject.subscribe(itemToAdd => {
  const currentValue = this.listSubject.value;
  currentValue.push(itemToAdd);
  this.listSubject.next(currentValue);
});
this.removeSubject = new Subject<number>();
this.removeSubject.subscribe(indexToRemove => {
  const currentValue = this.listSubject.value;
  currentValue.splice(indexToRemove, 1);
  this.listSubject.next(currentValue);
});

A secondary concern worth mentioning is the re-emission of your list from multiple subjects. By having three different subjects capable of emitting the same list, you introduce multiple sources of truth and violate CQS principles. Ideally, when calling addItem, grabbing the updated list value should not be necessary. The consumer of the list should automatically receive updates through the updated list subject.

For further exploration: In your application, state management involves the list state and events that can alter this state. This aligns with concepts like "stores" and "actions" in tools such as ngrx. Behavior subjects serve as a lightweight alternative to more comprehensive tools like the ngrx store. As your application complexity grows, delving into resources on tools like ngrx store could provide significant benefits.

Answer 4

Typically, the majority of usage involving the tap method is observed among devoted RxJS enthusiasts.

One major concern to address is the importance of modifying your application state (the behavior subject) using a subscription rather than a tap. If there are no subscribers to the list$, then the tap will not be initiated. Conversely, if there are two subscribers to the list$, the taps will execute twice for each event. To avoid this issue, consider utilizing a publish, or implement...

this.listSubject = new BehaviorSubject(['a','b','c']);
this.addSubject = new Subject<string>();
this.addSubject.subscribe(itemToAdd => {
  const currentValue = this.listSubject.value;
  currentValue.push(itemToAdd);
  this.listSubject.next(currentValue);
});
this.removeSubject = new Subject<number>();
this.removeSubject.subscribe(indexToRemove => {
  const currentValue = this.listSubject.value;
  currentValue.splice(indexToRemove, 1);
  this.listSubject.next(currentValue);
});

A secondary concern worth mentioning is the re-emission of your list from multiple subjects. By having three different subjects capable of emitting the same list, you introduce multiple sources of truth and violate CQS principles. Ideally, when calling addItem, grabbing the updated list value should not be necessary. The consumer of the list should automatically receive updates through the updated list subject.

For further exploration: In your application, state management involves the list state and events that can alter this state. This aligns with concepts like "stores" and "actions" in tools such as ngrx. Behavior subjects serve as a lightweight alternative to more comprehensive tools like the ngrx store. As your application complexity grows, delving into resources on tools like ngrx store could provide significant benefits.

Answer 5

Answer №3

What are the disadvantages of not implementing functions?

listData = new BehaviorSubject(['a','b','c']);

addValue(val) {
  this.listData.next([...this.listData.value, val]);
}

removeValue(val) {
  this.listData.next(...this.listData.value.filter(v => v !== val));
}

Your code lacks clarity in terms of subscriptions to observables. Subscribing to action observables is necessary for triggering functionality. Additionally, be cautious of mutating objects.

Answer 6

What are the disadvantages of not implementing functions?

listData = new BehaviorSubject(['a','b','c']);

addValue(val) {
  this.listData.next([...this.listData.value, val]);
}

removeValue(val) {
  this.listData.next(...this.listData.value.filter(v => v !== val));
}

Your code lacks clarity in terms of subscriptions to observables. Subscribing to action observables is necessary for triggering functionality. Additionally, be cautious of mutating objects.

Answer 7

Answer №4

Your code looks fantastic! One suggestion I have is to consider incorporating immutability into it. This way, whenever you add or remove items from the list, a new list will be generated each time:

    this.addAction$ = this.addSubject.asObservable().pipe(
                withLatestForm(this.listSubject),
                map(([itemToAdd, list]) => [...list, itemToAdd]),
                tap((data) => this.listSubject.next(data))
            );

    this.removeAction$ = this.removeSubject.asObservable().pipe(
                withLatestForm(this.listSubject),
                map(([indexToRemove, list]) =>
[...list.slice(0, indexToRemove), ...list.slice(indexToRemove + 1)]),
                tap((data) => this.listSubject.next(data))
            );

Answer 8

Your code looks fantastic! One suggestion I have is to consider incorporating immutability into it. This way, whenever you add or remove items from the list, a new list will be generated each time:

    this.addAction$ = this.addSubject.asObservable().pipe(
                withLatestForm(this.listSubject),
                map(([itemToAdd, list]) => [...list, itemToAdd]),
                tap((data) => this.listSubject.next(data))
            );

    this.removeAction$ = this.removeSubject.asObservable().pipe(
                withLatestForm(this.listSubject),
                map(([indexToRemove, list]) =>
[...list.slice(0, indexToRemove), ...list.slice(indexToRemove + 1)]),
                tap((data) => this.listSubject.next(data))
            );

Data shared among various RXJS Observables

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The data source retrieved through the "get" API method is missing from the mat-table

The Ocelot API Gateway is a powerful tool for managing

Converting JSON to an array in Ionic 3

Using TypeScript for Context Providers

Displaying nested data on an Angular 8 table

Storing data retrieved from a GraphQL response into the sessionStorage: A step-by-step guide

Refreshing Angular2 View After Form Submission

What is the best way to modify the color of a table cell in Typescript with *ngFor loop?

NGC Error: Unable to locate the type definition file for 'rx/rx.all' - Please fix this issue

Invalid for the purpose of storage

Angular Universal is experiencing difficulties resolving dependencies

Needing to utilize the provide() function individually for every service in RC4

Developing an Azure pipeline to generate artifacts for an Angular Universal application

Using Karma-Jasmine to Import Spy without anyImplicitAny

Encountering TypeScript errors while trying to implement Headless UI documentation

Tips on troubleshooting the issue when attempting to use a hook in your code

Facing issue with Angular 17 where pipe is displaying empty data

The properties required for type 'never[]' are not present

The function 'sendEmailVerification' is not a property of the type 'Promise<User>'

Angular 2 - Bootstrap - Toggle Hide/Show