Announcing NgRx 4

There is a lot in this release that the team hopes you will enjoy. Some of the highlights:

• Official support for lazy loading
• Simplified testing
• Redesigned router integration

Of course, there is a lot more great stuff in this release (the improved dev ergonomics and error messages for starters). So check out the ngrx platform repository to find out more.

Support for Lazy Loading

Even though it was always possible to use lazy loading with NgRx (see here), it was not easy: you had to manually manage loading and unloading reducers. With this release we’ve added official support for lazy loading.

Similar to the Angular router, NgRx uses forRoot for the main NgModule, and forFeature for a lazy-loaded one.

Improved Testing

NgRx clearly separates the UI, state management, and side effects. This alone makes testing more straightforward and enjoyable, but we always knew we could do better.

Since reducers are synchronous pure functions, testing them was always as easy. But testing effects classes, which heavily rely on RxJS, was tricky.

The RxJS community came up with a great solution to simplify testing RxJS observables — marble testing, which makes tests visual and easy to read. Previously it was not easy to use marbles for testing effects classes, but it has changed with NgRx 4.

Redesigned Router Integration

NgRx helps with one of the hardest problems in software development — state management. But it is not the only part of the state management story. The other one is the router. And, that is why, making sure that NgRx and the router work well together was a high priority for us.

The main issue we had with the NgRx 2 router integration is that it the store and the router were synchronized after that fact. This meant that resolvers and guards could not access the new state, which made them less useful. This also meant that the store could not cancel the navigation.

To fix that we had to make the Angular router more pluggable. And once that was done we redesigned the integration to make the store update part of the navigation process.

What Happened to NgRx 3?

NgRx has been a semi-official state management library for Angular for quite some time. It is a crucial part of the Angular ecosystem. That’s why we wanted to make sure the version numbers are aligned with the core framework. Read this post by Igor Minar or the release of Angular 4 to learn more.

Support NgRx on Open Collective

We’ve often been asked how people can support NgRx development. You can support NgRx through our Open Collective page. This will cover costs for hosting, continuous integration and other miscellaneous development expenses.

Learn More

We put a lot of work into making sure that migrating from NgRx 2 to NgRx 4 is straightforward and to a large degree mechanical. Read “Migration Guide from V2 to V4” for more information.

You can also learn more on why you might use NgRx 4 and how to use it efficiently in these resources.

* Using NgRx 4 to Manage State in Angular Applications

* NgRx 4: Advanced Patterns and Techniques

* Comprehensive Introduction to @ngrx/store

Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and contributed significantly to Angular, including dependency injection, change detection, forms, and router modules.