Manage your data flow well in an enterprise Angular app

Developers usually go for training or have budget to engage consultants because they probably are doing something complex rather than something simple. Here we are going to talk about the problems we experienced and that our customers experience when building big and complex projects.

What is state in an application?

It turns out over time that almost everything in an application that could change is ultimately state. So when we say state we mean anything about an application that can change. For example, if a user clicks a button, whether or not he has clicked the button, that’s a state. When he clicked the button, that’s part of the state. If there are fields not fully filled yet, that’s still state.

State is data that can change:

• Data you are planning to display on the screen
• Data in the browser environment (eg: an URL)
• Data is on its way to backend system
• Nearly anything else that can change

Where can state hide?

Be wary of arguments that something is not part of the state; actually, it often ends up with part of the state.

• Application Routes / URL
• Error messages/conditions
• “Local” state that only belongs to a specific component
• User partially entered data
• Partially received data from the back end
• Reference or lookup data

Stage 1: State per component

Stage 2: State in interacting components

Stage 3: State in one component at the top

Stage 4: State in services

Stage 5: State in Observables (in services)

Stage 6: Choose and Use a State Library

#angular #programming #typescript #javascript