×

iFour Logo

What's new in NgRx Version 12 of Angular?

Kapil Panchal - November 18, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
What's new in NgRx Version 12 of Angular?

What is NgRx?


NgRx is one type of Angular framework for building reactive applications. NgRx provides libraries for:

  • Managing global and local state.
  • To promote a cleaner component architecture, it is an isolate of side effects.
  • Entity collection management.
  • Integration with the Angular Router.
  • When constructing many special varieties of applications, it uses Developer tooling that enhances developer experience.

Packages

NgRx packages are primarily divided into these categories:

State

  • Store - RxJS store is used in angular apps for global state management.
  • Effects - Side effect model for @ngrx/store.
  • Router Store - Join the Angular Router to @ngrx/save for Bindings.
  • Entity - For managing record collections, it will use Entity State adapter.li>
  • ComponentStore - Standalone library for managing local/component state.

Data

  • Data - Extension for simplified entity data management.

View

  • Component - Extension for fully reactive Angular applications.

Developer Tooling

  • Store Devtools - It is an Instrumentation for @ngrx/store which allows visible tracking of state and time-journey debugging it.
  • Schematics - It is one type of Scaffolding library for Angular applications which use NgRx libraries.

What is in earlier versions of NgRx?


Let’s have a look at what is new in every version of NgRx: The Angular CLI ng update command is used to update our dependencies NgRx supports CLI. To make the upgrade smoother migration schematics are run. These schematics will fix breaking changes.

Version 4

Dependencies: To use NgRx version 4 libraries, we need to have the latest versions of Typescript and RxJs.

Version 7

Dependencies: Version 7 has the minimum version requirements like

  • Angular version 7
  • TypeScript version 3.1.x
  • RxJS version 6.x

To update our packages to the latest released version, run the command below.

ng update @ngrx/store@7
                

Version 8

Dependencies: Version 8 has the minimum version requirements like

  • Angular version 8.x
  • Angular CLI version 8.0.2
  • TypeScript version 3.4.x
  • RxJS version 6.4.0

To update our packages to the latest released version, run the command below.

ng update @ngrx/store@8
                

Version 9

Dependencies: Version 9 has the minimum version requirements like

  • Angular version 9.x
  • Angular CLI version 9.x
  • Typescript version 3.7.x
  • RxJS version 6.5.x

To update our packages to the latest released version, run the command below.

ng update @ngrx/store@9
                

Version 10

Dependencies: Version 10 has the minimum version requirements like

  • Angular version 10.x
  • Angular CLI version 10.x
  • Typescript version 3.9.x
  • RxJS version 6.5.x

To update our packages to the latest released version, run the command below.

ng update @ngrx/store@10                
                

Version 11

Dependencies: Version 11 has the minimum version requirements like

  • Angular version 11.x
  • Angular CLI version 11.x
  • Typescript version 4.0.x
  • RxJS version 6.5.x

To update our packages to the latest released version, run the command below.

ng update @ngrx/store@11
                

What’s new in version 12?


The brand new release of NgRx Version 12 contains new some breaking changes, bug fixes and, some new features all aimed at improving the developer experience when they are using NgRx libraries.

 

New concatLatestFrom operator for NgRx Effects

By listening to observable streams to perform some task, NgRx effects allows us to isolate side effect logic from our components.

Effects are normally initiated by using an action being dispatched that consists of some additional metadata. There are also situations wherein to provide extra context, Effects need to study records from the store. When combined with using selectors this leads to surprising behavior, as the selectors were subscribed to eagerly instead of waiting until the action is dispatched. As this conduct is part of RxJS itself, we brought a brand new concatLatestFrom operator. concatLatestFrom operator reduces this behavior and allows secure usage of statistics from the store in effects.

The concatLatestFrom operator functions similarly to withLatestFrom. One most important difference is that it lazily evaluates the provided Observable factory. Before the action is dispatched This prevents the supplied observables from emitting.

When selecting additional sources to concat this allows us to use the source value.

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { map, tap } from 'rxjs/operators';
import {Actions, concatLatestFrom, createEffect, ofType} from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { routerNavigatedAction } from '@ngrx/router-store';
import * as fromRoot from './reducers';
@Injectable()
export class RouterEffects {
  updateTitle$ = createEffect(() =>
    this.actions$.pipe(
      ofType(routerNavigatedAction),
      concatLatestFrom(() => this.store.select(fromRoot.selectRouteData)),
      map(([, data]) => `My App - ${data['title']}`),
      tap((title) => this.titleService.setTitle(title))
    ),
    {
      dispatch: false,
    }
  );
constructor(
    private actions$: Actions,
    private store: Store,
    private titleService: Title
  ) {}
}
                
 

