Actions e Reducers

Imparare a gestire lo stato nelle applicazioni NgRx utilizzando actions e reducers.

Che cosa sono le Actions?

Le actions descrivono eventi o operazioni specifici nell'applicazione, come il caricamento di dati o le interazioni dell'utente.

Creazione delle Actions

Creare le actions utilizzando createAction():

export const login = createAction('[Login Page] Login');

Payload delle Actions

Passare i dati insieme alle actions utilizzando il payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

I reducers gestiscono le transizioni dello stato in base alle actions. Restituiscono nuovi stati senza modificare direttamente quello esistente.

Creazione dei Reducers

Utilizzare createReducer per definire come cambia lo stato:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Aggiornamento dello stato

I reducers devono sempre restituire nuovi oggetti di stato. Non modificare mai direttamente lo stato esistente.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Combinazione dei Reducers

Combinare più reducers in un unico reducer radice per gestire stati complessi:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Riepilogo

Ha imparato a creare actions e reducers per gestire efficacemente lo stato in Angular con NgRx!