A common pattern in GUIs is 'showing the data revealed by an API'. For example we might show the data in shopping site, or show account data about customers.
When doing this typically there is a navigation area which determines what is being looked at, and then multiple places that show information about what is being looked at. Each time the state is changed a decision needs to be made about whether to get more information from the backing API(s).
The strategy adopted is to have a 'tag' field in the state which describes the type of the display being shown. This tag
is linked to a set of functions that allow
state-fetcch to decide when to load state information.
state will have (names all configurable - the following is just the normal names)
viewfield that holds a string defining the current view. It is used as a key into the ViewState
mainItemthat is either undefined or the current mainItem the view is focused on
selectionStatethat holds information allowing the mainItem to be fetched (e.g. one or more ids)
Given the name of a view, the view state defines
- How to display it
- How to fetch it from the back end
- How to work out whether it needs to be fetched
Some views depend on parents, and the parent data has to be loaded first. For instance if we are displaying an item in a collection there could be a view for the collection which should be loaded before the item is loaded.
This is handled using
This is the helper method that makes it all work. This controls the rendering.
Generics in View
View store has the signature
usually be a JSX.Element, but is defined as a generic to avoid binding to any specific library. Thus you can use this with any version of react
Displaying the view
@focuson/view-components project has the
MainView component. It is bound to a particular version of react, but you can just copy
it if you want a different version.