Announcing NGXS 3.0

Angular 6 and RX 6 Support

We’ve been testing NGXS 3.0 against Angular 6 and RX6 since the first RC release. We are happy to roll out Angular 6 and RX6 support the day after the release.

Router Plugin

Our browser location data is a dynamic and important part of application state-the kind of state that belongs in a store. Holding it in the store enables devtools luxuries like time-travel debugging, and easy access from any store-connected component.

Forms Plugin

When building Reactive Forms, you need to pass it a raw value. In our store, we are using observables. This forces us to have to make a ‘middle-man’ component that will accept the observable and async pipe it into another component holding the form. This creates extra boilerplate in our applications.

Websocket Plugin

Real-time applications rely heavily on websocket events coming from the server to update your application’s state. We end up creating a ‘middle-man’ that listens to those events and redirects them to a method which calls an update or a redux action which will fire. This plugin allows you to map your websocket events straight into store actions and respond as if they were part of your normal life-cycle. Read more here.

Action Life-cycle

Often when we are dealing with actions, we create multiple states that represent the result of the action. These actions look something like Create, CreateSuccess, CreateError andCreateCanceled. This is a burden for the developer and creates extra boilerplate. In 3.0, we introduce the concept of action life-cycles. Now each action that is dispatch has a life-cycle you can bind to in your action stream and react accordingly. Read more here.

Store Life-cycle

Often when we are creating new state’s, we want to perform some sort of action once all the states for that root/feature has been created. Similar to ngOnInit, we have created a ngxsOnInit method you can create in your state. Read more here.


Observables are great but often when working with the state we just want the raw value. The snapshot feature allows you to get the entire state in a raw object or just select a slice as a snapshot. Read more here.

Cancel Uncompleted

Race cases can be a nightmare to build for and find. One common case is canceling a dispatched action that has not completed yet when we emit a new action of the same type. We have introduced a new feature in our action’s that allow you to do just this without being a RXJS pro. Read more here.

API Docs

We’ve always strived to create amazing docs but we hadn’t spent anytime documenting our API. In 3.0, we have now have API documentation. Read more here.

Bug Fixes

In this release, we have fixed 37 bugs in addition to all the new features we have introduced. Each time we make a new release, the store is ran through multiple real production applications to make sure nothing has regressed and we are production ready. We are committed to creating a quality project and this is just one of the ways we are striving for that.

Whats next?

We are really excited for the future of this project. Many of you have poured in ideas for the coming releases we are going to be building. If you have an idea reach out in our slack channel or log a Github issue.



Crafter of Software • Lover of #JavaScript #goldendoodles & #opensource

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store