11 Reasons why you should use NGXS as State Management in your Angular apps
Tags: angular, ngxs, redux
Published: 2020-08-01 12:32:09

Developers tend to use state management solutions to solve some common problems developing modern single page applications. Building a modern web application using Angular you might **not need** to opt-in for a state management solution right away (it depends) but when the day comes [NGXS](https://www.ngxs.io) is your best choice and here is why.

Why **you** *should* `choose` **NGXS**:

1. **Bulletproofed**: NGXS was built back in Feb 2018. Since then, for many years, it has been chosen by many  dev teams and companies as a state management solution for their Angular apps. Now there are 3.4+ million  npm downloads to date!
2. **Backed by an awesome team**: NGXS is an open source project maintained by a team of great software engineers from across the globe with a combined experience of 80+ years in software development.
3. **Angular way**: NGXS written by Angular devs and for Angular devs. As a result, your store-related code uses a more familiar Angular approach that leverages dependency injection, decorators, etc. 
4. **Great Features**: There are many awesome features that NGXS offers: component communication, state operators, selectors and much more.
5. **Plugins**: NGXS has a [plugin](https://www.ngxs.io/plugins) system built-in - it is similar to Redux's meta reducers. You can use existing [plugins](https://www.ngxs.io/plugins) to extend the functionality on top of your store or you can build your own plugin. Plugins that NGXS offering you: [Logger](https://www.npmjs.com/package/@ngxs/logger-plugin), [Devtools](https://www.npmjs.com/package/@ngxs/devtools-plugin), [Storage](https://www.npmjs.com/package/@ngxs/storage-plugin), [Forms](https://www.npmjs.com/package/@ngxs/form-plugin), [Web Socket](https://www.npmjs.com/package/@ngxs/websocket-plugin), [Router](https://www.npmjs.com/package/@ngxs/router-plugin) and more!
6. **Less Boilerplate**: NGXS was originally invented in response to the complexity and amount of boilerplate present in other state management solutions.
7. **Backwards Compatibility**: NGXS team very strongly stands for backwards compatibility so by migrating to a new version of NGXS you can be assured that your codebase won’t require significant changes as part of the upgrade.
8. **Consistency and Maintainability**: In practice it is much easier to maintain applications that build with the same fashion. When you use NGXS it gives your code a place to live and common patterns will emerge that will make for a much more maintainable codebase.
9.  **Documentation:** NGXS has a great documentation at [NGXS.io](https://www.ngxs.io) in addition to that you can find some blog posts about NGXS on [medium blog](https://medium.com/ngxs).
10. **Community**: The NGXS community is strong, you can join [NGXS slack channel](https://tinyurl.com/ngxs-slack) if you have any questions or if you want to discuss anything or just to say hello. 
11. **NGXS labs**: [NGXS labs](https://www.ngxs.io/ngxs-labs/intro ) is an [organization](https://github.com/ngxs-labs) on github - the place to test out the new ideas and to play around and experiment with new cool features and new plugins that are not yet under the main [NGXS organisation](https://github.com/ngxs). Here is the list of the additional features and plugins currently available at NGXS labs:  
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Data](https://npmjs.com/package/@ngxs-labs/data) - NGXS Persistence API
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Emitter](https://npmjs.com/package/@ngxs-labs/emitter) - provides the opportunity to feel free from actions
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Immer adapter](https://npmjs.com/package/@ngxs-labs/immer-adapter) - declarative state mutations
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Dispatch decorator](https://npmjs.com/package/@ngxs-labs/dispatch-decorator) - provide separation of concern between the state management and the view
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Select snapshot](https://npmjs.com/package/@ngxs-labs/select-snapshot) - decorator that allows to get a snapshot of the state
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Async storage plugin](https://npmjs.com/package/@ngxs-labs/async-storage-plugin) - async Storage Plugin
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Entity state](https://npmjs.com/package/@ngxs-labs/entity-state) - entity adapter
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Actions executing](https://npmjs.com/package/@ngxs-labs/actions-executing) - notifies if action is being executed
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Attach action](https://npmjs.com/package/@ngxs-labs/attach-action) - attaching independent, pure and easy to test Action Handlers to NGXS State
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [Firestore plugin](https://npmjs.com/package/@ngxs-labs/firestore-plugin) - firestore plugin for NGXS

So as you can see there are lots of reasons why you may want to consider NGXS as a state management solution for your Angular applications. To get started check up the documentation at [ngxs.io](ngxs.io) and if you have any questions you can join the [slack channel](https://tinyurl.com/ngxs-invite) to discuss or just comment below.

---

>_My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team._

>_I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it._

>_If you want to learn more Angular tips and tricks join my newsletter at [kuncevic.dev](https://kuncevic.dev?ref=dev)_

>_If you want to know more about Angular subscribe for [Angular Rocks] (https://angularrocks.com/subscribe) podcast_ 🎙