Optimización de búsquedas con NGRX y HTTP en Angular

¿Cómo implementar un search box con Angular?

Es común encontrar cajas de búsqueda conectadas a fuentes externas en nuestras aplicaciones web. Utilizando Angular, vamos a implementar una caja de búsqueda optimizada que evitará enviar múltiples peticiones, mejorando el performance y la experiencia del usuario. Este tutorial se basa en la creación de un componente de búsqueda, la suscripción a eventos de cambio de valor y el envío de peticiones HTTP para obtener resultados en tiempo real.

¿Dónde y cómo agregar el componente de búsqueda?

Para integrar el componente de búsqueda, primero debemos decidir su ubicación en el diseño de nuestro módulo 'home'. Es importante que este componente esté bien situado en la página, preferiblemente después de elementos importantes como los slides y antes del footer, para que sea accesible y visible para el usuario. Aquí seguimos creando el nuevo componente con el comando Angular CLI:

ng generate component home/components/search

Aquí, ubicamos nuestro componente con el nombre 'search' dentro de la carpeta 'home/components'.

¿Cómo manejar la interacción y datos con FormControl?

Una vez que tenemos el componente, implementamos un FormControl para manejar la caja de búsqueda. Este es un enfoque más sencillo ya que solo necesitamos un único campo de entrada:

import { FormControl } from '@angular/forms';

export class SearchComponent {
  searchField = new FormControl('');
}

Este control se liga directamente a un <input> de tipo búsqueda en el archivo HTML:

<input type="search" [formControl]="searchField" placeholder="Buscar...">
<p>Valor actual: {{ searchField.value }}</p>

¿Cómo gestionar las dependencias y el módulo de formularios reactivos?

No olvidemos importar y configurar los formularios reactivos en nuestro módulo:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [SearchComponent],
  imports: [ReactiveFormsModule],
})
export class HomeModule {}

¿Cómo conectar la API y manejar peticiones HTTP?

Para realizar peticiones HTTP a una API, creamos un método que utilice HttpClient. Este es un método directo, aunque lo ideal es hacerlo a través de un servicio para un enfoque profesional y escalable. Aquí un ejemplo para hacer peticiones a la API de gifs:

import { HttpClient } from '@angular/common/http';

export class SearchComponent {
  constructor(private http: HttpClient) {}

  getData(query: string): void {
    this.http.get(`https://api.giphy.com/v1/gifs/search?q=${query}&api_key=your_token&limit=10`)
      .subscribe(response => {
        console.log(response);
      });
  }
}

¿Cómo optimizar las peticiones para mejorar el rendimiento?

Utilizando suscripciones a los cambios en el valor del FormControl, podemos crear un enlace entre el control de búsqueda y la petición a la API:

ngOnInit(): void {
  this.searchField.valueChanges
    .pipe(debounceTime(300)) // Espera 300ms antes de enviar la petición
    .subscribe(value => this.getData(value));
}

Aquí es crucial aplicar técnicas de optimización como debounceTime para evitar el envío de múltiples peticiones mientras el usuario está escribiendo. Esta técnica mejora significativamente el rendimiento y reduce la carga en el servidor.

Continúa explorando y aplicando estas estrategias para mejorar tus habilidades en Angular y optimizar tus aplicaciones. ¡Buena suerte en tu viaje de aprendizaje!