La versione 15 di NgRx ha introdotto le API standalone nel pacchetto, consentendo l'utilizzo di NgRx con applicazioni angolari basate su componenti standalone . Ciò consente un'integrazione più semplice di NgRx nella tua applicazione.

Nx ha aggiunto il supporto per l'utilizzo di queste API standalone da NgRx quando si generano negozi NgRx con il nostro @nrwl/angular:ngrxgeneratore quando si fornisce un percorso a un Routesfile di definizione. (Di solito indicato con *.routes.ts)

In questo articolo, esamineremo l'utilizzo di Nx per creare una nuova applicazione angolare basata su componenti standalone e aggiungeremo NgRx ad essa, utilizzando SOLO generatori Nx!

Preferisci una versione video? Ti abbiamo coperto!

Crea un nuovo spazio di lavoro Nx

npx create-nx-workspace myorg

Selezionare:

• App angolare autonoma
• Sì all'utilizzo dei componenti autonomi
• Sì per aggiungere il percorso
• Qualsiasi opzione per il formato del foglio di stile
• Sì a Nx Cloud

Ora corri cd myorgper entrare nell'area di lavoro.

Dovrebbe src/main.tsapparire diverso da come ricordi con le applicazioni angolari standard basate su NgModule.

Dovresti vedere qualcosa di simile a

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
}).catch((err) => console.error(err));

Nx aiuterà anche questo!

Genera lo stato radice

nx g @nrwl/angular:ngrx --root --parent=src/main.ts

Ti verrà chiesto un nome per lo stato della funzione, ma puoi ignorarlo e premere semplicemente invio nel tuo terminale, non è necessario in questa fase.

Dite il falso anche a Facades.

Il generatore ora apporterà modifiche al tuo main.tsfile e installerà i pacchetti NgRx per te!

Il tuo main.tsfile ora dovrebbe assomigliare a questo

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';

bootstrapApplication(AppComponent, {
  providers: [
    provideEffects(),
    provideStore(),
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
  ],
}).catch((err) => console.error(err));

Genera una nuova libreria di funzionalità

NgRx funziona meglio quando dividi il tuo negozio in base alle funzionalità che hai all'interno della tua applicazione. Questo è un caso d'uso piuttosto comune. Nx ti consente di farlo molto facilmente e in modo molto strutturato.

Innanzitutto, generiamo una nuova libreria di funzionalità, chiamata feature-users, in Nx che ospiterà tutto ciò che riguarda la nostra funzionalità, incluso lo stato NgRx.

nx g @nrwl/angular:lib feature-users --standalone --routing --lazy --parent=src/app/app.routes.ts

Questo comando fa alcune cose:

• Crea una nuova libreria nel nostro spazio di lavoro Nx
• Utilizza un componente autonomo angolare come punto di ingresso
• Aggiunge una configurazione di instradamento alla libreria e aggiunge il componente come instradamento predefinito.
• Aggiungerà un percorso a caricamento lento al app.routes.tsfile dell'applicazione, collegando l'applicazione alla libreria!

src/app/app.routes.ts
feature-users/src/lib/lib.routes.ts

Aggiungi lo stato delle funzionalità alla libreria delle funzionalità

Ora che disponiamo di una libreria di funzionalità per le funzionalità dei nostri utenti, generiamo lo stato della funzionalità! È semplice come un comando.

nx g @nrwl/angular:ngrx users --parent=feature-users/src/lib/lib.routes.ts --route=''

Ti verrà chiesto se questo è lo stato root dell'applicazione, inserisci N. Quindi dì di no a Facades (a meno che tu non li voglia davvero).

L' --routeopzione qui è usata per dettare cosa routeall'interno del nostro file di definizione delle rotte ( lib.routes.ts) dovrebbe avere lo stato collegato ad esso. Questo per consentire alle API NgRx Standalone di essere collegate a quella rotta.

Possiamo vederlo se guardiamo il lib.routes.tsfile

import { Route } from '@angular/router';
import { FeatureUsersComponent } from './feature-users/feature-users.component';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import * as fromUsers from './+state/users.reducer';
import { UsersEffects } from './+state/users.effects';

export const featureUsersRoutes: Route[] = [
  {
    path: '',
    component: FeatureUsersComponent,
    providers: [
      provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
      provideEffects(UsersEffects),
    ],
  },
];

• Azioni
• Riduttori
• Selettori
• Effetti

Se desideri confermare l'integrazione, puoi eseguire i seguenti comandi e vedere gli output di successo!

nx build

nx test

nx test feature-users

Conclusione

Questa guida ha mostrato quanto sia facile configurare NgRx con Nx e come sfruttare le ultime API standalone con la tua applicazione. Tutto con soli 5 comandi Nx!

Con la roadmap angolare che punta a componenti autonomi che diventano l'opzione preferita per lo sviluppo di applicazioni angolari, questo supporto sarà cruciale in futuro e Nx ti aiuterà a raggiungerlo con la migliore DX possibile!

A proposito, sapevi che ora puoi eseguire lo scaffolding di un'area di lavoro Angular Nx a progetto singolo che sfrutta appieno le API standalone? Controllalo qui:https://youtu.be/Hi3aJ0Rlkls

Puoi controllare un repository di esempio che è stato creato seguendo i passaggi precedenti qui:https://github.com/Coly010/nx-ngrx-standalone

Saperne di più

Nx Docs
‍ Nx GitHub
Nrwl Community Slack
Nrwl Youtube Channel
Corso Egghead gratuito
Hai bisogno di aiuto con Angular, React, Monorepos, Lerna o Nx? Parla con noi

Inoltre, se ti è piaciuto, fai clic su e assicurati di seguire Colum e Nx su Twitter per saperne di più!