Enhance SignalStore to easily connect reactive sources

[michaelbe812]

Hi there,

I would like to propose an idea to enhance the SignalStore with some ergonomic capabilities on connecting reactive sources like observables or signals.

As of today if I'm not wrong we need to manually wire together e.g. observables to update the state:

const store = signalStore(
  withState<{
    a: any[],
    b: boolean,
    s: string
  }>({
    a: [],
    b: false,
    s: ''
  }),
)

@Component({
  //...
  providers: [store]
})
export class AppComponent {
  store = inject(store)

  constructor() {
    effect(() => {
      console.log({b: this.store.b()})
    });

    interval(1000).pipe(
      take(3),
      map(v => !!(v % 2))
    ).subscribe(value => patchState(this.store, { b: value }))
  }
}

My proposal is a withConnect-Feature which allows to easily connect any kind of observable or signal

const store = signalStore(
  withState<{
    a: any[],
    b: boolean,
    s: string
  }>({
    a: [],
    b: false,
    s: ''
  }),
 withConnect({
  b: interval(1000).pipe(
      take(3),
      map(v => !!(v % 2))
    )
})
)

Additionally I propose that when the withConnect-feature is used also a connect-method with the same functionality is added to the store instance, so that we can also do:

@Component({
  //...
  providers: [store]
})
export class AppComponent {
  store = inject(store)

  constructor() {
    effect(() => {
      console.log({b: this.store.b()})
    });

    this.store.connect({
      b: interval(1000).pipe(
      take(3),
      map(v => !!(v % 2))
    )
})
  }
}

As inspiration for the connect/withConnect method I had a look at RxState, despite they are offering other overloads.

[rainerhahnekamp]

Hello, hello @mikelgo :)

So I think we should use the rxMethod for that:

const store = signalStore(
  withState<{
    a: any[],
    b: boolean,
    s: string
  }>({
    a: [],
    b: false,
    s: ''
  }),
  withMethods(store => ({
    updateB: rxMethod<boolean>(pipe(tap(b => patchState(store, {b})))
  })
)

@Component({
  //...
  providers: [store]
})
export class AppComponent {
  store = inject(store)

  constructor() {
    effect(() => {
      console.log({b: this.store.b()})
    });
 
    this.store.updateB(interval(1000).pipe(take(3), map(v => !!(v % 2)))
  }
}

It is a little bit different. Especially, with simple commands, I've experienced that rxMethod doesn't provide the best DX.

If I could do something like rxMethod<boolean>(b => patchState(store, {b})) or rxConnect<boolean>(b => patchState(store, {b})), I would be much happier.

Turns out, that those "one-line commands" happen very often.

[michaelbe812]

Indeed I forgot to mention that one could also use rxMethod which will lead to a litt less Code needed.

But still I believe we can provide some better DX for just connecting some sources. E.g. the mentioned connect-method of RxState is very handy.

[rainerhahnekamp]

I see but I think it should be more following the style of the signal store where we have standalone functions and not methods.

So instead of having a withConnect or store.connect, just a connect or rxConnect? Could be used as rxMethod and would be standalone.

[michaelbe812]

Totally agree.

My intention for withConnect was that it will be a StoreFeature like e.g. withMethods. So a standalone and tree-shakeable function. Sorry for confusingly using the term method instead of function.