[question] How to pass state across tree

[slonoed]

I have one single atom for state.
Some components may want to watch some parts of this atom.
But their parents pure components without data.

For example: page header contain user control. Header doesnt have any data from state, but user control have. In react I pass this state by context. And wrap user control in container that watch data in state and pass as props to user control. I can do it with rum, but I want to know is this best way?

Also my question not about only state atom, but about all things components may want deep in tree.
In my case is state and dispatcher (chan).

[tonsky]

You can emulate context in a couple of ways:

1. Pass it explicitly (e.g. as a first arguments to all components)
2. Use global variable as a context (so intermediate parents don’t know
   about what children use)

To watch for the changes, use rum/reactive mixin and rum/cursor to
create atom-like view of part of the tree. Here’s a great example:
https://github.com/tonsky/rum/blob/gh-pages/examples/examples.cljs#L272-L318

Does it answer your questions?

On Wed, Sep 2, 2015 at 4:37 PM Dmitry Manannikov notifications@github.com
wrote:

I have one single atom for state.
Some components may want to watch some parts of this atom.
But their parents pure components without data.

For example: page header contain user control. Header doesnt have any data
from state, but user control have. In react I pass this state by context.
And wrap user control in container that watch data in state and pass as
props to user control. I can do it with rum, but I want to know is this
best way?

Also my question not about only state atom, but about all things
components may want deep in tree.
In my case is state and dispatcher (chan).

—
Reply to this email directly or view it on GitHub
#39.

[slonoed]

Almost.

Global vars is not an option.

It posible to write macro (or function?) that provide this variables to component?
Maybe it will use context #37

Because I wouldn't like to pass state across all components. Only component that interested in state receive it.

Root component (create state or receive from other code)
                                  |
                                  V
Statefull component (receive state from context?)
                                  |
                                  V
Stateless component (don't know about state)
                                  |
                                  V
Statefull component (receive state from context?)

In JS I can wrap component in decorator. Under the hood decorator create wrap component with another component. This wrapper get state (or api or another global var) from context and pass as property.

[martinklepsch]

Since this issue has been opened the ability to add context to a render tree has been added to Rum. @slonoed you can find an example for this here: https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples/context.cljs

I think this can be closed.

[slonoed]

@martinklepsch this way don't work with clojure data structures.
But anyway I found the way: keep state global, render rum in JVM (such cool) and rebind variables in threads.

[martinklepsch]

@slonoed right if your context is complex then this becomes an issue. You can put a function into context that will return the data you need, this way you're freed from Reacts context typing.