Announcing NgRx Version 13: Ivy Builds, Feature Creators, Improved Selectors, and more!

Published in

@ngrx

5 min readNov 17, 2021

Today we’re happy to announce the version 13 release of the NgRx platform. This release contains new features, bug fixes, and some breaking changes, all aimed at improving the developer experience when using NgRx libraries.

Ivy Compiled Libraries 🍃

NgRx libraries are now compiled with Ivy! This isn’t so much a feature of NgRx itself but a milestone in the development lifecycle of Angular. It does benefit NgRx libraries in that they no longer have to be processed by the Angular Compabitility Compiler(ngcc) for libraries previously built with ViewEngine. This also allowed us to remove Ivy-specific checks from our codebase and documentation, such as having to wrap reducers in exported functions.

Now we are able to move forward with directly using the reducer created with createReducer. Libraries partially compiled with Ivy pave the way for us to move to the next generation of Ivy features. We recommend all authors of Angular libraries update your packages to be built with Angular v13 to keep moving the Angular ecosystem forward.

Feature Creators 🪄

Improving the developer experience of state management with NgRx is one of the things we’re always looking to improve. We introduced creator functions to minimize the amount of code you have to write and maintain when using NgRx Store. We’ve continued to slim down the APIs needed for creating the code needed for a feature by introducing the createFeature function. This function combines the feature key, reducer, and selectors for a given slice of state into a single object. Core team member Marko Stanimirović wrote a blog post detailing the NgRx Feature Creator, with snippets included below.

Let’s look at a previous example of setting up a feature slice.

With the createFeature function:

Selectors are also generated from the feature, making it more straightforward to create view models.

You can also read about creating features in our feature creators guide.

Improved Selectors 🤩

Selectors are one of the ways to get the most out of state management with NgRx. In previous versions of NgRx, you were limited to a maximum of 8 selectors that could be combined and composed with createSelector and guaranteed type safety. With advancements in TypeScript and the introduction of variadic tuple types, we have now been able to lift that restriction and provide type safety for any number of combined selectors. The signature for creating selectors is still the same.

While we still recommend 8 combined selectors as a soft limit, the improvements to the selector types allow for additional use cases without manual types being added.

Thanks to David Shortman for working with us to implement these features!

Swag store and Discord Server! 🦺

You can get official NgRx swag through our store! T-shirts with the NgRx logo are available in many different sizes, materials, and colors. We will look at adding new items to the store such as stickers, magnets, and more in the future. Visit our store to get your NgRx swag today!

Join our discord server for those who want to engage with other members of the NgRx community, old and new. You can sign up for an account here. We also still have a large community of users on the gitter channel as well that provides continued help and support to our users.

Deprecations and Breaking Changes

This release contains bug fixes, deprecations, and breaking changes. For most of these deprecations or breaking changes, we’ve provided a migration that automatically runs when you upgrade your application to the latest version.

Take a look at the version 13 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 13

To start using NgRx 13, make sure to have the following minimum versions installed:

Angular version 13.x
Angular CLI version 13.x
TypeScript version 4.4.x
RxJS version 6.5.x or RxJS version 7.4.x

NgRx supports using the Angular CLI ng update command to update your NgRx packages. To update your packages to the latest version, run the command:

ng update @ngrx/store

Contributing to NgRx

We’re always trying to improve the docs and keep them up-to-date for users of the NgRx framework. To help us, you can start contributing to NgRx. If you’re unsure where to start, come take a look at our contribution guide and watch the introduction video Jan-Niklas Wortmann and Brandon Roberts have made to help you get started.

Thanks to all our contributors and sponsors

NgRx continues to be a community-driven project. Design, development, documentation, and testing all are done with the help of the community. We’ve recently added a community section to the NgRx team page that lists every person that has contributed to the platform.

If you are interested in contributing, visit our GitHub page and look through our open issues, some marked specifically for new contributors. We also have active GitHub discussions for new features and enhancements.

We want to give a big thanks to our Gold sponsor, Narhwal Technologies! Nrwl has been a longtime promoter of NgRx as a tool when building large applications in Angular, and is committed to supporting open source projects that they rely on for Nx.

Nx helps architect, test, and build at any scale: It has integrations with modern frameworks, distributed task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

With Nrwl, you’ll find a consulting firm that truly enables you to get a deeper understanding and navigate the most nuanced challenges of building software with Angular, React, and other modern Javascript frameworks.

Comprised of former Angular team members, Googlers, and renowned experts, when working with us, you’ll build software better and faster. You can leverage their consulting, training, and engineering, plus open-source tools like Nx to elevate your enterprise’s development practice.

We would also like to give a big thanks to our silver sponsor, BrieBug. BrieBug is one of the top web and mobile application development consulting firms in the state of Colorado. BrieBug provides enterprise Angular consulting, architectural reviews, team training, and staff augmentation, with multiple Angular GDEs on staff. BrieBug is also a longtime sponsor of the NgRx project, providing further support for development, and hosting expenses.

Sponsor NgRx

NgRx requires significant time and effort that often goes unpaid, and we would like to change that. If you or your company wants to sponsor the continued development of NgRx, please visit our OpenCollective page for different contribution options, buy some swag from our swag store, or contact us directly for other sponsorship opportunities.