ComponentStore Enhancements

NgRx ComponentStore is quickly becoming the library. Angular developers use more frequently to manage state within their applications, regardless of size. It uses NgRx ComponentStore. ComponentStore also provides local state management. In a NgRx Store, Local state management is completely unrestrained of our global state management library. To give developers more tools to manage the state efficiently and reactively we have continued to update ComponentStore with small, but effective improvements. Below are new some updates:

Searching for Reliable AngularJS Development Company ?

 
  • Added a patchState method to accept data synchronously or with an observable.
  • Added a tapResponse operator for handling data/error emissions.
  • Added schematics for scaffolding a ComponentStore provider and optionally including its element providers.
 

Integrated Support for ESLint

Developers having rules and constraints in place aid developers in avoiding common pitfalls whenever developers start using a new library. ESLint some rules we have to add ourselves after adding NgRx Store to our application. By integrating the ESLint rules from the eslint-plugin-ngrx library into the installation of NgRx store, we have made this process simpler. The following command is to add NgRx Store to our project. After performing the below command still, the project is remaining the same.

ng add @ngrx/store
                

After executing the above command Ngrx store is added to set up the ESLint rules for NgRx, provide us with recommended practices, automatic checks, and automated fixes right out of the box. It will help us to get off to a better start when we using NgRx libraries.

 

Breaking Changes

This release carries bug fixes, along with breaking changes. For most of these breaking changes, it provided a migration that automatically runs when we upgrade our application to the latest version.

 

Upgrading to NgRx 12

Make sure to have the below following minimum versions installed, before starting using NgRx 12:

  • 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. To update our NgRx packages we have performed ng update command. To update our packages to the latest version, run the following command:

ng update @ngrx/store
                

Conclusion


In this blog, we learned about different versions of NgRx and its dependencies. We have also gone through latest features of NgRx version 12. It will help you to comprehend changes and updates that could make development process simpler.

