No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Reactividad básica

18/20
Recursos

El concepto de reactividad básica es muy importante en el desarrollo front-end. Se trata del estado de la aplicación con respecto al valor de los datos en cada componente, cómo estos cambian a medida que el usuario interactúa y cómo se actualiza la interfaz.

Problemas en la comunicación de componentes

Cuando pensamos en cómo comunicar un componente padre con su hijo y viceversa, solemos utilizar los decoradores @Input() y @Output().

Pero muchas veces, en aplicaciones grandes, la comunicación de componentes se vuelve mucho más compleja y estas herramientas no alcanzan cuando se necesita enviar información de un componente “hijo” a uno “abuelo”.

reactividad basica angular.png

Solución a la comunicación de componentes

Es recomendable implementar un patrón de diseño para mantener el estado de la aplicación centralizado en un único punto, para que todos los componentes accedan a ellos siempre que necesiten. A este punto central se lo conoce como Store.

reactividad basica.png{height="" width=""}

Implementando un store de datos

Los store de datos suelen implementarse haciendo uso de Observables.

Paso 1:
Importa la clase BehaviorSubject desde la librería RxJS, que te ayudará a crear una propiedad observable, a la cual tu componente pueda suscribirse y reaccionar ante ese cambio de estado.

// services/store.service.ts
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StoreService {

  private myShoppingCart: Producto[] = [];
  private myCart = new BehaviorSubject<Producto[]>([]);
  public myCart$ = this.myCart.asObservable();

  constructor() { }

  addProducto(producto: Producto): void {
    // El observable emitirá un nuevo valor con cada producto que se agregue al carrito.
    this.myShoppingCart.push(producto);
    this.myCart.next(this.myShoppingCart);
  }

}

Paso 2: Suscribe a cualquier componente que necesites a estos datos, para reaccionar cuando estos cambian.

// components/nav-bar/nav-bar.component.ts
import { StoreService } from 'src/app/services/store.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit, OnDestroy {

  private sub$!: Subscription;

  constructor(
    private storeService: StoreService
  ) { }

  ngOnInit(): void {
    this.storeService.myCart$
      .subscribe(data => {
        // Cada vez que el observable emita un valor, se ejecutará este código
        console.log(data);
      });
  }
  
  ngOnDestroy(): void {
    this.sub$.unsubscribe();
  }

}

El lugar más apropiado para esto es en ngOnInit(). No olvides guardar este observable en una propiedad del tipo Subscription para hacer un unsubscribe() cuando el componente sea destruido.

NOTA: Por convención, las propiedades que guardan observables suelen tener un “$” al final del nombre para indicar que se trata de un observable.

Ver código fuente del proyecto


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 23

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Like si tambien te gustaria un curso dedicado a RXJS.

Excelente video, me pareció simplemente genial como Nicolas explica la reactividad, además agradezco que lo hayan incluido ya que es un tema importante, me encantaría ver un curso completo acerca de reactividad para Angular.

Expresa tu apoyo con un me gusta si estas de acuerdo.

Un like si apoyan mi comentario de que haya un curso de Rxjs y ngRx.

Coincido con los comentarios, hace falta un curso especifico de Rxjs en Angular

Es un tema súper importante y merece un curso propio. Tengo la duda de cómo evitar que el contador reinicie cuando el usuario refresca la pantalla? Que opciones hay? Es una buena practica usar LocalStorage?

Seria super bueno que indicaran como se utlizan los test de cada proceso

También todo mi apoyo para un curso de reactividad con RxJS y NGRx en Angular.

Programación Reactiva

La programación reactiva sigue el patrón de diseño Observer; cuando hay un cambio de estado en un objeto, los otros objetos son notificados y actualizados acorde.

Algo super importante cuando existen subscripciones a observables que no son de http o de route (que por sí mismas se destruyen), es que debemos manejar su destrucción del componente. Esto porque puede generar un memory leak.

Yo creé un método que realizara la suscripción y la retornara para manejarla.

getMyCartLength(): Subscription {
    return this._storeService.myCart$
      .subscribe(products => {
        this.counter = products.length;
      });
  }

Y dentro del onInit() la almaceno en una variable o arreglo (en caso que deba manejar más de una subscripción a observables) de tipo Subscription. Ej:

ngOnInit(): void {

    // Si se tendrán más subscripciones
    this.subscriptions = [
      this.getMyCartLength()
    ]

    // Manejar una sola subscripción
    this.subscription = this.getMyCartLength()
  }

Todo esto, para que cuando el componente de desmonte, y se ejecute el método onDestroy() del ciclo de vida. También destruya las subscripciones que tiene activas.

ngOnDestroy(): void {

    // Si se tendrán más subscripciones
    this.subscriptions.forEach(sub => {
      if (sub !== null) {
        sub.unsubscribe()
      }
    });

    // Manejar una sola subscripción
    this.subscription ? this.subscription.unsubscribe() : null;

  }

Ya entendi porque sentia que me costaba un poco mas entender React que otros frameworks o librerias.

Entender esta parte de reactividad ha hecho que haga un refactoring impresionante a mis proyectos, que excelente curso el del profe !

Quiero un curso de RXJS para Angular

apoyo la idea de que se hagan una serie de cursos sobre rxjs y reactividad en angular

Excelente la explicación de la reactivada con RxJS para Angular y también apoyo que haya un curso de reactivadad con RxJS y NGRx en Angular.

Muy buena explicación. El manejo de estado mediante un servicio nos quita de varias cosas como la comunicación que tendríamos que desarrollar para hacerlo por medio de inputs y outputs. Me gustaría saber su opinión de NGRX, aún se sigue usando o realmente hay mejores herramientas para mejorar el estado?

Excelente clase. Hace falta un cursito de RXJS y de NGRX para completar la carrera de Desarrollador Angular

Un curso de RxJS y ngRx please!!!

Con esta opción pueden crear el circulo para la numeración del carrito de compras.

span.red{
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.2em;
margin-right: 15px;
text-align: center;
width: 1.2em;
}

Tengo una gran pregunta, en foros he visto que al utilizar asObservable elimina la implementación del Observador(Observer). Por lo tanto, no puede llamar a next, error & complete en la instancia devuelta por asObservable().
que en typescriipt seria mejor hacer esto:

private messageSubject = new BehaviorSubject<any>(undefined);

public messages$: Observable<any> = this.messageSubject;

Que bonito es lo bonito 😃

crazy los observables 🖖