Hacker News Reader

Comment by arobbins | Hacker News Reader

Om[1], a ClojureScript wrapper over React, solved problem 2 with Cursors[2]. Each component gets a reference into the data store, and can update its own data using the cursor almost transparently. In this case, it isn't that components declare what data they need, but their parents provide them with a cursor when instantiating them.

[1] https://github.com/swannodette/om [2] https://github.com/swannodette/om/wiki/Cursors

View on HN

Don't cursors still suffer from the problem of intermediate components needing to pass on state they don't use? For example, a list of articles might have an author for each article. Then you have the following components: App > ArticleList > ArticleItem. So App will have to have a list of authors and a list of articles, and pass that down to ArticleList, which, for each Article, will instantiate an ArticleItem and also find the correct author to pass to it. Instead, what if ArticleItem just got an Article, and then asked the author store to give it the Author? ArticleList shouldn't really care about the authors.

The example is a bit contrived, but hopefully you see the problem? Especially consider if there are a couple more layers between App and whatever leaf component is rendering something,

In Om, components can still look at the global state without using a cursor if they want. You could have a top level "authors" key in the data store that the ArticleItems would have hardcoded into them. They could look up the author themselves as you describe by looking up the "authors" key in the global data state.

Alternately, you can pass multiple cursors[1] to a component. In your example, you could pass each ArticleItem a cursor pointing to the right article, and a more general cursor pointing to the author store. This would eliminate the hard coding of "authors", but it would require ArticleList to pass along some sort of "additional-data" cursor.

[1] https://github.com/swannodette/om/wiki/Cursors#using-multipl...

I use cursors in JavaScript with a flux architecture, and yes, prop passing is a problem for us. I've rationalized it as "there are more wires, but the wires are straight and bundled, not a ratsnest of spaghetti references"

https://github.com/wingspan/wingspan-cursor/blob/master/js/C...

How about passing a createArticleTag() function to ArticleList, so that access to the AuthorStore gets passed down via the closure rather than explicitly?

Reply on news.ycombinator.com