We’ve all been there. The UI you’re busy implementing contains a list that can be filtered by multiple inputs, in various ways. Implementing this with an imperative style can lead to state-laden components with a wide surface area for bugs.
Or you could build it using Rx streams and operators.
What is RxJS?
What’s going on here?
We’re using two Rx concepts to get us what we want.
- `BehaviourSubject` is a specific kind of observable stream that can start off with a default value.
- `combineLatest` takes a number of observables and returns a new observable with the result of a calculation that you pass to it. In this case this returns the list of items filtered by each filter.
What we’re left with is an observable of the
filteredItems that we can use to power the UI.
The last piece of the puzzle is to update the filters. This is where the Rx approach really shines because all we need to do is publish a next item to the stream that represents the value of that filter over time and the
filteredItems backed by
combineLatest will update automatically.
Okay, but why?
It takes a while to get your brain around but once you start thinking about your data — whether on the client or the server side — as streams to be composed and manipulated it opens up many new patterns and you’ll find that many problems that can be quite sticky become much more tractable through this lens.
To me the primary benefit of this approach is that it allows you to represent more of your application purely declaratively which makes it easier to reason about.