Gestión de estados Angular: prácticas recomendadas para hacer avanzar su proyecto

Cuando creamos aplicaciones Angular con comunicaciones de datos pesadas, debemos considerar un enfoque holístico, que aborde factores como la eficiencia de los datos, la latencia de la red, la escalabilidad, la administración de recursos, las pruebas y la experiencia de usuario. Y una de las cosas que es extremadamente vital para evitar conflictos de datos y, al mismo tiempo, mantener la aplicación escalable y coherente es la eficacia Angular la gestión del estado. Sin él, los datos estarán en todas partes.

Pero, ¿qué es la Gestión del Estado en Angular y cómo se debe manejar exactamente? Profundicemos en las mejores prácticas de administración de estado de Angular con Ignite UI for Angular y veamos cómo abordarlas con una implementación de Service Basic utilizandoRxjsy administración de estado conNgRx, respaldada por ejemplos de código regional.

Try Ignite UI Angular For Free

¿Qué es la gestión estatal en Angular

Se trata de un proceso que implica diferentes técnicas y estrategias para manejar y mantener el estado de Angular aplicaciones. En este caso, el estado de una aplicación web hace referencia a todos los datos utilizados por la aplicación, incluidos los datos obtenidos de servicios externos y manipulados y mostrados por la aplicación, así como a todos los datos que la aplicación crea, almacena y usa para crear la interfaz de usuario correcta para un usuario determinado.

En palabras simples, es posible que se pregunte por qué necesitamos la Gestión Estatal en Angular. Piense en esto: cada nueva página o nueva funcionalidad, cada nueva interfaz de usuario en la aplicación que indica una condición actual (por ejemplo, si un usuario ha iniciado sesión o no) se suma a la complejidad de una aplicación. Una vez que va más allá del alcance de una aplicación simple, administrar todo esto es difícil si no se aplica una forma organizada de administración de estado. La forma más común de hacer esto en Angular es un contenedor de estado, que no solo recupera, comparte y actualiza los datos, sino que también permite acceder a ellos, interactuar con ellos y modificarlos aún más de una manera limpia y bien organizada.

Hacer la llamada o saber cuándo es necesario

A medidaque la aplicación se escala y se vuelve más compleja, generalmente significa tratar con una gran cantidad de datos, y la administración de datos en grandes proyectos puede ser complicada. Aquí, las cosas se complican aún más cuando se trabaja con datos asincrónicos, más cambios de datos de los que se debe realizar un seguimiento y más código. Lo más probable es que termine con demasiadas cosas sucediendo detrás de escena, como la computación de cambios constantes, los reflujos o las solicitudes de API, que incluso pueden bloquear el subproceso principal del navegador y hacer que la aplicación no responda. Si no se aborda de manera sistemática con la gestión estatal, lo anterior significaría demasiados gastos para corregir errores, deudas técnicas, etc.

Entonces, ¿cuándo utilizar la Angular de gestión estatal? Estos son algunos casos de uso.

• Creciente complejidad de las aplicaciones

Si bien es posible que las aplicaciones simples con un flujo de datos mínimo no requieran administración de estado, es especialmente beneficioso en proyectos de software a gran escala con múltiples componentes, muchas interacciones de datos, un conjunto cada vez mayor de funciones e interfaces de usuario intrincadas.

Lo que se logra aquí: mantener el orden, la consistencia de los datos, un mejor rendimiento y una experiencia de usuario mejorada + ofrecer interfaces receptivas.

• Sharing data 

La administración de estado se vuelve esencial cuando los datos deben compartirse entre diferentes partes de la aplicación, como componentes o servicios.

Lo que se logra aquí: gestión de datos centralizada y uso compartido de datos simplificado.

• En operaciones asincrónicas

Si tu app implica operaciones asincrónicas, como la recuperación de datos de las API, el control de actualizaciones en tiempo real o la interacción del usuario.

Lo que se logra aquí: flujo de datos asíncrono optimizado e interfaz de usuario receptiva.

• Cuando se apunta a cambios de estado predecibles

¿Desea un control estricto sobre cómo y cuándo cambia el estado en sus aplicaciones Angular? Existen diferentes bibliotecas de administración de estado que pueden facilitar el proceso.

Lo que se logra aquí: una base de código predecible y fácil de depurar garantizada.

Facilitar el trabajo de los desarrolladores: Angular las mejores prácticas de gestión estatal con Ignite UI

En cuanto a cómo administrar el estado en Angular, existen varias técnicas y herramientas, según la complejidad de la aplicación, los requisitos del proyecto, además de sus conocimientos y preferencias. Por ejemplo, si el estado es específico de un solo componente, puede administrar el estado en Angular dentro del propio componente. Para almacenar y actualizar datos aquí, tendrá que confiar en las propiedades y variables de la clase. Cuando se trata de aplicaciones a gran escala, es mejor considerar el uso de bibliotecas de administración de estado.

