Implementando selectSignal en Component-Store con la Nueva Sintaxis de Plantillas de Angular

En este artículo, exploraremos más sobre component-store con Angular. En lugar de usar los selectors habituales, usaremos selectSignal de component-store. Al mismo tiempo, actualizaremos nuestra plantilla para incluir la sintaxis de plantilla avanzada introducida en Angular 17.

¿Por qué?

Usaremos selectSignal en lugar de select() porque ayuda a mostrar los cambios relacionados con la vista en el store e incluye la nueva sintaxis de plantilla de Angular. Algunas ventajas que obtenemos son:

• Eliminar el uso del pipe async

• Simplificar la plantilla con @if para manejar el estado de carga

• Usar @for y @empty para mostrar las opciones

• Evitar el uso excesivo de ng-container y ng-template para manejar el pipe async y mostrar diferentes plantillas

Qué cambiaremos

Primero, el store,

// series.store.ts
// de selectores normales
  readonly series$ = this.select((state) => state.series);
  readonly isLoading$ = this.select((state) => state.state === 'loading');

// a usar selectSignal
  readonly seriesSignal: Signal<Serie[]> = this.selectSignal(
    (state) => state.series
  );
  readonly isLoadingSignal: Signal<boolean> = this.selectSignal(
    (state) => state.state === 'loading'
  );

Al usar selectSignal, recupera un Signal del store, no un observable.

Segundo, el componente

// series.component.ts
// viewModel del store eliminado
readonly vm$: Observable<ViewModelComponent> = this.store.vm$;

// convertido a selectSignal()
readonly vm: Signal<ViewModelComponent> = this.store.vm

// viewModel reemplazado

Ahora tenemos el mismo View Model, pero es un Signal en su lugar.

Tercero, la vista,

<!--series.components.html -->
  <h1>Series</h1>
  @if (vm().isLoading){
    <p>Loading...</p>
  }
  @else{
    <ul>
        @for (item of vm().series; track item.id;) {
            <li>{{item.name}}</li>
        } @empty {
            <li>No series found</li>
        }
    </ul>
   }

Usamos el signal para mostrar la información, y también, hicimos uso de la nueva Sintaxis de Plantilla de Angular.

Conclusión

Las nuevas características en Angular 16 (Signals) y Angular 17 (Nueva sintaxis de plantilla) hacen que mostrar información en Angular sea mucho más simple. Estos cambios crean una nueva forma de manejar las cosas en comparación con antes.

En este momento, creo que usar observables con RxJs para manejar datos y solicitudes es el mejor enfoque. Para cosas relacionadas con la vista, ahora prefiero usar Signals.

Puedes ver todos los cambios que hice en el código revisando este PR. Te permite comparar lo que cambiamos.

¿Tienes alguna experiencia con ComponentStore para compartir? ¿O alguna pregunta sobre lo que discutimos? Me encantaría escuchar tus pensamientos y hablar sobre ellos en los comentarios a continuación.