Hacker News Reader

Comment by rco8786 | Hacker News Reader

> React/RxJS front-end stack

Tangent here, but I see this combo a lot and I don't understand what RxJS is adding to the equation on the front-end. What were/are your motivations for using RxJS?

View on HN

We use RxJS for data loading and global state management. Started with redux first, but really disliked all the boilerplate code. RxJS enabled us to have a really smart data loading and caching mechanisme that automatically pushes changes to all streams that rely on a particular piece of data whenever that data changes. No need for reducers, selectors, actions, constants or sagas. Just components with one or many RxJS subscriptions, and services to alter that data. It's been working really well for us so far.

I don't really understand RxJS that well, but here is where my understanding is at. RxJS helps with composition and dataloading. On a theorectical level, isn't it ideal to have Redux used with RxJS? How do you do global state management with RxJS?

Well, RxJS helps with pushing data around in general. It doesn't care much if it's from a local state store, a backend api or something else. So in a way it makes a lot of sense to use it for state management as well. The way we do it is by having a single global state store (like redux) with one incoming RxJS stream for writing to that store, and one outgoing stream that emits the latest snapshot of the store whenever a change is made to it. A component can then subscribe to that stream and filter it so it only gets an emitted value when the data it cares about changes. And because there's only one incoming and one outgoing stream it's very easy to debug and see what's going on in the app, making it very predictable and transparent. Also, like I said before: almost no boilerplate code at all!

That's a really clean sounding architecture. Any particular issues?

Hi, do you know of any docs / blogs that describe how to build what you have built? it sounds amazing but I don't know where to begin. do you write to the data store with some key / value pair, and subscribe to data by the key so you get back what you want when it changes?

The official Redux documentation [0] mentions using RxJS with Redux. According to the docs they work great together but you might not need Redux with RxJS.

I haven't come across a project using only React and RxJS though. There is redux-observable [1] if you haven't seen yet that combines Redux and RxJS.

[0]: http://redux.js.org/docs/introduction/PriorArt.html#rxjs

[1]: https://github.com/redux-observable/redux-observable

Totally agreed, after I jumped through the hoops of learning RxJS I realized it can replace all the libraries you mentioned just because of the way RxJS worked. If you are interested, I created a small little Redux-clone based on Observables/RxJS as a fun project, but am using it in my side projects in production now: https://github.com/Dynalon/reactive-state

This is nice! Thanks for sharing

We have been using VueJS. Loving its fully packaged ecosystem of vue-router, vuex. The EventBus + vuex layer takes care of all state management and data subscriptions.

Sounds interesting, is there some code I can look at or a blog post or something?

Reply on news.ycombinator.com