Pero veamos esto en detalle y exploremos las mejores técnicas Angular de Gestión del Estado.

• Implementación básica del servicio que utiliza Rxjs como una excelente manera de administrar el estado

La administración de estado en Angular mediante Services y RxJS es un enfoque eficaz y flexible, y estas son algunas de las mejores prácticas:

• Single responsibility principle 

Asegúrese de que cada servicio tenga una sola responsabilidad. Al diseñar servicios para manejar tareas específicas (por ejemplo, registrar y autenticar a un usuario, administrar datos de usuario, etc.), mantiene su base de código limpia y fácil de mantener. Cada servicio debe administrar una parte específica del estado, lo que facilita la depuración y las pruebas.

• El servicio como única fuente de verdad

Trate el servicio como una única fuente de verdad para el estado. Los componentes deben confiar en el servicio para obtener información de estado y actualizaciones, lo que promueve un flujo de datos unidireccional y facilita el razonamiento sobre la aplicación.

• Encapsulación de la lógica de estado en los servicios

Mantenga la lógica de estado dentro de los servicios, no en los componentes. Los servicios deben controlar la lógica de negocios y la administración de estados, mientras que los componentes se centran en la presentación y la interacción. Esta separación de preocupaciones mejora la capacidad de prueba y la reutilización.

• Error handling 

Implemente el control de errores dentro de sus servicios. Detecte y controle los errores en los observables para proporcionar una experiencia de usuario fluida y evitar que la aplicación se bloquee.

• Utilización de operadores y sujetos RxJs para la gestión estatal

Para ello, en primer lugar, elija el tema adecuado: un objeto multicast básico, que emita valores a varios suscriptores sin mantener ningún estado. Adecuado para eventos o acciones. A continuación, defina el Sujeto de Comportamiento. Es un tipo de Asunto que requiere un valor inicial y emite su valor actual a los nuevos suscriptores. Esto es útil para la administración de estados, ya que le permite inicializar el estado y proporcionar siempre el estado más reciente a los nuevos suscriptores. ReplaySubject: Emite un número especificado de valores anteriores a los nuevos suscriptores. Útil cuando necesita reproducir valores de estado pasados. A continuación, con AsyncSubject, puede emitir el último valor (y solo el último valor) al finalizar. Es útil para escenarios en los que solo se necesita el valor final emitido.

En el paso 2, puede utilizar varias secuencias de estado. Use operadores RxJS como combineLatest,withLatestFrom, etc., para combinar varias secuencias de estado. A menudo, es necesario derivar un estado basado en varios observables. Operadores como combineLatest permiten crear nuevos observables de estado basados en la combinación de otros flujos de estado. A continuación, escriba pruebas unitarias para los servicios y su lógica de administración de estados. Asegurarse de que sus servicios funcionen según lo esperado a través de las pruebas es crucial para mantener la estabilidad de las aplicaciones y detectar problemas temprano.

Mediante el uso de un servicio, se centraliza la lógica para obtener y almacenar datos meteorológicos. Esto garantiza que todos los componentes que necesitan datos meteorológicos los obtengan de una única fuente de verdad.

Servicio meteorológico

interface WeatherData {
    temperature: number;
   description: string;
}
@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private apiKey = 'YOUR_API_KEY';
  private _weather: BehaviorSubject<WeatherData | null> = new BehaviorSubject<WeatherData | null>(null);
  public weather$: Observable<WeatherData | null> = this._weather.asObservable();

constructor(private http: HttpClient) { }
  private getApiUrl(location: string): string {
   return `https://api.weatherapi.com/v1/current.json?key=${this.apiKey}&q=${location}`;
  }
  fetchWeather(location: string): Observable<WeatherData | null> {
    const apiUrl = this.getApiUrl(location);
    return this.http.get<WeatherData>(apiUrl).pipe(
      tap((data: WeatherData) => this._weather.next(data)),
      catchError(error => {
        console.error('Error fetching weather data', error);
        this._weather.next(null);
        return of(null);
      })
    );
  }
}

El 'WeatherService' obtiene datos de la API y los almacena en un 'BehaviorSubject', haciéndolos accesibles para cualquier componente que inyecte el servicio. Usando'BehaviorSubject' de rxjs. Permite que la aplicación administre de forma reactiva los cambios de datos. Cuando los datos meteorológicos se actualizan en el servicio, todos los componentes suscritos al 'BehaviorSubject' son notificados automáticamente y pueden actualizar sus vistas en consecuencia.

Component TS file: 

export class WeatherDisplayComponent implements OnInit {
    weather$: Observable<WeatherData | null>;

