Best way to subscribe to multiple states / mimic RxJS combineLatest

[ChrisDoernen]

Hi there,

let's assume there are multiple relevant states in a component, e.g. a list of entities (products If you will) and a separate filter.

What is the best way to apply the filter when the filter itself changed or if the list of entities changed?

• We could subscribe to each state separately and call an "apply" function. This works but the code gets longer the more states we want to consider
• We could use the StateSubscriber like FluxorComponent does
• We could decouple applying the filter from the component and move that logic into an effect. This reduces cohesion if the filtering is really only needed in this particular component

The FluxorComponent is really doing exactly this, but only to call StateHasChanged. Unfortunately I don't see a Blazor lifecycle hook like OnBeforeRender, which would be perfect for this situation.

Are there any opinions?

I am trying to get the functionality of a combineLatest in the RxJs world.

All the best

Chris

[mrpmorris]

I'm finding it difficult to understand fully what you mean.

If your app fires off an action to change the filter or the elements in the state, you could have a complete list + a filtered list, and the filtered list would only show fullList.Where(x => filter.Matches(x));

If you want that done in your component instead, you could re-filter the list each time the state changes. You can do this by injecting IState and manually subscribing to the StateChanged event on it - but remember to override Dispose and unsubscribe.

Does that help?

[ChrisDoernen]

Hi mrpmorris,

thanks for replying! I should have pointed out better that the question is about multiple states, let's say 3 states. I want to act based on every of the 3 states, when any of these changes. With RxJs, it works like this (pseudocode):

var subscription = combineLatest(state1, state2, state3)
  .Subscribe((state1.Value, state2.Value, state3.Value) => { 
    // Do something with the latest state values
  });

// Dispose
subscription.Unsubscribe();

This is exactly what StateSubscriber does, which is used in Fluxor Component.

Would it be suitable to use the StateSubscriber in my code?

Best

Chris

[bieri]

so this can be accomplished but it will require all 3 of your state observables to be "hot" when you wire the StateChanged event handler

[mrpmorris]

I wonder if you might be able to use https://github.com/mrpmorris/Cascade/blob/master/Source/Morris.Cascade/CombinedSource.cs in some way?

I've not given any thought to making Fluxor like RxJS