Introduce Mobx-State-Tree for Measurement Tab in Sample

[jhmegorei]

Introduce Mobx-State-Tree for Measurement Tab in Sample

This is a general introduction of MST as store solution. It provides an example implementation
and shows how simple and readable this solution can be in contrast to the much more complex Redux Pattern.

Reasons to switch to Mobx-State-Tree as store solution:

• alt.js is rather old, not well-maintained and it's integration into the ELN has not been store-first (meaning there are lots of places where non-store solutions are used)
• alt.js's architectural pattern are not easily understood without extensively studying the documentation. Actions and their callbacks are scattered over different locations, making reasoning about data flow quite complicated.
• In contrast to Redux, MST can be used efficiently with way less concepts to learn.
• MST allows references between objects. This reduces data nesting and allows the store to be used much more like a database.
• MST allows store manipulation only within actions, forcing a much more streamlined code and increasing discoverability.
• A minimum example of how to integrate MST into ELN can be seen in Introduce Mobx-State-Tree for Measurement Tab in Sample #848

How does the measurements implementation work?

Providing the global store object

https://github.com/megorei/chemotion_ELN/blob/mst-measurements/app/packs/src/components/App.js#L134-L136
The app is wrapped into a context (see React Contexts for more details: https://reactjs.org/docs/context.html).

Accessing the store from within a class component

Classes within the app can access the context's value by using the context type (https://github.com/megorei/chemotion_ELN/blob/mst-measurements/app/packs/src/components/MeasurementsTab.js#L14). This finds the nearest context value of the given class (here: StoreContext). With this context type, the class can access the store object via this.context (see https://github.com/megorei/chemotion_ELN/blob/mst-measurements/app/packs/src/components/MeasurementsTab.js#L30)

Note: functional components need to use the function useContext() instead of the static contextType property the class uses.

Creating an object in the store

The store can only be updated within an action. After reading the measurements from the API (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/MeasurementsStore.jsx#L39), the action _storeMeasurementsForSample is called, that translates the api data structure into instances of MST models, that are saved into the store (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/MeasurementsStore.jsx#L29)

Reading an object from the store

The measurementStore is organized as a key-value store. Using get(IDENTIFIER) on a store property returns the requested object (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/MeasurementsStore.jsx#L79).

MST uses the concept of views to create convenience functions for accessing the store. This organizes any data filtering or other more complex reading operations within the store, which makes reasoning about the data easier. (See https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/MeasurementsStore.jsx#L69)

Deleting an object from the store

The method delete(IDENTIFIER) (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/MeasurementsStore.jsx#L60) deletes an object from the store. Beware: This may only be called from within an action.

Making your component observe store changes

Wrapping the exported object into the mobx-react observer() function is normally sufficient to notify the component about any store changes (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/components/MeasurementsTab.js#L78)

Organizing multiple stores

I created a root store as a wrapper for all sub-stores. Currently there is only the MeasurementStore, but more will follow. This allows the global sharing of the RootStore, while every component can access the sub-store either directly or via a view-abstraction (https://github.com/megorei/chemotion_ELN/blob/0271713c1422483a7ed1959f7c2b7eb96ea606f8/app/packs/src/mobx-stores/RootStore.jsx#L10). The view itself is not necessary but can be quite helpful if there are name conflicts and we want to access the store with a name easy to understand.