[signalStore] Best practice / equivalent for the concatLatestFrom approach but for using a signal

[jits]

Similar question to #4121…

Let's say I have the following effect in a ComponentStore:

return obs$.pipe(
  concatLatestFrom(() => this.#userStore.user$),
  switchMap(([data, user]) => {
    // Do something else
  }),
);

But what if userStore.user is a signal, not an observable (like it would be using signalStore)? What would the equivalent (and best practice) be in a signal store's rxMethod?

An initial idea:

pipe(
  concatLatestFrom(() => toObservable(userStore.user)),
  switchMap(([data, user]) => {
    // Do something else
  }),
);

Maybe we don't even need to convert the signal to an observable? How about?

pipe(
  switchMap(([data, user]) => {
    const user = userStore.user();
    // Do something else
  }),
);

Would this make sense? Is there a better way?

[e-oz]

concatLatestFrom(() => toObservable(userStore.user)),

this will not work, because toObservable() requires an injection context or an injector. You can provide it, though.
Here withLatestFrom(toObservable(...)) is a better option, because it will be called during fields initialization, not lazily - in an injection context.

Reading signals directly, not in a reactivity context might or might not be a good idea.
toObservable() will create an effect internally, and the signal will be read in a reactivity context.

From the first look, we have no benefits out of it, but we might have them if we need not only to read the signal but also filter produced values.

For example:

pipe(
  withLatestFrom(toObservable(userStore.user).pipe(
     filter(user => !!user)
  )),
  switchMap(([data, user]) => {
    // Do something else
  }),
);

The code above will only get to switchMap() when user is not an empty value (and emissions of the source observable, when user was empty, will be omitted).

On the other side, if we do not need such logic (filters, combinations, and so on), we can read the signal directly.

[e-oz]

In my particular situation I can't use withLatestFrom as I need to know the value at time there's an emission.

If you mean emission of the source observable (obs$ in your example), then you'll get what you expect - withLatestFrom will return the last value emitted by the signal (on every emission of obs$). If you need to react when obs$ has emitted or when the userStore.user got a new value, then you need this:

obs$.pipe(
  combineLatestWith(toObservable(userStore.user)),
  skipWhile(([data, user]) => !data || !user), // if you want to wait till both of them are not empty
  switchMap(([data, user]) => ... )
)

If you don't need to react to changes of userStore.user and you don't need to filter them, then you can just read the signal directly, as displayed in the example of @markostanimirovic.

[jits]

Makes sense; nice summary of the 3 options available to us.

So with the 2nd option — using combineLatestWith(toObservable(userStore.user)) — I'm guessing we would still get an injection error (so would need to run it within an injection context [which I'm not sure how to achieve with SignalStore's rxmethod])?

[e-oz]

It will work without errors:
https://stackblitz.com/edit/stackblitz-starters-6ckxpw?file=src%2Fmain.ts

[jits]

Thanks for putting that demo together @e-oz. Makes sense that it would work within a Component and your demo shows that nicely.

In my particular case — within an rxMethod (which is the SignalStore's equivalent of ComponentStore's effect) — I get a sense that we would get an injection error. This isn't the case — see comment below.

I'm jumping ahead to my other use case in #4121, where I only want to start listening to the changes to the user signal within the switchMap — I wonder if you have any thoughts on #4121 as that seems to be the more tricky case?

[jits]

Update:

In my particular case — within an rxMethod (which is the SignalStore's equivalent of ComponentStore's effect) — I get a sense that we would get an injection error.

Apologies — I take that back, it does work well for my case.

I'll add the before/after in #4121 as it's more relevant to that use case.

Thanks again @e-oz!

[markostanimirovic]

pipe(
  concatLatestFrom(() => toObservable(userStore.user)),
  switchMap(([data, user]) => {
    // Do something else
  }),
);

This seems like an unnecessary complication to me. As you mentioned:

pipe(
  switchMap((data) => {
    const user = userStore.user();
  })
)

is 👌

[jits]

Makes sense, thanks @markostanimirovic. Works well for reading the signal value once.

There is another scenario, which I outlined in #4121, for when you want to react to changes in a signal as part of a switchMap (or other flattening operator). I wonder if you have any thoughts on that (especially as the architect of the new SignalStore 💪🏽)? As @e-oz mentioned above, if I try to use a toObservable then I end up with an injection error, so I'm currently stuck converting some ComponentStores into using SignalStore (and in general, it feels a bit messy trying to combine reactivity using signals and observables).