Reactive Goodies–IReactiveDerivedList Basics

Collections or lists are an important part of almost any App. Sequences of data need to be presented in a certain order to be able to be filtered and searched while the UI needs to reflect any changes to that data. Beyond simply listing data and informing the UI layer about Inserts and Deletes the ObservableCollection is very limited. In a previous post ReactiveUI goodies – ReactiveList I already introduced the ReactiveList as part of ReactiveUI. As promised I would like to talk about another feature and to continue the example of that post, I would like to introduce a generic interface called IReactiveDerivedList. Or more importantly the method CreateDerivedCollection() of  ReactiveList. Interestingly enough, ReactiveUI does not provide a direct implementation of IReactiveDerivedList you can instantiate. So you always just expose the interface. Think of IReactiveDerivedList more as a view over an existing list. It cannot exist on its own, it merely projects existing data in new way. In some sense it’s the Observable counter part of ICollectionView used by CollectionViewSource. So let’s get started and see how it looks in code.

private ReactiveList<TodoItem> _rootList;
private IReactiveDerivedList<TodoItem> _items;
     
public IReactiveDerivedList<TodoItem> Items
  {
     get { return _items; }
     set { this.RaiseAndSetIfChanged(ref _items, value); }
  }

I did a little change in declaring the Items property from the original demo. We still use a ReactiveList for all items we load, but only as a private field. No longer do we expose that list through a public property. Instead we declare the Items property as IReactiveDerivedList with its own backing field. Now, let’s look at the code to instantiate our Items property,

Items = _rootList.CreateDerivedCollection(x => x, x => true,
                                       (x, y) => x.DueDate.CompareTo(y.DueDate));
 
_dataService.Listen()
      .ObserveOn(RxApp.MainThreadScheduler)
      .Subscribe(x =>
      {
         _rootList.Add(x);
      });

As you can see the code is almost identical to the original example. The only change is a one-liner to create our view over the root list. All actual changes (inserts/updates/deletes) still happen on the root list. As a matter of fact, we can forget about the IReactiveDerivedList after its declaration. All the magic happens automatically from there on. You also might have noticed that I have already introduced a new feature to my App. All Todo items are now sorted by date. The only thing I had to do was to provide a lambda expression that describes the sort order of the Todo items. If you run the demo app you can see how nicely newly added items get inserted according to their date.

This is only the beginning on what can be archived with CreateDerivedCollection(). Stay tuned for some follow up posts on derived awesomeness.

Please find the example code at https://github.com/bitdisaster/practicalcode

Happy Coding!