React: How to send information to the parent component? - coffeescript

Question

I've created a pretty simple Navigation View Controller, modeled after the concept of the iOS UINavigationController. It basically just maintains a history of routes, and animates a push to another route or a pop.
(I hope you dont mind the coffeescript ;)
createView = (spec) -> React.createFactory(React.createClass(spec))
{div, span, input, img, button} = React.DOM
cond = (condition, result, otherwise) -> if condition then result?() else otherwise?()
Transition = React.createFactory(React.addons.CSSTransitionGroup)
NavVC = createView
displayName: 'NavVC'
mixins: [React.addons.PureRenderMixin]
propTypes:
rootScene: React.PropTypes.string.isRequired
renderScene: React.PropTypes.func.isRequired
getInitialState: ->
transition: 'navvc-appear'
stack: [#props.rootScene]
push: (route) ->
#setState
stack: React.addons.update(#state.stack, {$push: [route]})
transition: 'navvc-push'
pop: ->
if #state.stack.length is 1
console.warn("You shouldn't pop off the root view of a NavVC!")
else
#setState
stack: React.addons.update(#state.stack, {
$splice:[[#state.stack.length - 1, 1]]
})
transition: 'navvc-pop'
popFront: ->
#setState
stack: [#state.stack[0]]
transition: 'navvc-pop'
render: ->
route = #state.stack[#state.stack.length - 1]
pop = #pop if #state.stack.length > 1
popFront = #popFront if #state.stack.length > 1
div
className: 'navvc'
Transition
transitionName: #state.transition
#props.renderScene(route, #push, pop, popFront)
This works quite well and as expected. Here's a simple example of a page that recursively pushes and pops using the NavVC.
Page = createView
displayName: 'Page'
mixins: [React.addons.PureRenderMixin]
propTypes:
title: React.PropTypes.string.isRequired
push: React.PropTypes.func.isRequired
pop: React.PropTypes.func
push: ->
#props.push(Math.random().toString(36).substr(2,100))
render: ->
div
className: 'page'
div
className: 'title'
onClick: #push
#props.title
cond #props.pop,
=> div
className: 'back'
onClick: #props.pop
"< BACK"
App = createView
renderScene: (route, push, pop, popFront) ->
Page
key: route
title: route
pop: pop
push: push
render: ->
NavVC
rootScene: 'Hello NavVC'
renderScene: #renderScene
React.render App(), document.body
And here it is in action in a JSFiddle.
Now here's my problem. This works great when the child component is doing the pushing and popping. But what if a parent or sibling component is doing the pushing or popping?
Suppose the page itself is entirely unaware of the NavVC:
Page = createView
displayName: 'Page'
mixins: [React.addons.PureRenderMixin]
propTypes:
title: React.PropTypes.string.isRequired
render: ->
div
className: 'page'
div
className: 'title'
#props.title
And suppose we have some buttons that are siblings/parents of the NavVC which do the pushing and popping for us.
App = createView
getInitialState: -> {}
renderScene: (route, push, pop, popFront) ->
#setState({push, pop})
Page
key: route
title: route
push: ->
#state.push?(Math.random().toString(36).substr(2,100))
render: ->
div
className: 'app'
NavVC
rootScene: 'Hello NavVC'
renderScene: #renderScene
cond #state.pop,
=> div
className: 'left'
onClick: #state.pop
'<'
div
className: 'right'
onClick: #push
'>'
React.render App(), document.body
Well this is going to give us an error as it should.
Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
When App renders, NavVC is going to call renderScene which is going to call setState which requires an immediate re-render all over again. Currently the only solution I've come up with is to defer the setState until after the render cycle:
window.setTimeout =>
#setState({push, pop})
, 0
You can check out a working version of this example in the following JSFiddle.
But this solution seems wrong in some very fundamental ways. Its not declarative, it involves two renders every single time, and it breaks the one-directional data flow pattern. I desperately want to use this same component for both use cases -- the child pushes and pops, or the parent/sibling pushes and pops, or maybe a hybrid where the child pushes and the parent pops. I just can't seem to come up with a functional pattern that accomplishes this without breaking some very fundamental rules of good programming.
EDIT 1:
So I think I've figured out a step in the right direction: EventEmitters. The buttons emit events, and the NavVC listens to those events. We can wire up these events through the App component and the NavVC will listen for those events on mount and unregister those listeners on unmount. This maintains one-directional data flow!
One problem still remains though. The NavVC needs to be able to tell the back button if it is poppable so the back button knows whether or not it can be displayed... I haven't figured this out yet.

Answer 1

Alright. This was a huge pain, but I figured out a solution that is satisfactory -- I'd love some input though.
I created this idea of a Proxy component that fits in some space which can be controlled by a parent or a sibling.
App = createView
componentWillMount: ->
#PushProxy = createProxy(#renderPush)
#PopProxy = createProxy(#renderPop)
renderPush: (push) ->
div
className: 'right'
onClick: -> push(Math.random().toString(36).substr(2,100))
'>'
renderPop: (pop) ->
cond pop,
=> div
className: 'left'
onClick: pop
'<'
renderScene: (route, push, pop, popFront) ->
Page
key: route
title: route
render: ->
console.log "render app"
div
className: 'app'
#PushProxy()
#PopProxy()
NavVC
rootScene: 'Hello NavVC'
renderScene: #renderScene
pushProxy: #PushProxy
popProxy: #PopProxy
These Proxy components are rendered to from other components in their render function.
NavVC = createView
# clip
render: ->
console.log "render navvc"
route = #state.stack[#state.stack.length - 1]
pop = #pop if #state.stack.length > 1
popFront = #popFront if #state.stack.length > 1
#props.pushProxy.dispatch(#push)
#props.popProxy.dispatch(pop)
div
className: 'navvc'
Transition
transitionName: #state.transition
#props.renderScene(route, #push, pop, popFront)
This method still requires a setTimeout of zero, but its optimized not to render more than necessary so I think I'm alright with it.
rememberLast = (f) ->
lastArg = (->)
lastResult = false
(arg) ->
if lastArg isnt arg
lastResult = f(arg)
lastArg = arg
return lastResult
defer = (f) ->
(arg) ->
window.setTimeout ->
f(arg)
, 0
createProxy = (renderComponent) ->
value = undefined
listeners = {}
listen = (f) ->
id = Math.random().toString(36).substr(2,100)
listeners[id] = f
if value isnt undefined then f(value)
{stop: -> delete listeners[id]}
dispatch = (x) ->
value = x
for id, f of listeners
f(x)
Proxy = createView
displayName: 'Proxy'
getInitialState: ->
value: undefined
componentWillMount: ->
#listener = listen (value) =>
#setState({value})
componentWillUnMount: ->
#listener.stop()
render: ->
if #state.value isnt undefined
console.log "proxy render"
renderComponent(#state.value)
else
false
Proxy.dispatch = rememberLast defer dispatch
return Proxy
Check out this JSFiddle demonstrating it in action and check out the log statements to see that its rendering optimally.
I'm curious to hear from someone React people if this is proper thought. Maybe there is a more principled way of doing this.