Elementi essenziali di NgRx Store

Questa lezione introduce NgRx, una potente soluzione per la gestione dello stato delle applicazioni Angular.

Che cos'è NgRx?

NgRx si ispira a Redux e aiuta a gestire centralmente lo stato nelle applicazioni Angular, semplificando la gestione dei dati tra i componenti.

Perché usare NgRx?

• Gestione centralizzata dello stato
• Flusso dei dati chiaro e prevedibile
• Debug e test più semplici

Concetti fondamentali

NgRx include alcuni concetti fondamentali:

• Store: contiene lo stato dell'applicazione
• Actions: descrivono gli eventi
• Reducers: gestiscono le transizioni dello stato
• Selectors: recuperano i dati dello stato

Installazione di NgRx Store

Installare NgRx utilizzando npm:

npm install @ngrx/store --save

Creazione di uno Store

Definire lo store nel modulo dell'applicazione:

StoreModule.forRoot({ appState: appReducer })

Creazione delle Actions

Le actions definiscono gli eventi nell'applicazione:

export const loadData = createAction('[App] Load Data');

Reducers

I reducers gestiscono le modifiche dello stato rispondendo alle actions e producendo un nuovo stato:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Riepilogo

Ha appreso gli elementi essenziali per utilizzare NgRx Store e gestire efficacemente lo stato dell'applicazione. Ottimo lavoro!