How to document Angular (NGXS) State management

  angular, state-management, uml

We are working on a large angular project using NGXS. Functionality has grown a lot and we have split up our state into 3 substates. State management is getting complicated because many actions trigger other actions and we are losing sight of what the effects are of dispatching new actions. This is mainly due to the fact of the agile mindset and state growing rapidly without refactoring enough. We want to start refactoring, but I am looking into creating a UML diagram to organise, and document our state management.

Does anyone have experience with this and do you have any suggestions on which diagrams to use. I feel like a traditional State management diagram is not the solution because it is hard to visualise our store as being 1 ‘object’ since we have a lot of screens depending on parts of the state. It feels more like I need a flowchart because it would be more useful to document stated depending on decisions. (e.g. ‘user is logged in’ yes -> get customer details from backend go to step x | no -> show login screen)

Any advice or experience is appreciated.

TLDR; What diagrams would you use to document your angular state management (store)

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.