Actions y reducers

Aprenda a gestionar el estado en aplicaciones NgRx mediante actions y reducers.

¿Qué son las actions?

Las actions describen eventos o acciones únicos de su aplicación, como cargar datos o las interacciones de los usuarios.

Creación de actions

Cree actions mediante createAction():

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

Payloads de las actions

Pase datos con las actions mediante un payload:

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

Reducers

Los reducers gestionan las transiciones de estado según las actions. Devuelven nuevos estados sin modificar directamente el estado existente.

Creación de reducers

Use createReducer para definir cómo cambia el estado:

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

Actualización del estado

Los reducers siempre deben devolver nuevos objetos de estado. Nunca modifique directamente el estado existente.

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

Combinación de reducers

Combine varios reducers en un reducer raíz para gestionar estados complejos:

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

Resumen

Ha aprendido a crear actions y reducers para gestionar eficazmente el estado en Angular con NgRx.