    constructor(private weatherService: WeatherService) {
        this.weather$ =this.weatherService.weather$;
    }

    ngOnInit(): void {
        this.weatherService.fetchWeather('New York');
    }
}

Archivo HTML del componente:

<div *ngIf="weather$ | async as weather"> 
   <h2>Current Weather</h2> 
   <p>Temperature: {{ weather.temperature }}°C</p> 
   <p>Description: {{ weather.description }}</p> 
</div> 

Los componentes siguen centrados en la visualización de datos y el control de las interacciones de los usuarios sin preocuparse por la obtención de datos o la administración de estados. Esta separación de preocupaciones hace que los componentes sean más fáciles de escribir, probar y mantener.

A continuación, se muestra un ejemplo de gestión de estado con NgRx:

El uso de NgRx para la administración de estado en su aplicación Angular puede proporcionar beneficios adicionales, especialmente para aplicaciones más grandes y complejas. NgRx es una biblioteca para administrar el estado reactivo en aplicaciones Angular utilizando el patrón Redux.

Defina la estructura de sus datos meteorológicos:

weather.model.ts 

export interface WeatherData {
       temperature: number;
       description: string;
    }
export interface WeatherState {
       weather: WeatherData | null; 
       loading: boolean; 
       error: string | null; 
    }

Defina acciones para representar diferentes eventos en la entidad meteorológica:

weather.actions.ts 

export const loadWeather = createAction(
      '[Weather] Load Weather',
      props<{ location: string }>()
    );
    export const loadWeatherSuccess = createAction(
     '[Weather] Load Weather Success',
      props<{ weather: WeatherData }>()
    );
    export const loadWeatherFailure = createAction(
      '[Weather] Load Weather Failure', 
      props<{ error: string }>()
    );  

Defina el reductor para controlar los cambios de estado en función de las acciones

weather.reducer.ts

export const initialState: WeatherState = {
      weather: null,
      loading: false,
      error: null,
    };
    export const weatherReducer = createReducer(
      initialState,
      on(loadWeather, (state) => ({
       ...state,
       loading: true,
       error: null,
      })),
      on(loadWeatherSuccess, (state, { weather }) => ({
       ...state,
       weather,
       loading: false,
      })),
     on(loadWeatherFailure, (state, { error }) => ({
       ...state,
       loading: false,
       error,
      }))
    );

Controle los efectos secundarios para controlar los efectos secundarios, como las llamadas a la API:

weather.effects.ts 

