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 鈥渉ijo鈥 a uno 鈥渁buelo鈥.

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 42

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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?

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

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

Quiero un curso de RXJS para Angular

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;

  }

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.

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

Estilos que les pueden servir para su contador

.shopping-cart-container {
      position: relative;
      display: block;
      .counter {
        position: absolute;
        right: -12px;
        top: -4px;
        color: #fefefe;
        font-size: 12px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        background-color: #458f4b;
      }
    }

apoyo la idea de que se hagan una serie de cursos sobre rxjs y reactividad 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?

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;

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

Like si tambi茅n quieres un curso sobre Akita state management con Angular Est谩 construido sobre RxJS e inspirado en modelos como Flux y Redux. La integraci贸n de Akita es m谩s simple que NgRx y NgXs.

Ahi tenes Curso de RxJs

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.

Un curso de RxJS y ngRx please!!!

Es la 5ta vez que me veo este video. Jajajaja, el impostor me est谩 atacando!

crazy los observables 馃枛

Realic茅 un post hace un tiempo en d贸nde trato de hacer mi mayor esfuerzo para explicar sobre este tema, me agradar铆a mucho que qui茅n pueda verlo, lo lea.


Flux: el flujo de datos que debes entender


Espero que les pueda alimentar el conocimiento

estado global usando servicios y rxjs

este es un video al que he vuelto mas de una vez para seguir profundizando en angular

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;
}

Que bonito es lo bonito 馃槂

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

rxjs es lo mismo qu茅 Ngrx??

Angular es Fascinante鈥 me convenci贸 totalmente, me encanta el orden, me encanta lo sencillo de su implementaci贸n, y realmente no parece ser una curva de aprendizaje, compleja, jeje o bueno es que Nico hace un gran trabajo como dicente, entrega muy muy bien el conocimiento. felicitaciones

Explicaci贸n magistral! Muchas gracias Nico!!

Este manejo de estado me recuerda muchisimo al useContext de React

En manejo del estado me gusta mucho mas del modo en que se hace en Angular a diferencia de como se tiene que hacer en React, aunque en React me encanta la manera tan facil y practica de comunicar componentes entre si, es una sintaxis mas limpia.

Tenia que decirlo 馃槃, Me encantan las 2 librerias

Excelente clase, super interesante esta alternativa para comunicaci贸n entre componentes!

Mi aporte por si los productos son mas de nueve

<div class="cart">
      <img src="./assets/icons/icon_shopping_cart.svg" alt="logo">
      <span class="span-cart"   *ngIf="counter > 9; else lessLength">+9</span>
      <ng-template #lessLength>
        <span class="span-cart"  >{{counter}}</span>
      </ng-template>
    </div>

Si alguien tiene alguna duda de donde el myCart$ saca los productos, es en el servicio al momento de hacer esto

this.myCart.next(this.myShoppingCart);
    }

se le da la referencia a la lista de productos.

hace falta en curso de ngRX

Super esta clase me gusto poder aplicar Store, poder realizar comunicaci贸n entre los componentes y sin tener que estar en input y output 馃榿