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.
• 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? Your Search ends here.

• 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.