44
loading...
What’s New in Ngrx Version 12 of Angular?
NgRx is one type of Angular framework for building reactive applications. NgRx provides libraries for:
Packages
NgRx packages are primarily divided into these categories:
State
Data
View
Developer Tooling
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
To update our packages to the latest released version, run the command below.
ng update @ngrx/store@7Version 8
Dependencies: Version 8 has the minimum version requirements like
To update our packages to the latest released version, run the command below.
ng update @ngrx/store@8Version 9
Dependencies: Version 9 has the minimum version requirements like
To update our packages to the latest released version, run the command below.
ng update @ngrx/store@9Version 10
Dependencies: Version 10 has the minimum version requirements like
To update our packages to the latest released version, run the command below.
ng update @ngrx/store@10Version 11
Dependencies: Version 11 has the minimum version requirements like
Dependencies: Version 11 has the minimum version requirements like
To update our packages to the latest released version, run the command below.
ng update @ngrx/store@11The 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.
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/storeAfter 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:
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/storeIn 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.
44