69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
|
# ADR-003: Signals vs RxJS para Estado Local
|
||
|
|
|
||
|
|
**Estado:** Aceptado
|
||
|
|
**Fecha:** 2026-01-07
|
||
|
|
|
||
|
|
## Contexto
|
||
|
|
|
||
|
|
Angular 21 introduce Signals como alternativa a RxJS para estado reactivo.
|
||
|
|
Necesitamos decidir el enfoque para manejo de estado en el frontend.
|
||
|
|
|
||
|
|
## Decisión
|
||
|
|
|
||
|
|
Usar **Signals para estado local** + **Apollo Client para estado del servidor**.
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Estado local con Signals
|
||
|
|
students = signal<Student[]>([]);
|
||
|
|
loading = signal(true);
|
||
|
|
|
||
|
|
// Estado del servidor con Apollo
|
||
|
|
this.apollo.watchQuery<GetStudentsQuery>({...})
|
||
|
|
```
|
||
|
|
|
||
|
|
## Consecuencias
|
||
|
|
|
||
|
|
### Positivas
|
||
|
|
- **Simplicidad:** Signals más intuitivos que BehaviorSubject
|
||
|
|
- **Performance:** Integración nativa con OnPush
|
||
|
|
- **Menos boilerplate:** No requiere async pipe en templates
|
||
|
|
- **Type-safe:** Mejor inferencia de tipos
|
||
|
|
|
||
|
|
### Negativas
|
||
|
|
- Tecnología relativamente nueva
|
||
|
|
- Menos operadores que RxJS
|
||
|
|
- Apollo aún usa Observables internamente
|
||
|
|
|
||
|
|
## Patrón Adoptado
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
@Component({
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
|
|
})
|
||
|
|
export class StudentListComponent {
|
||
|
|
// Estado local
|
||
|
|
students = signal<Student[]>([]);
|
||
|
|
loading = signal(true);
|
||
|
|
|
||
|
|
// Suscripción a Apollo
|
||
|
|
ngOnInit() {
|
||
|
|
this.studentService.getStudents().subscribe(({ data, loading }) => {
|
||
|
|
this.students.set(data);
|
||
|
|
this.loading.set(loading);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Alternativas
|
||
|
|
|
||
|
|
| Alternativa | Razón de Descarte |
|
||
|
|
|-------------|-------------------|
|
||
|
|
| RxJS puro | Mayor complejidad, más boilerplate |
|
||
|
|
| NgRx | Overkill para esta aplicación |
|
||
|
|
| Akita | Dependencia adicional innecesaria |
|
||
|
|
|
||
|
|
## Referencias
|
||
|
|
|
||
|
|
- [Angular Signals](https://angular.dev/guide/signals)
|