Domain State VS UI State

Domain State vs. UI State

There are mainly 2 types of states we have in an application.

• Domain State
• UI/Widget State

For the definition any piece of information which is related to the business logic of the application is called Domain State. conceptually they exist even if a UI does not exist. On the other hand UI/Widget State is the piece of information that is very specific to a page or a component. It is coupled very tightly with that UI.

Here, to make it clearer, Let’s start with an example, Shall we?

Let’s consider a food ordering application.

It will mainly have following following things :

• Restaurant list and menus
• Users and their addresses
• Map and location details
• Current viewing restaurant menu
• Selected cuisine type
• Current user details
• Delivery person details
• Current order details
• Cart items
• And many more…

Now out of these can you figure out which ones fall into Domain State and Which ones fall in UI State

Let’s look into these in detail…

Domain State

Any piece of information which is related to the business logic of the application. conceptually they exist even if a UI does not exist. For example User token, User details, Session d, User notifications, Cart items, User messages.

These will be eventually stored in Store, Local storage or will be passed in components via props.

UI/Widget State

Any piece of information that is very specific to a page or a component. It is coupled very tightly with that UI. Loaders, Map zoom level, Currently selected restaurant, Selected Cuisine.

I think it’s pretty easy to get now, right? Let’s try to go with the list and check how many you got right…

Let’s start from first item i.e. Restaurant list. Now if you think about it, this list will be available all over the application. We’ll need this list to show menu, Show specials etc. Hence this will be available in Domain state. Same goes with Menu of a Restaurant,Price of the dish, etc.

Now come to Map and location, Here we have the location of the Delivery boy which will be only useful on the map. Same goes with the current viewing restaurant and selected cuisine type, Displaying loader or displaying errors on the page. This will be usable in the current component or the page we are viewing and will be destroyed once the view or component is destroyed.

Going ahead with current user details, Again this is the data we’ll need in the whole application. This data won’t be specific to a page or widget. Hence this will be treated as Domain State.

Concluding the table Domain state will be stored in Backend, Local Storage or in the Store. So that they can be used all over the application,

UI state will be stored in Components with local variables, useState and in Component state and for the most part won’t be available outside of the respective component except state passed as a prop to child components.

Cheers!!

Sangwin Gawande

About me : https://sangw.in