0

I'm having a hard time wrapping my head around the concepts of RxJS. I understand observables and subjects, but I can not vision it used in a real world applications. Can you give me real world examples that use RxJS?

Or Orsatti
  • 107
  • 1
  • 9
  • 2
    Virtually every Angular project? – jonrsharpe May 26 '19 at 08:18
  • @jonrsharpe I don't use Angular, but React. How does the RxJS replaces valinaJS? – Or Orsatti May 26 '19 at 08:33
  • See e.g. https://stackoverflow.com/questions/50495701/why-angular-uses-observable-for-httpclient – jonrsharpe May 26 '19 at 09:35
  • You use Rx when you need to track a value of a variable over time. If you just `var x = getVariableValue()` somewhere, and that function return changes after a minute, the x will still be the old value. If you need x to change when the return of the method changes, you use Rx to subscribe to all changes. Otherwise you would have to `setInterval(() => { var x = getVariableValue(); }, 1000)` or something, which is hacky and not very maintainable. – Roberto Zvjerković May 26 '19 at 10:37
  • @ritaj for an example, chat ? – Or Orsatti May 26 '19 at 10:41
  • Also Rx doesn't replace VanillaJS, it replaces vanilla variables. Variables, instead of one value at the time, become infinite values over time. – Roberto Zvjerković May 26 '19 at 10:41
  • Sure, a chat is a perfect example. But there are simpler ones. If you get a little red notification in the stackoverflow when you get my message, the red thingy was probably subscribed like `notification$.subscribe((numOfNotifications) => { var showRedThingy = numOfNotifications > 0})`. Otherwise you wouldn't see the red thingy show after you get the notification after first window load. If you just `var showRedThingy = getNumOfNotifications() > 0` and after that `numOfNotifications` changes, the red thing wouldn't show, `showRedThingy` wouldn't change. – Roberto Zvjerković May 26 '19 at 10:43
  • @ritaj that sounds like a lil bit of state management in react – Or Orsatti May 26 '19 at 11:07
  • 1) If you want to poll an API for example you can use RxJS. 2) Autocomplete feature can be made using rxjs. 3) Pub Sub pattern in general can be applied very well in front end as there are many events (publisher) which various subscribers can subscribe to. For example multiple clicks can be listened by different subscribes and take some action accordingly. 4) Managing API calls. You can do very well with RxJS. From the result you may want to filter some data, may want to map that data etc. – emkay May 27 '19 at 09:02

2 Answers2

2

RxJS observables are often used for HTTP Requests and another common application is in combination with WebSockets where you get an asynchronous steam of data.

Zerotwelve
  • 2,087
  • 1
  • 9
  • 24
2

As you already suspected in one of the comments, RXJS is very often used in combination with state management.

When you use the Store in angular, it is very common that you create a so called state selectors, which are observables. Eg. you create a selector to your office id. When you now subscribe to this selector / observable, everytime the office id the Store / State changes, your observable emits the new office id. This alone is great already, because you can bind html template variables to these observable which would update your office id in your page automatically.

In advanced cases you can use a massive amount of so called "operators" on your observables, with which you can "plug" together complex scenarios like lego bricks. Eg. with the office id you grab remote content from the server (employees), sort them by name and transform them into a json structure a third party angular component needs. All this in one rxjs stream. All the single steps, if they are asynchronous, wait for each other, because they are observables themselves, which emit, when they have new data.

malthoff
  • 199
  • 1
  • 9