Subscribing to ngrx store triggers multiple emissions

Question

Subscribing to ngrx store triggers multiple emissions

Currently, I have an app with a ngrx store set up. I am experiencing an issue where, upon clicking a button, the function that fetches data from the store returns multiple copies of the data. Upon subsequent clicks, the number of returned copies grows exponentially.

In my component.ts, the selector connected to the store used to fetch the data looks like this:

this.data$ = this.store.pipe(select(selectors.dataSelector));

The function triggered on click event in my HTML is as follows:

  onClick() {
     this.data$.subscribe(x =>
       console.log(x)
     );
   }

After one iteration:

https://i.stack.imgur.com/9dARp.png

After two:

https://i.stack.imgur.com/yxLRm.png

After three:

https://i.stack.imgur.com/iLVeZ.png

This pattern continues with each click. I am concerned about the impact on performance and wonder why this is occurring. Is there an alternative method to obtain data from the store in the component.ts while ensuring that the data is only retrieved once?

angular typescript observable ngrx ngrx-store

Answer 1

Answer №1

Because each time you click, you are subscribing to data$. If you want to handle this on onClick, consider unsubscribing after logging the value x or utilize rxjs take():

  onClick() {
     this.data$.pipe(take(1)).subscribe(x =>
       console.log(x)
     );
   }

Referencing the documentation:

Benefits of using take()

When you only require a specific number of emissions initially, it is recommended to use take(). For instance, if you wish to determine the first user interaction upon entering a page, subscribe to the click event and retrieve the initial emission.

https://www.learnrxjs.io/operators/filtering/take.html

An alternative recommendation is to subscribe to the store elsewhere, such as in your component constructor:

constructor(store) {
   store.pipe(select(selectors.dataSelector)).subscribe(x => {
       this.componentX = x;
   });
}

Therefore, when clicking, you can access the data like so:

onClick() {
   console.log(this.componentX);
}

This approach ensures that you only subscribe during the component initialization phase.

Additionally, remember to always unsubscribe when the component is destroyed to prevent memory leaks.

Answer 2

Because each time you click, you are subscribing to data$. If you want to handle this on onClick, consider unsubscribing after logging the value x or utilize rxjs take():

  onClick() {
     this.data$.pipe(take(1)).subscribe(x =>
       console.log(x)
     );
   }

Referencing the documentation:

Benefits of using take()

When you only require a specific number of emissions initially, it is recommended to use take(). For instance, if you wish to determine the first user interaction upon entering a page, subscribe to the click event and retrieve the initial emission.

https://www.learnrxjs.io/operators/filtering/take.html

An alternative recommendation is to subscribe to the store elsewhere, such as in your component constructor:

constructor(store) {
   store.pipe(select(selectors.dataSelector)).subscribe(x => {
       this.componentX = x;
   });
}

Therefore, when clicking, you can access the data like so:

onClick() {
   console.log(this.componentX);
}

This approach ensures that you only subscribe during the component initialization phase.

Additionally, remember to always unsubscribe when the component is destroyed to prevent memory leaks.

Subscribing to ngrx store triggers multiple emissions

Answer №1

Similar questions

A guide to using Angular to emphasize text based on specific conditions met

Typescript: Unfiltering a string array

Encountering deployment problems with React and TypeScript involving router on Github Pages

Angular 6 custom validation: Ensure that at least one textarea is completed

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

I am encountering an issue in Angular where I am trying to add single quotes and a variable to the component.html file

Troubleshooting issues with exporting Excel in Angular 2

What is the quickest method for setting up types for node packages?

Do we need a peer dependency specifically for TypeScript typings or is it optional?

What is causing the error message "Module '@reduxjs/toolkit' or its type declarations are not found" to appear?

``There seems to be an issue with the Angular Material Table dataSource, as it is not binding correctly or updating

Failure in Dependency Injection in Angular with Typescript

Sharing events between disparate components in Angular

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Is there a feature in Angular 2+ (specifically Angular 7) that allows for comparing code differences

Having trouble selecting all checkboxes in Angular

Angular model remains static when incorporated within the document.addEventListener() attribute

react-hook-form replaces the onChange function causing delays in updating the value

Could you please share the standard naming convention used for interfaces and classes in TypeScript?

Tips for effectively handling Dependency Injection when interfacing with a service that requires a component