Architecture
React App Architecture
The main part of the React app follows the MVC paradigm, which in this case consists of the following three layers:
- API Layer: this layer is responsible for the connection to the server. It handles the actual API calls, including any retries and error handling; it handles any translations between UI and API terminology (that is, the API layer gets data in UI format and returns data in UI format).
- Data Layer: this layer is responsible for storing the UI copy of the data. It also includes the business rules like validation and generating error messages. The data layer is split up in stores which are as small as possible.
- View Layer: the components that render on the screen. Components are as basic and dumb as possible. Business logic should, as much as possible, be handled in the data layer. The components should be view components, avoid unsing React state unless necessary.
Stores
Stores are the fundamental components in the data layer. They have action functions and getters to retrieve stored values. The stores are also responsible for the business functionality, that is, they incorporate the rules of what is valid and how data elements interact with each other.
Stores are used in functional components with a useStore hook,
which causes a rerender when any store emits a change. The use store hook
simply registers an emit change handler to the store; every emit change
in the store calls every registered emit change handler for that store.
Stores and Pages
There are page-specific stores which maintain the application state for a particular page. Temporary data, indicators, and error messages are all maintained in the page’s own store. We should not be using React “state” to maintain the application state.
Input pages have their own store, which maintains an editable copy of the data on the page. The store has functions for each input for onChange, onBlur, validate, getValue, setValue, isModified, getError, setError, and possibly more. These function names are followed by the name of the input element for which they are intended. Note: should look at a VSCode macro to create a set of these functions for an input element. These are a lot of functions for each input element...