standalone component store effect

[tomalaforge]

I often find myself in a situation where I want to use an effect to create a subscription without subscribing manually. I do it the following way but it's far from optimal.

@Component({
// ....
})
export class MyClass extends ComponentStore<{}> {

  private readonly doThing = this.effect<boolean | undefined>(
    pipe(
      // ....
    )
  );

}

However, you can only extends once per class and I don't want to create a service for one small effect inside a small component.

I know that RxAngular has a RxEffect for this purpose.

What do you think about adding one inside Component store ? I think this will be a great add.

Something which can look like this.

@Component({
// ....
})
export class MyClass  {
   myEffect = inject(NgrxEffect);

  private readonly doThing = this.myEffect.effect<boolean | undefined>(
    pipe(
      // ....
    )
  );

}

[brandonroberts]

You can do this already by injecting the ComponentStore class on its own.

import { Component, inject, Input } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { pipe, tap } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{namer}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [ComponentStore],
})
export class HelloComponent {
  @Input() namer = 'standalone effect';

  myEffect = inject(ComponentStore);

  private readonly doThing = this.myEffect.effect<boolean | undefined>(
    pipe(
      tap(() => {
        console.log('done');
      })
    )
  );

  ngOnInit() {
    this.doThing(true);
  }

  ngOnDestroy() {}
}

https://stackblitz.com/edit/angular-ivy-j6wflh?file=src%2Fapp%2Fhello.component.ts,src%2Fapp%2Fapp.component.html

It won't automatically clean up subscriptions though

[tomalaforge]

Hi @brandonroberts,

I haven't even though of using the componentStore as a service. I'm so use to use it as an extends class.

However, I don't understand why you say it won't clean up subscription ? It will.
ComponentStore is tied to our component life cycle. If my component gets destroy, It will compute destroy$.next() and unsubscribe all my effects.

 private componentStore = inject(ComponentStore);

  private readonly showTemplate = this.componentStore.effect<
    boolean | undefined
  >(
    pipe(
      mergeMap(() => interval(1000)),
      tap({
        next: (i) => console.log(i),
        finalize: () => console.log('complete'),
        unsubscribe: () => console.log('unsubscribe'),
      })
    )
  );

[brandonroberts]

I misspoke on that part. I wasn't thinking about the ComponentStore being in the providers