Introducing reactive state management using Skclusive.Mobx.StateTree for Blazor
TL;DR
MobX-State-Tree is ported in C# and can be used in Blazor to optimise the dependency tracking and rendering. There is also a working TodoMVC demo.
Skclusive.Mobx.StateTree
In the previous article, Observable is introduced to optimistically render Blazor components.
mobx-state-tree is a reactive state container built on top of mobx.
Following are the mobx-state-tree’s main features.
- Models (primitives and user defined. can be composed)
2. Actions (mutations performed on state properties)
3. Views (computed readonly view properties)
4. Snapshots (serialized view of model at any point in the tree)
5.Patches (mutations on models are emitted as json patches)
mobx-state-tree in github contains in depth details of these features.
It was not easy to bring the dynamic nature of the mobx-state-tree implementation to C#. I tried my best to achieve similar usability and primary features in Skclusive.Mobx.StateTree.
Following is the screen capture of TodoMVC ported from Reactjs + Mobx-State-Tree to Blazor + Skclusive.Mobx.StateTree.
I am excited about the end result. The Blazor TodoMVC application is deployed here.
There are two data model in TodoApp. Todo and a TodoStore to manage list of Todos.
Todo Model Declaration:
TodoStore Model Declaration:
Todo and TodoStore Model types:
Before writing user-interfaces we can verify the Store behaviour with unit tests.
And with the reactive TodoStore, we can use it in Blazor components extending ObservableComponentBase from Skclusive.Mobx.Component without dealing with StateHasChanged when state shared between components.
The project is hosted in Github with samples.
It is possible to integrate the StateTree to redux dev tool. Exploring it.
