signal store effect - scope effect - subscribe

[robvaneck]

Which @ngrx/* package(s) are relevant/related to the feature request?

effects, signals

Information

I want scoped effects...
so that effect() isnt called everytime when one of the signals change that are used inside the component

Coming from rxjs: signals are unlogical, unflexible, and fire everytime. I get that they wanted to get rid of zone.js... but how do you perform actions/subscriptions/tap/side effects TO the signal store... when some signal changes? It's not very nice design IMO that Angular gave us.

What I currently do (bad design, infinite loop)

  constructor() {
    effect(() => {
      const state = getState(this.store);
      const tool = getState(this.tool);

      // when clicking
      if (tool.tool === Tool.Select && state.mousedown && !state.mousemove) {
        // mousedown function, updates the store, thus firing the effect again..... :(
        this.mouseDown(state);
      }
    });

What I need is this:

this.store.mousedown.effect(()=>{

// a subscription/callback on mouse down signal changes....
// so i can call this.store.updateShapes(newShapes)
// without this function being called
// because the entire store will update, thus triggering the effect again
});

Describe any alternatives/workarounds you're currently using

...

I would be willing to submit a PR to fix this issue

• Yes
• No

[rainerhahnekamp]

@robvaneck, you misunderstand Signals. They are not made for managing multiple events. What you want, is to use the rxMethod, that you feed with an Observable of the mouse event. You can then use all the pipes you require. In the end - when everything is done - the value will find its way into the state, which is represented as a Signal.

If you could give me a prototype on Stackblitz, I can give you a jump start.

You also want to listen to this: https://youtu.be/205cMTcQ82Y?si=0wfpTP706ECdGUIo

[robvaneck]

What do you think of this?

readonly store = inject(DrawerStore);
  private mouseDown$ = toObservable(this.store.mousedown);
  private currentCoords$ = toObservable(this.store.currentCoords);
  readonly tool = inject(DrawerToolStore);

  // Tool Select can drag objects
  // and draw selection rectangle

  ngOnInit(): void {
    this.mouseDown$
      .pipe(
        tap(res => {
          if (this.tool.tool() === Tool.Select) {
            if (res) {
              this.mouseDown();
            } else {
              this.mouseUp();
            }
          }
        }),
        switchMap(() => this.currentCoords$),
        tap(() => {
          if (this.tool.tool() === Tool.Select && this.store.mousedown()) {
                this.mouseMove();
          }
        })
      )
      .subscribe();