NgRx 22 Stops Losing Your Data on Reloads

The latest NgRx update for Angular introduces features to prevent data loss on reloads and handle errors more gracefully, simplifying development.

The team behind NgRx, a widely-used library for managing application state in Angular projects, has released a significant update with version 22. According to a report from InfoQ, this release introduces several new features aimed at modernizing the developer experience and improving application resilience. The most notable additions are experimental resource extensions and enhanced support for Angular's signal-based reactivity. To adopt this new version, development teams will need to be running on Angular 22 and TypeScript 6.0. While the update includes some breaking changes, the NgRx team has provided automated migration tools to simplify the upgrade process for most projects, lowering the barrier for teams to access these new capabilities.

The core of the NgRx 22 update lies in its new experimental resource extensions, which fundamentally change how applications handle data fetching. Previously, when a component fetched data and was then removed from view—for example, when a user navigated to a different page—the fetched data, or its loading state, would often be lost. The new extensions address this by allowing the data value to be retained even during reloads. This creates a smoother user experience, as data can reappear instantly without a redundant network request. Furthermore, the extensions change how errors are handled. Instead of throwing an exception that could interrupt the application flow, errors are now captured within the resource's state, making it easier for developers to build graceful error-handling logic. The update also introduces dynamic deep signals for union types, a technical enhancement that makes it easier to work with complex state shapes within NgRx's modern, signal-based store.

This release reflects a broader trend in the frontend development ecosystem toward more declarative and resilient state management. NgRx has long been the standard for complex Angular applications, but it has traditionally been built entirely around RxJS, a library for handling asynchronous events. As Angular itself has pivoted to embrace signals for its core reactivity model, NgRx must evolve to stay relevant. This update shows a commitment to a hybrid approach, blending the power of RxJS for managing complex event streams with the efficiency and simplicity of signals for synchronizing state with the user interface. By tackling common pain points like data retention and error handling, NgRx is aligning itself with solutions in other ecosystems, such as React Query or TanStack Query, which have gained popularity by simplifying server-state management.

For development teams and CTOs, NgRx 22 presents a clear path forward for modernizing their Angular applications. The automated migrations for breaking changes signal that this is an upgrade worth planning for, rather than a risky overhaul. The practical benefit for developers is a significant reduction in boilerplate code. The new resource extensions can replace complex, custom-built logic for managing loading states, data caching, and error displays with a more streamlined, built-in solution. This allows engineers to focus more on building features and less on the underlying plumbing of state management. As these features are currently experimental, teams can begin integrating them in non-critical parts of their applications to evaluate their impact. Looking ahead, the community will be watching to see these features mature and become stable, solidifying NgRx's position as a modern, powerful tool in the Angular ecosystem.

For Angular developers, NgRx 22 significantly improves the developer experience by simplifying common data-fetching patterns. The new resource extensions reduce boilerplate code for handling loading states and errors, while signal enhancements provide more powerful tools for building modern, reactive user interfaces.

This update can lead to faster development cycles and more robust applications. By simplifying state management and error handling, teams can build features more quickly and reduce bugs related to data fetching, improving both developer productivity and the end-user experience.