How to achieve cross tree communication and data updates ?

[anishmiviewis]

I have a setup where I have one global data store and multiple viewModel trees and I want to get a copy of data from global store and use that data in viewmodels and do operation over it but not mutate the global store. How to achieve this kind of behavior. I have created a sand box which has desired intent of mine. I really need help on this.

Each ViewModels and globalDataRepo is entirely different trees.

Following is the link to the sandbox

codeSanboxlink

[coolsoftwaretyler]

Hi @anishmiviewis - thanks for the question! Tree nodes cannot be shared across separate trees directly. Each node can only exist in exactly one tree.

However, if you want to just share that data across trees, you can always take a snapshot of the items you care about, and create copies in a separate tree. They will be distinct nodes from one another, so they won't share state, but this is an easy way to move data around from different trees. Here's an example using .map(getSnapshot) based on your CodeSandbox. I also fixed a bug where you updated a task item with an incorrect value (using the number 1 instead of the string "1"): https://codesandbox.io/p/sandbox/mobx-state-tree-playground-forked-cmj7yy?file=%2Fsrc%2Findex.js%3A34%2C27

The drawback to this approach is, as I mentioned, you'll end up with copies of your data that will not stay in sync. If that's fine for this use case, because the ViewModel just needs to represent that information visually, then this may be sufficient.

I like using separate view models when they are precisely that: entirely separate view models that can control the behavior of some component or interface. But if you need data sharing between the VMs and your global state, there's no harm in making them part of the same tree, in my opinion.

[anishmiviewis]

@coolsoftwaretyler thank you very much for the solution. Actually in my senario the global store is setup in way to act as an repository outlet which listens to the database changes from the repository layer and gets auto updated when ever data layer changes for that particular Local Database Model and updates model of the global store which then is consumed by certain set of views in stack Screens and their respective ViewModels consumes the updated data and displays it or will get the copy of the model from global store and make changes if the view needs some additional client state for specific scenarios and VM's are never meant to update that particular nature of global store/outlet. So as you suggested I think getSnapShot works perfect for that if I expose it through derivedState ie .views({ taskItems: () => getSnapShot(self.currentJob.taskItems)}) so that VM and Views do not need to worry about calling getSnapShot. And I tried it and works great. Thank you so much for the help :)