Actualmente estoy aprendiendo RxJS y estoy en una situación incómoda en la que creé un Observable personalizado básico para obtener de un servicio de fondo y luego encadenar usando pipe.

Estoy haciendo esto en React. En la función useEffect dentro de App.js tengo este código que se está ejecutando:

const http$ = Observable.create(async observer ={amp}gt; { try { const res = await axios("localhost:3001"); await observer.next(res.data); await observer.complete(); } catch (er) { observer.error(er); } }); const posts$ = http$.pipe( map(posts ={amp}gt; posts.map(post ={amp}gt; ({ ...post, genre: "Music" }))) ); posts$.subscribe( posts ={amp}gt; console.log(posts), noop, () ={amp}gt; { console.log("completed"); } ); 

Ahora, cuando voy y muevo la funcionalidad Observable en un archivo separado e intento ejecutar de nuevo, no funciona para un caso extraño. Ni siquiera hace la solicitud y no se muestran errores en la consola.

función dentro de utils.js:

 import { Observable } from "rxjs"; import { axios } from "axios"; export const createHttpObservable = url ={amp}gt; Observable.create(async observer ={amp}gt; { try { const res = await axios(url); await observer.next(res.data); await observer.complete(); } catch (er) { observer.error(er); } }); 

y dentro de App.js en algún punto:

  const http$ = createHttpObservable('localhost:3001'); const posts$ = http$.pipe(... 

¿Alguien me puede ayudar en esto? Porque creo que me estoy perdiendo algo. Muchas gracias.

Finalmente descubrí que era una importación incorrecta de la biblioteca axios. No hay nada malo con la implementación actual. Muchas gracias.