react.js: events instead of passing handler in props

Question

In React.js, the parent component passes the handler to update its state via props. In deeply nested components, this can become pretty messy. Is there a way to do this via pub-sub - the parent listens for an event, and executes the handler when it gets fired by the child?

PS: got the idea from Ractive.js ( http://docs.ractivejs.org/latest/components#events ).

Answer 1

I would recommend looking up the flux architecture that facebook uses with their react apps. They use a type of "pub/sub" in singleton stores, and use actions to update the data stores. When an update happens, the store notifies all subscribed controls to update. I've used this setup for a few personal projects, and with great success it has reduced this style of 'mass prop passing' that looks so ugly.

http://facebook.github.io/react/docs/flux-overview.html