How does ViewModel get the Model?

[MikeWarren2014]

I love how simple and intuitive this is, namely how you implemented ViewModel in a way that we won't have to butcher the React Components by passing in a ...ViewModel prop. It's a lot better than what my manager is making us all do. However, I don't get what we should do if the Model is a class (like it is in our scenario at work). I'm taught the model is the shape of the data + some API-hitting methods to mutate it (this is enforced at work). Could you produce an example of a class-based Model, so that I can see what this would look like?

[gaplo917]

If I understand correctly what your "Model" means (Domain Specific Data Model), this example has already demonstrated how to play with ES6 Class Model. Please take a look on components/*Vm and states/*State

"Separation of Concern" is most important concept when you are designing project architecture. In this use case, it takes 4 layers of separation (it depends your use case, more layers needed when the project scale is big).

L1: ui L2: -> view model L3: -> domain models / service / repository L4: -> remote domain models(i.e. Api Response)

Each layer is responsible to touch the "next" inner layer ONLY to archive "Separation of Concern".

Back to your question, methodologies of manipulating the data model (L2-L4) are all about Javascript & MobX and (can be) nothing related to React.

This example is only one of the routes that is clean and intuitive. You could do it whatever MobX and Javascript allows 💪🏻