Announcing NgRx Version 9: Immutability out of the box, customizable effects, and more!

Published in

@ngrx

6 min readMar 10, 2020

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

Join Us at NgRx Conf 🚀!

At its core, NgRx is about promoting a reactive approach within the Angular ecosystem. From routing, HTTP, forms, and state management, we love all things Reactive Angular! We are extending that passion to the community with the official announcement of NgRx Conf!

🔥2 Days
📅 20 Speakers
🚀 200 Attendees
November 5–6, 2020 at the Space and Rocket Center in Huntsville, AL

NgRx Conf is a celebration of all things Reactive Angular. Come join us and learn from some of the best speakers in the Angular community about your favorite reactive topics!

Tickets are now on sale!

Follow @NgRxConf for future updates!

NgRx Conf’s Premier Sponsor

We also welcome Nrwl as our premier sponsor for NgRx Conf! Nrwl has been a longtime promoter of NgRx as a tool when building large applications in Angular, and we couldn’t be more excited to have them partner with us for NgRx Conf.

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 our consulting, training, and engineering, plus open-source tools like Nx to elevate your enterprise’s development practice.

Immutability out of the box

Runtime checks for immutability and serializability were introduced in version 8, to aid developers in maintaining best practices when managing state. Two of these runtime checks, strictStateImmutability, and strictActionImmutability are now enabled by default in development, so developers can be assured that their state following immutable practices out of the box.

There is also a new runtime check for validating that actions are dispatched from within the Angular zone. If you’re dealing with less modern web APIs, such as jQuery, that operate outside the Angular zone, this check helps you catch bugs that would occur because of bypassed Angular change detection.

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      runtimeChecks: {
        strictActionWithinNgZone: true,
      },
    }),
  ],
})
export class AppModule {}

Thanks to Stephen Cooper for contributing to this feature!

Creators syntax is now the default!

The new creators syntax, announced in version 8 is now the default for all schematics in version 9. The new syntax allows you to get up and running quickly with less code, and more type-safety. If you are still using the previous syntax, support for it is also still available.

Read our docs, and check out our example application if you haven’t tried out the new syntax already.

Customizable re-subscriptions for Effects

Also introduced in version 8, was the ability to resubscribe to an observable inside an Effect when an error occurs. In version 9, we limit this behavior to 10 retries, and offer the ability to customize the re-subscription behavior according to your needs.

@NgModule({
  imports: [EffectsModule.forRoot([MovieEffects])],
  providers: [
    {
      provide: EFFECTS_ERROR_HANDLER,
      useValue: customEffectResubscriptionHandler,
    },
    
  ],
})

// adjust the number of retries
const CUSTOM_NUMBER_OF_RETRIES = 100; 

export function customEffectResubscriptionHandler<T extends Action>(
  observable$: Observable<T>,
  errorHandler: CustomErrorHandler
): Observable<T> {
  return defaultEffectsErrorHandler(
    observable$,
    errorHandler,
    CUSTOM_NUMBER_OF_RETRIES
  );
}

Thanks to Zak Henry for contributing to this feature!

Breaking Changes

This release contains breaking changes. For most of these breaking changes we’ve provided a migration that automatically runs when you upgrade your application with the Angular CLI command mentioned above.

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

Upgrading to NgRx 9

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

Angular version 9.x
Angular CLI version 9.0.1
TypeScript version 3.7.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. To help us, you can start contributing to NgRx. If you’re unsure where to start, come take a look at our new 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

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: Kyle Cannon, Dmytro Gokun, David Taylor, Hadrien TOMA, AdditionAddict, Kevin Schuchard, ttestman4, shikhin21, Reto Ryter, Akihito Tamagawa, Lefteris Tsallas, Dmitry Teplov, Suguru Inatomi, Gregor Woiwode, Kumaresh C J, Stephen Cooper, Yousuf Jawwad, Zak Henry, Santosh Yadav, Elvis Sun, Evgeny Fedorenko, Carlos Esteban Lopez Jaramillo, erhise, Jordan, Allistair Vilakazi, Jeffrey Bosch, Sumit Parakh, Ilya, Miroslav Jonaš, sanketCactus, Maarten Tibau, bert2, Alan Agius, Artur Androsovych, Koala, joebobfisher, Eddie Tisma, Joe Mason, Haijin He, John Cao, Sam Lin, Andrey Chalkin, Riley Littlefield, Felipe Norato Lacerda, Peter B Smith, John Crowson, jayoungers, Kadamas, Georgi Parlakov, Christoph Guttandin, Jason Hodges, David Bottiau, Christina Braun, Siyang Kern Zhao, Sheila Leverson, MJ Meyer, Gugan Arumugam, EV, Raphael Fuchs, Leonardo Ruhland, Kamran Asif, Marcin Majkowski, mxdmedia, Ryan Streur, Bitcollage, Benjamin Blackwood, tja4472, George Kamtziridis, Marvin Luchs, Mark Grealish, Cédric DUFFOURNET, peterreisz, Wilson Hobbs, Mark, Jon, Elad Cohen, James Hollowell, Itay Oded, ijz953, Michael Randers-Pehrson, Jon Rimmer, Tim Cigrand, Asiel Leal Celdeiro, Robert Gunczer, Pierre-Edouard Galtier, JiaLiPassion, strawbrary, and Ferdinand Malcher.

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

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 was previously a bronze-level sponsor, but has since increased their sponsorship of NgRx development, providing further support for development, travel, 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 continued development of NgRx, please visit our OpenCollective page for different contribution options or contact us directly for other sponsorship opportunities.

More about NgRx Conf Sponsor — Nrwl and Nx:

Visit Nx.dev to get Nrwl.io’s open-source toolkit for monorepo development.
Visit Nx.app, to request access to Nx Cloud, and speed up your build-times by up to 90%!
Visit NxPlaybook.com for free and paid Nx courses!