State management diagrams for NgRx, Redux, and Vuex
State management libraries such as Redux, NgRx, and Vuex, have been widely used in the web applications. Although there may be differences in certain constructs and terminologies among the libraries, the core architecture is similar: there is a central store that is the single source of truth for the state, and decoupled components that focus on a single task for each, such as dispatching the actions, mutating the state, and displaying a slice of the state. While the benefit of such design is obvious, a common complaint of these libraries is their verbosity — the code that is exercised throughout an action’s life cycle is scattered in multiple modules, and it’s not trivial to piece together all these in one mental picture.
Our state management diagrams (Redux, NgRx, Vuex) are specifically designed to put the entire state management structure right in front of your eyes. You can trace how the actions flow through the system: from the component that dispatches an action, to the reducer/mutation that alters the state upon receiving the action, and finally to the component that displays the new state. Better yet, you can click on an item in the diagram and the corresponding code snippet will be highlighted in a text editor.
This is especially valuable for developers who work on large projects to quickly come up to speed with your store’s implementations. It is also a great visual aid to developers who are learning to use NgRx/Redux/Vuex. In addition, you can capture the diagram in SVG and embed the downloaded file in your documentation.
You can head to our demo site, https://angulardoc-showcases.angulardoc.org/, where we have a collection of sample repositories for Angular, React, and Vue to let you experience what AngularDoc Team Service has to offer.
AngularDoc Team Service is currently available to GitHub repositories. You can use the service in two ways:
- AngularDoc Team Service is provided to open source projects for free on https://angulardoc.org.
- Our SaaS service for closed source projects is hosted on https://angulardoc.io. The annual subscription costs USD $99.
In both cases, signing up is a quick three-step process:
- Log in using your GitHub credential, and authorize AngularDoc to access your repository;
- Set up a subdomain for your account (<myorg>.angulardoc.io) in a single click;
- Pick which repository to use AngularDoc Team Service for.
Then just leave the rest to us — we will automatically analyze your source code and its commit history, and the future commits will be automatically synced through our webhook. Within a few minutes, your team can enjoy a rich set of live diagrams that provide insights into your application’s structure that you have never seen before.
Please don’t hesitate to contact us if you have any questions or comments.