What's new in NgRx Version 12 of Angular? Table of Content 1. What is NgRx? 2. What is in earlier versions of NgRx? 3. What’s new in version 12? 3.1. New concatLatestFrom operator for NgRx Effects 3.2. ComponentStore Enhancements 3.3.Integrated Support for ESLint 3.4.Breaking Changes 3.5.Upgrading to NgRx 12 4. Conclusion What is NgRx? NgRx is one type of Angular framework for building reactive applications. NgRx provides libraries for: Managing global and local state. To promote a cleaner component architecture, it is an isolate of side effects. Entity collection management. Integration with the Angular Router. When constructing many special varieties of applications, it uses Developer tooling that enhances developer experience. Packages NgRx packages are primarily divided into these categories: State Store - RxJS store is used in angular apps for global state management. Effects - Side effect model for @ngrx/store. Router Store - Join the Angular Router to @ngrx/save for Bindings. Entity - For managing record collections, it will use Entity State adapter.li> ComponentStore - Standalone library for managing local/component state. Data Data - Extension for simplified entity data management. View Component - Extension for fully reactive Angular applications. Developer Tooling Store Devtools - It is an Instrumentation for @ngrx/store which allows visible tracking of state and time-journey debugging it. Schematics - It is one type of Scaffolding library for Angular applications which use NgRx libraries. What is in earlier versions of NgRx? Let’s have a look at what is new in every version of NgRx: The Angular CLI ng update command is used to update our dependencies NgRx supports CLI. To make the upgrade smoother migration schematics are run. These schematics will fix breaking changes. Version 4 Dependencies: To use NgRx version 4 libraries, we need to have the latest versions of Typescript and RxJs. Version 7 Dependencies: Version 7 has the minimum version requirements like Angular version 7 TypeScript version 3.1.x RxJS version 6.x To update our packages to the latest released version, run the command below. ng update @ngrx/store@7 Read More: A Complete Guide On Ngrx Store Architecture Using Angular Version 8 Dependencies: Version 8 has the minimum version requirements like Angular version 8.x Angular CLI version 8.0.2 TypeScript version 3.4.x RxJS version 6.4.0 To update our packages to the latest released version, run the command below. ng update @ngrx/store@8 Version 9 Dependencies: Version 9 has the minimum version requirements like Angular version 9.x Angular CLI version 9.x Typescript version 3.7.x RxJS version 6.5.x To update our packages to the latest released version, run the command below. ng update @ngrx/store@9 Version 10 Dependencies: Version 10 has the minimum version requirements like Angular version 10.x Angular CLI version 10.x Typescript version 3.9.x RxJS version 6.5.x To update our packages to the latest released version, run the command below. ng update @ngrx/store@10 Version 11 Dependencies: Version 11 has the minimum version requirements like Angular version 11.x Angular CLI version 11.x Typescript version 4.0.x RxJS version 6.5.x To update our packages to the latest released version, run the command below. ng update @ngrx/store@11 What’s new in version 12? The brand new release of NgRx Version 12 contains new some breaking changes, bug fixes and, some new features all aimed at improving the developer experience when they are using NgRx libraries.   New concatLatestFrom operator for NgRx Effects By listening to observable streams to perform some task, NgRx effects allows us to isolate side effect logic from our components. Effects are normally initiated by using an action being dispatched that consists of some additional metadata. There are also situations wherein to provide extra context, Effects need to study records from the store. When combined with using selectors this leads to surprising behavior, as the selectors were subscribed to eagerly instead of waiting until the action is dispatched. As this conduct is part of RxJS itself, we brought a brand new concatLatestFrom operator. concatLatestFrom operator reduces this behavior and allows secure usage of statistics from the store in effects. The concatLatestFrom operator functions similarly to withLatestFrom. One most important difference is that it lazily evaluates the provided Observable factory. Before the action is dispatched This prevents the supplied observables from emitting. When selecting additional sources to concat this allows us to use the source value. import { Injectable } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { map, tap } from 'rxjs/operators'; import {Actions, concatLatestFrom, createEffect, ofType} from '@ngrx/effects'; import { Store } from '@ngrx/store'; import { routerNavigatedAction } from '@ngrx/router-store'; import * as fromRoot from './reducers'; @Injectable() export class RouterEffects { updateTitle$ = createEffect(() => this.actions$.pipe( ofType(routerNavigatedAction), concatLatestFrom(() => this.store.select(fromRoot.selectRouteData)), map(([, data]) => `My App - ${data['title']}`), tap((title) => this.titleService.setTitle(title)) ), { dispatch: false, } ); constructor( private actions$: Actions, private store: Store, private titleService: Title ) {} }   ComponentStore Enhancements NgRx ComponentStore is quickly becoming the library. Angular developers use more frequently to manage state within their applications, regardless of size. It uses NgRx ComponentStore. ComponentStore also provides local state management. In a NgRx Store, Local state management is completely unrestrained of our global state management library. To give developers more tools to manage the state efficiently and reactively we have continued to update ComponentStore with small, but effective improvements. Below are new some updates: Searching for Reliable AngularJS Development Company ? CONTACT US   Added a patchState method to accept data synchronously or with an observable. Added a tapResponse operator for handling data/error emissions. Added schematics for scaffolding a ComponentStore provider and optionally including its element providers.   Integrated Support for ESLint Developers having rules and constraints in place aid developers in avoiding common pitfalls whenever developers start using a new library. ESLint some rules we have to add ourselves after adding NgRx Store to our application. By integrating the ESLint rules from the eslint-plugin-ngrx library into the installation of NgRx store, we have made this process simpler. The following command is to add NgRx Store to our project. After performing the below command still, the project is remaining the same. ng add @ngrx/store After executing the above command Ngrx store is added to set up the ESLint rules for NgRx, provide us with recommended practices, automatic checks, and automated fixes right out of the box. It will help us to get off to a better start when we using NgRx libraries.   Breaking Changes This release carries bug fixes, along with breaking changes. For most of these breaking changes, it provided a migration that automatically runs when we upgrade our application to the latest version.   Upgrading to NgRx 12 Make sure to have the below following minimum versions installed, before starting using NgRx 12: 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. To update our NgRx packages we have performed ng update command. To update our packages to the latest version, run the following command: ng update @ngrx/store Conclusion In this blog, we learned about different versions of NgRx and its dependencies. We have also gone through latest features of NgRx version 12. It will help you to comprehend changes and updates that could make development process simpler.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Power Apps Solving 13 Legal Challenges
Power Apps Solving 13 Legal Challenges

There is a common misconception that bringing technology into the legal field won't be effective as this profession relies heavily on evidence and facts. However, if you look at it...

How to Automate Power BI Reports Using Power Automate
How to Automate Power BI Reports Using Power Automate

"Does Power Automate work with Power BI?”. If you think the same, you’re at the right place. Manual reporting plays an important role in business decision-making but requires more...

What’s New in .NET 9?
What’s New in .NET 9?

Today, we’re thrilled to present you with the first glimpse of .NET 9 release and let you know what features and updates you can anticipate in this new version. Various professionals believe that it’s the right time to explore and adopt the latest version of .NET for your upcoming projects. It is even recommended for projects built using .NET 6 or .NET 8, due to the framework updates made in this version.