How to think about derived streams in rxjs (following FRP)?

[csenio]

I run into things like this all the time, let's say I have teams and each team has members. A user can select a currentTeam and a currentMember. We get a dependency chain like this teams > currentTeam > members > currentMember.

In other declarative frameworks this is pretty trivial to handle. I can just declare currentMember = f(members) or members = f(currentTeam). Here is a code example in react: https://codesandbox.io/s/derived-state-in-react-n9dlkg?file=/src/App.js:284-299

But I can't wrap my head around how to do this in rxjs. The core idea should be the same, teams, currentTeam etc. can all be described as streams. The question is where do I call "subscribe" to grab the output from these streams? If members = f(currentTeam) then by subscribing to members I also implicitly subscribe to currentTeam but this is intransparent and there is a risk that some streams stay cold because they aren't explicitly subscribed to.

This is mostly a conceptual / frp question, I can hack together something that works, but I want a solution that's in line with frp principles. And to my understanding, this should be possible with a single subscribe call at the end.
Here is my incomplete rxjs code attemting to do this: https://codesandbox.io/s/derived-state-rxjs-dpzknz?file=/src/index.mjs:460-469

[voliva]

Your attempt is only missing startWith() on both teamValue$ and memberValue$ to set the initial value. Otherwise combineLatest just waits until both have changed (and memberValue$ can't change since the options are not populated)

Usually the way I go about it is having a clear distinction on what are events and what is state. Everything that's state, I make it a multicast observable (with something as shareReplay(1), but you can use many others). And events stay as cold observables.

And everything else is just a matter of composing observables further down the chain. I have implemented this in a fork of your sandbox https://codesandbox.io/s/derived-state-rxjs-forked-7sd7tt?file=/src/index.mjs, but also making teams and members an observable: It adds some extra complexity, but also lets you see how new features can be added easily.

A few couple examples from this sandbox:

const selectedTeam$ = merge(
  teams$.pipe(
    map(teams => teams[0]),
    take(1)
  ),
  teamChange$
).pipe(
  shareReplay(1),
);

const selectedMember$ = merge(
  memberChange$,
  selectedTeam$.pipe(
    withLatestFrom(members$),
    map(([team, members]) => members[team][0])
  )
).pipe(
  shareReplay(1)
);

I need a state that has the selected team. It will start with the first team coming from teams$ once it loads, and will change as teamChange$ emits.

I also need a state that holds the selected member. This will be whatever the user has selected when memberChange$ emits, but also every time that selectedTeam$ changes, then it will reset to the first member of that team.

Lastly, you could also have a few .subscribe()s to deal with different rendering responsibilities, and I don't think this would break any FRP convention. You could have teams$.subscribe() that updates the list of teams on the DOM, and selectedTeam$.subscribe() that only updates the selected value of the select box (Although it shouldn't be needed since the DOM already does that for you).