Implementando of como operador en Observables

🎉 Implementando of como operador en Observables 📚

En este post 📝, vamos a aumentar el número de operadores que podemos implementar y usar dentro de un Observable 🔄 creando el operador of 🔧. Básicamente, será un operador de generación de observables de manera que podamos convertir datos en observables 💡.

Anteriormente, exploramos la implementación del operador filter 🚰 y el operador map 🗺️ en observables, implementándolos desde cero ⏳ de manera similar a como lo hace RX.js 🛠️. Esto nos ayudó a entender un poco más la filosofía y el funcionamiento interno de los observables 🧠.

🎯 Ejemplo de uso del operador of

HOLA

// Crea una constante "fancyObservable" que contiene un Observable creado con el método "of" y el valor 5 como argumento
// Nota: El método "of" proviene de bibliotecas de Observables como RxJS. En este caso, se asume que la biblioteca está importada.
const fancyObservable = Observable.of(5);

// Crea una constante "fancySubscription" que contiene una suscripción al "fancyObservable"
const fancySubscription = fancyObservable.subscribe({
  // Define un objeto con un método "next" que acepta un argumento "e"
  next(e) {
    // Imprime en la consola el valor del argumento "e" cuando el método "next" es llamado
    console.log(e);
  },
});

Te estarás preguntando, ¿por qué es esto importante? 🤔 ¿Qué sentido tiene convertir un dato ya desenvuelto en un Observable? La respuesta más inmediata es porque, a veces, necesitas combinar datos "puros" con datos que provienen de Observables 💥. Más adelante, veremos maneras de combinar observables, pero no tenemos forma de combinar datos "puros" con observables sin primero llevar los datos a Observables 🔄.

💡 Implementando el operador of

Para implementar el operador of, vamos a crearlo de manera estática, es decir, que esta función va a estar ligada al prototipo (prototype) sin importar si existe o no una instancia de un Observable 🔗.

// Define un método estático "of" dentro de una clase (por ejemplo, la clase "Observable"), que acepta un argumento "value"
static of(value) {
  // Retorna una nueva instancia de la clase "Observable" (o la clase que contiene este método estático)
  return new Observable(function subscribe(observer) {
    // Llama al método "next" del objeto "observer" y le pasa el argumento "value" que fue proporcionado a "of"
    observer.next(value);
    // Llama al método "complete" del objeto "observer" para indicar que no se emitirán más valores
    observer.complete();
    // Retorna un objeto que contiene un método "unsubscribe"
    return {
      // Define el método "unsubscribe" que, en este caso, no realiza ninguna acción
      unsubscribe() {}
    };
  });
}

🎉 ¡Eso es todo! 🎉

Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente 🌱, o que simplemente te haya ayudado a entender la naturaleza de los operadores sobre observables 🧩.

📚 Resumen de lo aprendido:

1. Aprendimos a crear el operador of para convertir datos en observables 🔄.
2. Vimos que el operador of es útil cuando necesitamos combinar datos "puros" con datos que provienen de Observables 💥.
3. Implementamos el operador of de manera estática en el prototipo (prototype) de un Observable 🔗.

🏋️‍♀️ Ejercicios propuestos:

1. Implementa el operador of en un proyecto que estés desarrollando y analiza cómo mejora la combinación de datos "puros" y observables 💡.
2. Experimenta con otros operadores en Observables, como concat, merge o switchMap y analiza cómo funcionan en conjunto con el operador of 🧠.
3. Crea un pequeño proyecto que utilice el operador of para realizar operaciones asíncronas, como llamadas a una API 🌐.

Si lograste implementarlo, quieres añadir alguna otra funcionalidad o tienes alguna duda, no dudes en dejarme un comentario en la parte de abajo 📩. Recuerda que si te gustó este post, también puedes compartirlo usando los links a las redes sociales en la parte de abajo 👇. ¡Hasta la próxima! 😄