Today, we are really excited to announce NGXS 3.0. Over the past month, the community has poured in ideas, pull requests and bugs and today we are bringing many of those to fruition. So what’s new in 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.
This plugin binds that state from the Angular router to our NGXS store. Read more here.
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.
Additionally, we might have workflows where you want to fill out a form and leave and then come back and resume your current status are great use cases for this plugin. You end up listening to all the events of the forms and firing actions to update your store.
This plugin allows your to bind observable state slices to reactive forms and synchronize the forms state with the store automatically. Read more here.
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.
Snapshots
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.
