Conceptos esenciales de NgRx Store

En esta lección conocerá NgRx, una potente solución de gestión de estado para aplicaciones Angular.

¿Qué es NgRx?

NgRx se inspira en Redux y ayuda a gestionar el estado de forma centralizada en aplicaciones Angular, lo que simplifica el manejo de datos entre componentes.

¿Por qué usar NgRx?

• Gestión de estado centralizada
• Flujo de datos claro y predecible
• Depuración y pruebas más sencillas

Conceptos fundamentales

NgRx incluye varios conceptos clave:

• Store: almacena el estado de la aplicación
• Actions: describen eventos
• Reducers: gestionan las transiciones de estado
• Selectors: recuperan datos del estado

Instalación de NgRx Store

Instale NgRx mediante npm:

npm install @ngrx/store --save

Creación de un Store

Defina el store en el módulo de su aplicación:

StoreModule.forRoot({ appState: appReducer })

Creación de actions

Las actions definen eventos en su aplicación:

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

Reducers

Los reducers gestionan los cambios de estado al responder a las actions y generar un nuevo estado:

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

Resumen

Ha aprendido los conceptos esenciales para usar NgRx Store y gestionar eficazmente el estado de su aplicación. ¡Buen trabajo!