RxJS: Comunicación de datos entre componentes en React

RxJS es una biblioteca de JavaScript que se basa en el patrón observable. Este patrón se utiliza para representar flujos de datos que emiten valores con el tiempo. RxJS es especialmente útil cuando la comunicación de datos se produce entre dos o unos pocos componentes de una aplicación. Si la información es necesaria para toda una página o vista, se recomienda utilizar Context. Y si la información es necesaria para toda la aplicación, se recomienda utilizar Redux.

Descarga e instalación

npm install rxjs

Ejemplo básico

A continuación, se presenta un ejemplo básico de cómo utilizar RxJS para la comunicación de datos entre componentes en React.

Creamos una clase SubjectManager en un archivo, por ejemplo, SubjectManager.js. Utilizaremos clases para gestionar los observables. Esta clase tiene un Subject que actúa como un canal de comunicación. Por ejemplo:

import { Subject } from 'rxjs'

// vamos a utilizar clases
export class SubjectManager {
	subject = new Subject()

	getSubject() {
		return this.subject.asObservable()
		// asObservable es para que la linea de comunicación sea unidireccional,
		// es decir, que no se pueda modificar el subject
	}
	setSubject(value) {
		// setea el estado con el value
		this.subject.next(value)
	}
	// aca se puede agregar lo que te haga falta
}

Creamos un servicio en otro archivo, por ejemplo, informationService.js. En este servicio, creamos una instancia de SubjectManager para compartir la información entre componentes. Por ejemplo:

import { SubjectManager } from ...

export const informationService = new SubjectManager()
// ahora todo el que consuma este informationService va a tener
// la misma información

En el componente que desea escuchar la información, nos suscribimos al observable utilizando getSubject() del servicio. Utilizamos useEffect para suscribirnos y mostrar la información cuando cambie. Por ejemplo:

import { informationService } from ...

function componenteEscucha() {
  // aca recibimos la información cada vez que cambia
  const subscription = informationService.getSubject();

  useEffect(() => {
    // nos subscribimos y usamos la información
    const subscriptionObserver = subscription.subscribe(data => {
      console.log(data)
    })

    return () => {
      // nos desuscribimos para no usar tanta memoria
      subscriptionObserver.unsubscribe()
    }
  },[subscription])

  return (
    <div></div>
  )
}

En el componente que desea enviar información, importamos el servicio y utilizamos setSubject() para enviar los datos. Por ejemplo:

import { informationService } from ...

function componenteEmisor() {
  const handleClick = () => {
    // seteamos la data que queremos
    informationService.setSubject(data)
  }

  return(
    // no se me ocurrio algo mejor
    <button onClick={handleClick}>Enviar</button>
  )
}

En este ejemplo, creamos una instancia de SubjectManager en el servicio informationService. El componente ComponenteEscucha se suscribe al observable utilizando getSubject() y muestra la información cada vez que cambia. El componente ComponenteEmisor utiliza setSubject() para enviar los datos al observable.

Con RxJS, hemos implementado una comunicación de datos entre componentes en React de manera sencilla utilizando el patrón observable. RxJS ofrece muchas más funcionalidades y operadores para trabajar con flujos de datos, lo que lo convierte en una herramienta poderosa para gestionar la comunicación entre componentes en una aplicación React.