NgRx Store és una llibreria per a Angular que proporciona un patró de gestió d'estat inspirat en Redux. Utilitza un únic arbre d'estat immutable per gestionar l'estat de l'aplicació, facilitant la previsibilitat i la traçabilitat dels canvis d'estat.
Objectius d'aquest tema
- Entendre els conceptes bàsics de NgRx Store.
- Aprendre a configurar NgRx Store en una aplicació Angular.
- Crear accions, reducers i selectors.
- Gestionar l'estat de l'aplicació amb NgRx Store.
Conceptes clau
- Estat únic i immutable
NgRx Store utilitza un únic arbre d'estat per a tota l'aplicació. Aquest estat és immutable, el que significa que no es pot modificar directament. En lloc d'això, es crea un nou estat en resposta a les accions.
- Accions
Les accions són objectes que descriuen un canvi d'estat. Cada acció té un tipus i, opcionalment, una càrrega de dades.
- Reducers
Els reducers són funcions pures que prenen l'estat actual i una acció com a arguments, i retornen un nou estat.
- Selectors
Els selectors són funcions que s'utilitzen per obtenir dades específiques de l'estat global.
Configuració de NgRx Store
Instal·lació
Per començar a utilitzar NgRx Store, primer cal instal·lar les dependències necessàries:
Configuració bàsica
- Definir l'estat inicial:
// src/app/state/app.state.ts
export interface AppState {
counter: number;
}
export const initialState: AppState = {
counter: 0,
};- Crear accions:
// src/app/state/counter.actions.ts
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');- Crear reducers:
// src/app/state/counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';
import { initialState } from './app.state';
const _counterReducer = createReducer(
initialState,
on(increment, (state) => ({ ...state, counter: state.counter + 1 })),
on(decrement, (state) => ({ ...state, counter: state.counter - 1 })),
on(reset, (state) => ({ ...state, counter: 0 }))
);
export function counterReducer(state, action) {
return _counterReducer(state, action);
}- Registrar el Store en el mòdul principal:
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './state/counter.reducer';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
StoreModule.forRoot({ counter: counterReducer }),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}Utilització de NgRx Store en components
- Despatxar accions:
// src/app/counter/counter.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement, reset } from '../state/counter.actions';
import { AppState } from '../state/app.state';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
})
export class CounterComponent {
constructor(private store: Store<AppState>) {}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
reset() {
this.store.dispatch(reset());
}
}- Seleccionar dades de l'estat:
// src/app/counter/counter.component.ts
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from '../state/app.state';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
})
export class CounterComponent {
counter$: Observable<number>;
constructor(private store: Store<AppState>) {
this.counter$ = store.pipe(select('counter'));
}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
reset() {
this.store.dispatch(reset());
}
}Exercici pràctic
Objectiu: Crear una aplicació Angular que utilitzi NgRx Store per gestionar un comptador.
- Crea un nou projecte Angular:
-
Segueix els passos de configuració de NgRx Store descrits anteriorment.
-
Crea un component
CounterComponenti implementa la lògica per incrementar, decrementar i restablir el comptador. -
Mostra el valor del comptador en el component
CounterComponent.
Solució
// src/app/counter/counter.component.html
<div>
<h1>Counter: {{ counter$ | async }}</h1>
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset</button>
</div>// src/app/counter/counter.component.ts
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from '../state/counter.actions';
import { AppState } from '../state/app.state';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
})
export class CounterComponent {
counter$: Observable<number>;
constructor(private store: Store<AppState>) {
this.counter$ = store.pipe(select('counter'));
}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
reset() {
this.store.dispatch(reset());
}
}Resum
En aquest tema, hem après els conceptes bàsics de NgRx Store i com configurar-lo en una aplicació Angular. Hem creat accions, reducers i selectors per gestionar l'estat de l'aplicació i hem vist com utilitzar NgRx Store en components Angular. Amb aquests coneixements, estàs preparat per gestionar l'estat de les teves aplicacions Angular de manera eficient i escalable.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
Mòdul 3: Components i plantilles
Mòdul 4: Directives i pipes
Mòdul 5: Serveis i injecció de dependències
Mòdul 6: Enrutament i navegació
Mòdul 7: Formularis en Angular
Mòdul 8: Client HTTP i observables
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables