How to make nested level using mobx-state-tree
I’ve heard mobx-state-tree for a while. Today I looked into it, and found it’s pretty lovely. Kind of the fat model pattern. Where it could make the code much more cleaner and far more less boilerplate compare to redux. Today, let’s see how to make nested level in mobx-state-tree.
1. What do we want
1 | { |
You can tell from the above shape, that we want all ui state reside under ui
, and all the entities reside in entities
. Which means in the future, we can have screenB
, screenC
in ui
, and stores
, flowers
in entities
.
2. No object type in MST
You can’t write something like types.model({ screenA: { isBookOpen: false }})
. You need to declare the content of screenA
in another variable and assign it.
This is how you define screenA
:
1 | const screenAModelDetail = types.model({ |
For books, it’s very simple:
1 | const booksModel = types.model({ |
3. Compose the top level
Now you can invoke the types.compose
to compose all the nested level. It will flatten them.
1 | const storeModel = types.model({ |
What about you want to add another screenBModel
? You just add it as another parameter like this:
1 | const storeModel = types.model({ |
4. Let’s do a quick test
Let’s get a snapshot of this newly created model.
1 | const snapShot = getSnapshot( |
You get this:
1 | { |
Congrats, you did it! :)
Thanks for reading!
Follow me (albertgao) on twitter, if you want to hear more about my interesting ideas.