Announcing NgRx Version 12: New operator for Effects, ComponentStore Enhancements, Integrated support for ESLint, and more!

Published in

@ngrx

6 min readMay 13, 2021

Today we’re happy to announce the version 12 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.

New concatLatestFrom operator for NgRx Effects

NgRx Effects allows you to isolate side effect logic from your components by listening to observable streams to perform some task. Effects are usually initiated by an action being dispatched that contains some additional metadata. There are also scenarios where Effects need to read data from the Store to provide additional context. This lead to surprising behavior when combined with using selectors, as the selectors were subscribed to eagerly instead of waiting until the action is dispatched. As this behavior is part of RxJS itself, we introduced a new concatLatestFrom operator to mitigate this behavior and allow safe usage of data from the store in Effects.

The concatLatestFrom operator functions similarly to withLatestFrom with one important difference being that it lazily evaluates the provided Observable factory. This prevents the provided observables from emitting before the action is dispatched.

This allows you to use the source value when selecting additional sources to concat.

Learn more about the concatLatestFrom operator in the operators guide.

ComponentStore Enhancements

NgRx ComponentStore is quickly becoming the library Angular developers use more often to manage state within their applications, regardless of size. ComponentStore provides local state management that is completely independent of our global state management library, NgRx Store. We’ve continued to updated ComponentStore with small, but effective improvements to give developers more tools to manage state efficiently and reactively. Below are a new few updates:

Added a patchState method for partial updates that can accept data synchronously or with an observable.
Added a tapResponse operator for handling data/error emissions.
Added schematics for scaffolding a ComponentStore service and optionally adding it component providers.

Watch our keynote from ng-conf 2021 to get an overview of ComponentStore

If you haven’t looked at NgRx libraries in a while, check out ComponentStore to see how it can fit into your application.

Integrated Support for ESLint

Whenever developers start using a new library, having rules and constraints in place aid developers in avoiding common pitfalls. ESLint rules for NgRx recommended practices have been in place for a long time but were still something you have to add yourself after adding NgRx Store to your application. We’ve made this process simpler by integrating the ESLint rules from the eslint-plugin-ngrx library into the installation of NgRx store. The following command to add NgRx Store to your project is still the same.

ng add @ngrx/store

When running this command, NgRx Store is added, along with setting up the ESLint rules for NgRx, giving you recommended practices, automated checks, and automated fixes right out of the box. The ESLint rules are maintained by fellow team member Tim Deschryver, and other community contributors. We think this will help developers get off to a better start when using NgRx libraries. Check out the eslint-plugin-ngrx repository for more details, including adding the ESLint plugin to your existing projects.

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.

Breaking Changes

This release contains bug fixes, along with breaking changes. For most of these 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 12 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 12

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

Angular version 12.x
Angular CLI version 12.x
TypeScript version 4.2.x
RxJS version 6.5.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 would like to thank the contributors that helped to work towards this release of NgRx: Adam L Barrett, Adam Nagy, Alan Agius, Alexandr Vanilchuk, AlmaniaM, Bitcollage, Booster2ooo, Bruno Baia, Cheong Yip, Damion C, Daniel Schuba, David, Dayne May, Dzhavat Ushev, Enea Jahollari, Felix Lemke, Fyodor, George Suveti, Guilherme Siquinelli, Hadrien TOMA, Jay Bell, Jeffrey Bosch, Jeremias Peier, Jonas Auer, Jordan, Krishna Mohan, Kuba Sekowski, Lars Gyrup Brink Nielsen, MG, Maksym Kochanov, Marko Stanimirović, Martin V, Mateusz Stefańczyk, Matthew Harris, Michael Monerau, Mike Dalrymple, Moisés, Morten Bjerg Gregersen, Nils Mehlhorn, Omar Hasan, Oscar Flores, Pedro, Pierre-Edouard Galtier, Rafael Santana, Rovshen Nazarov, Sameera Perera, Samet Alemdar, Samuel Fernández, Sebastian Podgajny, Shaun Jackson, Stephen Cavaliere, Suguru Inatomi, Tiago Temporin, Tiffany Chen, Tim Deschryver, Travis Vroman, Tushar Chauhan, Wataru KASAHARA, Yuto Hara, Zac Svoboda, Zachary DeRose, arpan patel, ddbk, moniuch.

If you are interested in contributing, visit our GitHub page and look through our open issues, some marked specifically for new contributors.

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.

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.