No tienes acceso a esta clase

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

Creación de un Observable

6/36
Recursos

Aportes 10

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En esta clase crearás tu primer observable 😊.

Estos son los comandos para crear la carpetas de ejercicios de RxJS:

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

También puedes acceder al repositorio de este curso donde se encuentran los archivos de configuración (como webpack.config.js).

Estoy tomando el curso, pero usando Typescript.
Aquí el ejemplo del profe.

import { Observable, Subscriber } from "rxjs";

// Las variables que sean observables se les argega el $
const observableAlfa$ = new Observable<number | string>(subscriber => {
	subscriber.next(1); //Dentro del flujo de información del observable solo hay numeros.
	subscriber.next(2);
	subscriber.complete();
	subscriber.next(20);
});

//Se va a crear un observador que se subscribirá al observable.
const observator = {
	next: (value: number | string) => {
		console.log(`The value is: ${value}`)
	},
	complete: () => {
		console.log(`The observable has no values`)
	},
	error: (error: Error) => {
		console.error(error.message);
	}
}

observableAlfa$.subscribe(observator);

Para los que quieran usar typescript instalan ts-loader

npm install ts-loader --save-dev

Y pegan esto en webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
}

Create project

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

Create
webpack.config.js


const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  mode: 'development'
}

Add script start to package.json (optional --open)

"start": "webpack serve --open"

  • Create index.js and index.html
    public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso RXJS</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

src/index.js

import { Observable } from "rxjs";

// agregar $ al final
const observableAlfa$ = new Observable(suscriber => {
  suscriber.next(10);
  suscriber.next(2);
  suscriber.next(3);
  suscriber.next(1);
  suscriber.complete() //observable finished
  //suscriber.error('Error en el flujo') //observable finished
})

const observador = {
  next: (value) => {
    console.log('Value', value);
  },
  complete: () => {
    console.info('Finished');
  },
  error: (error) => {
    console.error(error)
  }
}

observableAlfa$.subscribe(observador);

  • npm start to start the project

NOTAS:

  • La convención al nombrar los observables es que se les coloque un signo $ al final. Eso es lo que distingue a los observables.
    Ejemplo:
const observableAlfa$ = new Observable;
  • En el observador sólo el método next y error emiten valores, emiten información, next emite el valor en sí y el error el error.
    Ejemplo:
const observador = {
    next: (value) => {},
    complete: () => {},
    error: (error) => {},
};

Rx es la creme de la creme _

Pero que clase tan buena…!!

Creacion de un Observable


Para este ejecicio lo haremos en Js asi que para eso, primero inicalizacimos nuestro proyecto de npm y instalamos la dependencia de RsJS y Webpack para el renderizado de nuestra aplicacion:

npm init -yes
npm i rxjs
npm i webpack webpack-dev-server

y luego configuramos webpack:

const path = require('path');
module.exports = {
	module: {	},
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	}
}

creamos un nuevo script en nuestro package.json:

{
	...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack serve --open --mode development" 
  },
	...
  "dependencies": {
    "rxjs": "^7.8.1",
    "webpack": "^5.87.0",
    "webpack-dev-server": "^4.15.1"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }

Y ahora creamos nuestro observable

En primer lugar, se importa la clase Observable de la librería RxJS.

import { Observable } from 'rxjs'

A continuación, se crea una instancia de Observable llamada observableAlfa$. El signo '$' al final del nombre es una convención que indica que es un Observable.

const observableAlfa$ = new Observable(suscriber => {
	suscriber.next('Alfa')
	suscriber.next('Beta')
	suscriber.next('Gamma')
	suscriber.next('Delta')
	suscriber.error('Error')
	suscriber.complete()
});
  • En este caso, se emiten varios eventos utilizando el método next() del suscriptor. Los valores 'Alfa', 'Beta', 'Gamma' y 'Delta' son enviados secuencialmente como eventos.
  • Después, se simula un error utilizando el método error() del suscriptor. Esto provoca que el Observable emita un error.
  • Finalmente, se llama al método complete() del suscriptor para indicar que la emisión de eventos ha finalizado.

A continuación, se define un objeto llamado observador que tiene tres métodos: next, error y complete. Cada uno de estos métodos simplemente imprime el valor recibido en la consola.

const observador = {
	next: (value) => { console.log(value) },
	error: (error) => { console.log(error) },
	complete: () => { console.log('complete') }
}

Finalmente, se suscribe el objeto observador al Observable observableAlfa$ utilizando el método subscribe(). Esto significa que el objeto observador actuará como el suscriptor y recibirá los eventos emitidos por observableAlfa$.

observableAlfa$.subscribe(observador)

Creación de proyecto con vite.js

npm create vite@latest course-rxjs
cd course-rxjs
npm install
npm i rxjs
npm run serve

el Observer es un callback