@Injectable()
export class WeatherEffects {
  loadWeather$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadWeather),
      mergeMap(action => this.http.get<WeatherData>(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${action.location}`).pipe(
        map(weather => loadWeatherSuccess({ weather })),
        catchError(error => of(loadWeatherFailure({ error: error.message })))
      )
      ))
  );
  constructor(private actions$: Actions, private http: HttpClient) { }
}

En su app.module.ts, registre la tienda y los efectos de NgRx para que se puedan usar en toda la aplicación.

@NgModule({
       imports: [
        BrowserModule,
        HttpClientModule,
        StoreModule.forRoot({ weather: weatherReducer }),
        EffectsModule.forRoot([WeatherEffects]),
       ]
    }) 

Defina selectores para el estado meteorológico a fin de derivar partes de estado a partir del estado de la entidad meteorológica.

weather.selectors.ts 

export const selectWeatherState = createFeatureSelector<WeatherState>('weather');
export const selectWeather = createSelector(
  selectWeatherState,
  (state: WeatherState) => state.weather
);
export const selectLoading = createSelector(
  selectWeatherState,
  (state: WeatherState) => state.loading
);
export const selectError = createSelector(
  selectWeatherState,
  (state: WeatherState) => state.error
);

Inyecte el almacén en el componente y envíe acciones para cargar los datos meteorológicos y seleccione el estado que se va a mostrar.

weather-display.component.ts 

export class WeatherDisplayComponent implements OnInit {
      weather$: Observable<WeatherData | null>;
      loading$: Observable<boolean>;
      error$: Observable<string | null>;
      constructor(private store: Store<{ weather: WeatherState }>) { 
       this.weather$ = this.store.pipe(select(selectWeather)); 
       this.loading$ = this.store.pipe(select(selectLoading)); 
       this.error$ = this.store.pipe(select(selectError)); 
      }
      ngOnInit(): void { 
       this.store.dispatch(loadWeather({ location: 'New York' })); 
      }
    }

Archivo HTML del componente:

<div *ngIf="loading$ | async">Loading...</div>
<div *ngIf="error$ | async as error">{{ error }}</div>
<div *ngIf="weather$ | async as weather">
   <h2>Current Weather</h2>
   <p>Temperature: {{ weather.temperature }}°C</p>
   <p>Description: {{ weather.description }}</p>
</div>

2. Considere el uso de bibliotecas de administración de estado: NgRx 

NgRx es una potente biblioteca para administrar el estado en aplicaciones Angular utilizando principios de programación reactiva. Está inspirado en el patrón Redux y se integra bien con Angular, lo que facilita el mantenimiento y la depuración del estado de su aplicación.

Para que queden las cosas más claras, aquí están los conceptos básicos explicados:

Almacene: garantiza una administración de estado coherente, promueve el flujo de datos unidireccional y proporciona una forma estructurada de manejar el estado de la aplicación. Representa todo el estado de la aplicación como un árbol de objetos inmutable. Cada nodo de este árbol corresponde a una parte específica del estado de la aplicación, a la que se accede a través de observables, lo que permite que los componentes se suscriban a segmentos específicos del estado.

Acciones: describen eventos en aplicaciones con tecnología NgRx. Representan algo que tuvo lugar dentro de la solicitud y pueden considerarse una declaración de hecho.

Reductores: funciones que toman el estado actual y una acción y devuelven un nuevo estado. Los reductores especifican cómo cambia el estado en respuesta a las acciones.

Selectores: funciones utilizadas para seleccionar segmentos del estado del almacén. Ayudan a encapsular la estructura de estado y se pueden componer para crear selectores más complejos.

Efectos: los efectos secundarios se manejan fuera de la tienda. Los efectos son clases que escuchan acciones específicas y realizan tareas como llamadas a la API y envían nuevas acciones en función de los resultados. Utilizan Angular inyección de dependencias y aprovechan los observables de RxJS para gestionar los efectos secundarios.

Consejos y trucos rápidos al usar NgRx

En primer lugar, organice su estado y realice la separación de estados de características. Para ello, separe el estado por módulos de características. Cada módulo de características debe tener su propia porción del estado para mantener las cosas modulares y mantenibles. Utilice una estructura de carpetas coherente dentro de cada módulo de funciones, como acciones, reductores, selectores y efectos.

A continuación, puede definir tipos de acción claros.Para la nomenclatura de acciones, se descriptivos tipos de acción. Tipos de acción de prefijo con la característica a la que pertenecen, por ejemplo, '[Weather] Load Weather'. En el caso de las cargas útiles de acción, utilice cargas útiles fuertemente tipadas. También debe definir interfaces para la carga útil a fin de garantizar la seguridad de tipos. Otra cosa importante en términos de NgRx es escribir reductores puros. Asegúrese siempre de que los reductores sean funciones puras y devuelvan siempre un nuevo objeto de estado en lugar de mutar el estado existente. Y mantener la lógica en los reductores al mínimo. Evite los efectos secundarios o la lógica compleja en los reductores; delegarlos a los efectos.

El uso de selectores para el acceso de estado también es algo a tener en cuenta. Puede utilizar selectores para encapsular la estructura de estado. Esto ayuda a mantener limpio el código del componente y abstrae la forma del estado. O bien, puede componer selectores para crear una selección de estado más compleja. Una cosa importante que debe hacer es usar efectos para manejar efectos secundarios como llamadas a la API, registro, etc. Esto mantiene sus reductores puros y sus componentes limpios. Y tenga en cuenta que siempre debe manejar los errores en los efectos. Utilice las acciones adecuadas para administrar los estados de error.

Por último, hay varias cosas a tener en cuenta en términos de pruebas. Escriba pruebas unitarias para los reductores a fin de asegurarse de que devuelven el estado correcto para las acciones especificadas. Pruebe los efectos para asegurarse de que envíen las acciones correctas y manejen los efectos secundarios correctamente. Recomendamos usar 'MockStore' para probar los componentes de forma aislada de la tienda NgRx real.

Demostremos esto más vívidamente con un ejemplo de Angular Gestión del Estado:

Imagina que estás creando una aplicación meteorológica. En él, debe obtener datos sobre actualizaciones meteorológicas de una API y mostrarlos en varias partes de su aplicación. Para ello, puede crear un WeatherService en Angular que gestione las solicitudes de API y almacene los datos dados. Este servicio se puede inyectar en diferentes componentes para acceder y mostrar la información meteorológica.

Envolver

En conclusión, estas técnicas de administración de estado para aplicaciones Angular, mediante servicios con RxJS y NgRx, ofrecen beneficios y compensaciones únicos que deben considerarse cuidadosamente en función de los requisitos del proyecto y la experiencia del equipo. Al final, la decisión debe priorizar los requisitos específicos del proyecto, las limitaciones de desarrollo y las capacidades del equipo. Al evaluar cuidadosamente estos factores, los desarrolladores pueden elegir el enfoque de administración de estado que mejor se alinee con sus objetivos y facilite la entrega exitosa de la aplicación Angular.