Skip to content
Johannes Jablonski edited this page Jun 13, 2021 · 1 revision

Store

Stores are singleton instances that contain the app's state as single point of truth and work according to the observer pattern. There are two main approaches to get data from the store. The simpler one getValue returns the current value once, whereas the caller of getState will be notified whenever the store's state changes.

Store

Getting the state

One time ("getValue")

A caller that calls store.getValue() receives the current value instantly but will never get notified when the store's state changes. The only way for a component to retrieve an updated value is to query the store again. This method should only be used in certain special situations. The default way of connecting to a store should be getState.

Store-getValue

Explanation: One row represents the values over time. In particular, the store always contains one value, and the value gets updated in non-regular intervals (value blue, then green, then yellow, ...). When Component A gets the value with getValue, it receives the current value of the store: blue. However, it will never be notified when the store's state changes. Component B also does not get notified, but calls getValue a second time and gets the updated state. B had to manually query the store to check if an update was there.

Multi time ("getState")

That means, that there can be multiple other components connected to that store that all get notified whenever the store's state changes. The method store.getState() returns an RxJS-Observable that emits the current state of the store instantly and emits every new state whenever the store gets updated.

Store-getState

Explanation: One row represents the values over time. In particular, the store always contains one value, and the value gets updated in non-regular intervals (value blue, then green, then yellow, ...). Component A and B subscribe to Observable from store.getState() and get the current value instantly and every new value. Component C works similarly, but unmounts eventually. Here, new states will not be forwarded (iff the component unsubscribes correctly)

Special stores

The following stores don't contain user or domain data, but information about the app's meta state. Every other store contains feature specific data and is documented only in the class itself.

LoadingStore

The LoadingStore contains information about the number of observables that are in a loading state, e.g. when they are querying the backend. In this case, the query should be piped with withLoadingBar(...).

There is no direct use case for feature components to access this store, since the (un-)registration works with the mentioned withLoadingBar(...), and the display of the loading state is handled by our LoadingBoundary.

ErrorStore

The ErrorStore contains errors thrown by the app. These errors are catched when using withErrorHandler(...). In the case of an error, the ErrorBoundary notifies the user that an error occurred.