DEV Community

React: I like RxJS

Dewald Els on November 22, 2020

⚠️ Heads up: ⚠️ This article is an opinion and experiment. I am open to comments and criticisms of this approach. UPDATE: 23 November 20...

Read full post

Kostia Palchyk • Nov 23 '20

Hey, nice article!

As a small improvement, I'd suggest using streams in MovieService. getMovies instead of promises: it'll be easier to manage requests, especially if two clients (e.g. widgets) are trying to fetch the same data.

Also, please check out this article of mine:

Fetching Data in React with RxJS and <$> fragment

Kostia Palchyk for RxJS ・ Aug 4 '20 ・ 5 min read

#react #rxjs #javascript #webdev

And yeah, there are many packages that try to integrate React and Rx, but it's still definitely worth investigating this direction, as I'm sure there are many things yet to be found!

Dewald Els • Nov 23 '20

Thanks for the comment and

Ah yes! This is exactly what is was playing with last night! Great article by the way!

I’m still fighting the idea of mixing API requests with subscriptions.

For my experiment I want to try and completely separate fetch from the subscriptions.

I’m not even quite sure what I want to do after reading all the amazing comments and links to existing libraries

Kostia Palchyk • Nov 24 '20

Keep on exploring and experimenting 👍

Dewald Els • Nov 23 '20

Oh regarding the movies being accessed from multiple widgets, I agree, this is an immediate problem I thought of but figured for the experiment i would put that aside for now. It is definitely not well structured in its current state and I will definitely check out using streams

Bjørn Stabell • Nov 23 '20

Nice summary - RxJS / reactive programming is really great :)

I'm wondering if instead of all the useEffect stuff, maybe you can just use an observable hook like useObservableState:

const output = useObservableState(input$, initialState)

See useObservableState

Dewald Els • Nov 23 '20

This is super interesting! This is actually what I had in mind for the next step.

stereobooster • Nov 22 '20

Can you show example of code on how to remove movie on the server e.g. do a REST call DELETE http://localhost:3000/movies/id?

Dewald Els • Nov 22 '20

Sure! I want to focus on writing a custom hook first. The code for deleting on the server would really depend on your application backend setup

stereobooster • Nov 22 '20

The code for deleting on the server would really depend on your application backend setup

We can assume pretty standard REST JSON API endpoint (like in Rails)

GET /movies - return list
GET /movies/id - return one item
DELETE /movies/id - delete one item
POST /movies/id - update one item

Another slight variation of the same idea

Bjørn Stabell • Nov 23 '20

Another suggestion is to look at RxDB - then you can extend the reactivity all the way to do the database. The content "state" is basically pushed to the database, only exposed as hooks in your SPA.

Yasir Hameed • Jun 7 '23

The article "I like RxJS" on the DEV Community celebrates this admiration for RxJS among developers. With its reactive programming paradigm, RxJS offers a wealth of possibilities for managing complex asynchronous operations in React applications Downloadhub. The author delves into their personal experiences and reasons for embracing RxJS, highlighting its ability to handle events, manage state, and simplify complex data flows

Young • Feb 3 '21

I use rxjs-hooks in React Projects. Hope it can help u!!!

artydev • Nov 22 '20

Great thank you.
You can be interested by this ReactQuery
Regards

artydev • Nov 22 '20 • Edited

Futhermore, perhaps you don't need a big library like RxJS , flyd is perhaps a lighter alternative look at this

var update = flyd.stream(222);

var App = function ({update}) {
  var [init, setInit] = React.useState(false);
  var [up, setUp] = React.useState(update())

  if (!init) {
   setInit(true);
   update.map((s) => setUp(s));
  }

  return (
    <div>
      <h1>{up}</h1>
    </div>
  );
};

ReactDOM.render(  
  <App update = {update} />,
  document.getElementById("app")
);

// Test
update(999)

You can test it here FlydStream

Derek Fowler • Nov 22 '20

Love React and RxJS and would definitely recommend you check out redux-observable - it's great...
redux-observable.js.org/

Yasir Hameed • Jul 1 '23

Absolutely love RxJS! It's a game-changer for managing asynchronous operations and makes coding so much smoother. whatsapp plus original

Fetching Data in React with RxJS and &lt;$&gt; fragment

Kostia Palchyk for RxJS ・ Aug 4 '20 ・ 5 min read

Fetching Data in React with RxJS and <$> fragment