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

lines stay unbroken in angular

Pressing the confirm button will close the sweet alert dialog

Using TypeScript to pass an object's method as an argument in a function call

Limit the parameter of a TypeScript method decorator based on the method's type

Changes on services do not affect the Angular component

Is it possible for me to make the default export anonymous?

Angular 5 - Strategies for excluding specific properties from Observable updates

Issue with Typescript and React: Property not found on type 'IntrinsicAttributes'

Only apply patches to untouched values

developing a collection of Material UI text fields

Issue in Angular Office Add-in: "Unable to locate identifier 'Office'"

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Issue with data updating in Angular rxjs with share, map, and filter functions

Obtain the ViewContainerRef object from the Component

The issue encountered during the construction of the nrwl library project is that object Object is not recognized as a PostCSS

The text inside the Mapbox GL popup cannot be highlighted or copied

Determine the return type of a function based on a key parameter in an interface

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

Can you please explain the significance of classes <T> and <U> in Angular 2?

An issue arising with the TypeScript antlr4ts listener type